[fe] Package updates (MystenLabs#10174)

## Description This updates packages and makes code updates to the SDK related to it. Tagging @joyqvq for changes to the secp keypair. ## Test Plan Tests should still pass.
mikyoch · Mar 31, 2023 · 199f06d · 199f06d
1 parent 671d337
commit 199f06d
Show file tree

Hide file tree

Showing 203 changed files with 1,568 additions and 1,541 deletions.
diff --git a/apps/core/package.json b/apps/core/package.json
@@ -22,8 +22,8 @@
     },
     "dependencies": {
         "@mysten/sui.js": "workspace:*",
-        "@sentry/react": "^7.43.0",
-        "@sentry/tracing": "^7.43.0",
+        "@sentry/react": "^7.46.0",
+        "@sentry/tracing": "^7.46.0",
         "@tanstack/react-query": "^4.26.1",
         "bignumber.js": "^9.1.1",
         "decimal.js": "^10.4.3",
@@ -34,15 +34,14 @@
         "@headlessui/tailwindcss": "^0.1.2",
         "@tailwindcss/aspect-ratio": "^0.4.2",
         "@tailwindcss/forms": "^0.5.3",
-        "@tailwindcss/line-clamp": "^0.4.2",
         "@types/react": "^18.0.28",
         "eslint": "^8.36.0",
         "eslint-config-prettier": "^8.7.0",
         "postcss": "^8.4.19",
-        "prettier": "^2.8.4",
-        "tailwindcss": "^3.2.7",
+        "prettier": "^2.8.7",
+        "tailwindcss": "^3.3.1",
         "typescript": "^4.9.4",
-        "vite": "^4.2.0",
-        "vitest": "^0.29.3"
+        "vite": "^4.2.1",
+        "vitest": "^0.29.8"
     }
 }
diff --git a/apps/core/tailwind.config.js → apps/core/tailwind.config.ts b/apps/core/tailwind.config.js → apps/core/tailwind.config.ts
@@ -1,11 +1,11 @@
 // Copyright (c) Mysten Labs, Inc.
 // SPDX-License-Identifier: Apache-2.0
 
-const { fontFamily } = require('tailwindcss/defaultTheme');
-const colors = require('tailwindcss/colors');
+import { type Config } from 'tailwindcss';
+import { fontFamily } from 'tailwindcss/defaultTheme';
+import colors from 'tailwindcss/colors';
 
-/** @type {import('tailwindcss').Config} */
-module.exports = {
+export default {
     content: ['./src/**/*.{js,jsx,ts,tsx}'],
     theme: {
         // Overwrite colors to avoid accidental usage of Tailwind colors:
@@ -181,6 +181,5 @@ module.exports = {
         require('@tailwindcss/forms')({
             strategy: 'class',
         }),
-        require('@tailwindcss/line-clamp'),
     ],
-};
+} satisfies Config;
diff --git a/apps/explorer/package.json b/apps/explorer/package.json
@@ -31,8 +31,8 @@
         "@mysten/icons": "workspace:*",
         "@mysten/sui.js": "workspace:*",
         "@mysten/wallet-kit": "workspace:*",
-        "@sentry/react": "^7.43.0",
-        "@sentry/tracing": "^7.43.0",
+        "@sentry/react": "^7.46.0",
+        "@sentry/tracing": "^7.46.0",
         "@tanstack/react-query": "^4.26.1",
         "@tanstack/react-query-devtools": "^4.26.1",
         "@tanstack/react-table": "^8.7.9",
@@ -42,15 +42,15 @@
         "bignumber.js": "^9.1.1",
         "class-variance-authority": "^0.4.0",
         "clsx": "^1.2.1",
-        "framer-motion": "^10.5.0",
+        "framer-motion": "^10.10.0",
         "plausible-tracker": "^0.3.8",
         "prism-react-renderer": "^1.3.5",
         "prism-themes": "^1.9.0",
         "prismjs": "^1.29.0",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "react-error-boundary": "^3.1.4",
-        "react-hook-form": "^7.43.5",
+        "react-hook-form": "^7.43.9",
         "react-hot-toast": "^2.4.0",
         "react-router-dom": "^6.9.0",
         "topojson-client": "^3.1.0",
@@ -59,7 +59,7 @@
     },
     "devDependencies": {
         "@babel/core": "^7.21.3",
-        "@playwright/test": "^1.31.2",
+        "@playwright/test": "^1.32.1",
         "@storybook/addon-a11y": "7.0.0-rc.3",
         "@storybook/addon-essentials": "7.0.0-rc.3",
         "@storybook/addons": "7.0.0-rc.3",
@@ -75,26 +75,26 @@
         "@types/react-dom": "^18.0.11",
         "@types/topojson-client": "^3.1.1",
         "@vitejs/plugin-react": "^3.1.0",
-        "@vitest/ui": "^0.29.3",
+        "@vitest/ui": "^0.29.8",
         "autoprefixer": "^10.4.14",
         "eslint": "^8.36.0",
         "eslint-config-prettier": "^8.7.0",
         "eslint-config-react-app": "^7.0.1",
         "eslint-plugin-header": "^3.1.1",
         "happy-dom": "^8.9.0",
         "onchange": "^7.1.0",
-        "playwright": "^1.31.2",
+        "playwright": "^1.32.1",
         "postcss": "^8.4.19",
-        "prettier": "2.8.4",
-        "prettier-plugin-tailwindcss": "^0.2.4",
+        "prettier": "2.8.7",
+        "prettier-plugin-tailwindcss": "^0.2.6",
         "start-server-and-test": "^2.0.0",
         "storybook": "7.0.0-rc.3",
-        "tailwindcss": "^3.2.7",
-        "tsconfig-paths": "^4.1.1",
+        "tailwindcss": "^3.3.1",
+        "tsconfig-paths": "^4.2.0",
         "typescript": "^4.9.4",
-        "vite": "^4.2.0",
+        "vite": "^4.2.1",
         "vite-plugin-svgr": "^2.4.0",
-        "vitest": "^0.29.3"
+        "vitest": "^0.29.8"
     },
     "browserslist": {
         "production": [

diff --git a/apps/explorer/src/components/Activity/index.tsx b/apps/explorer/src/components/Activity/index.tsx
@@ -64,7 +64,7 @@ export function Activity({
                         <Tab>Epochs</Tab>
                         <Tab>Checkpoints</Tab>
                     </TabList>
-                    <div className="absolute inset-y-0 right-0 -top-1 text-2xl">
+                    <div className="absolute inset-y-0 -top-1 right-0 text-2xl">
                         <PlayPause
                             paused={paused}
                             onChange={handlePauseChange}

diff --git a/apps/explorer/src/components/Layout/index.tsx b/apps/explorer/src/components/Layout/index.tsx
@@ -40,7 +40,7 @@ export function Layout() {
                                 <div className="w-full">
                                     <Header />
                                     <main className="relative z-10 min-h-screen bg-offwhite">
-                                        <section className="mx-auto max-w-[1440px] py-10 px-5 2xl:px-0">
+                                        <section className="mx-auto max-w-[1440px] px-5 py-10 2xl:px-0">
                                             <Outlet />
                                         </section>
                                     </main>

diff --git a/apps/explorer/src/components/displaybox/DisplayBox.module.css b/apps/explorer/src/components/displaybox/DisplayBox.module.css
@@ -8,7 +8,7 @@ img.smallimage {
 
 div.modalcontainer,
 div.detailsbg {
-    @apply fixed top-0 left-0 z-20 h-full w-full;
+    @apply fixed left-0 top-0 z-20 h-full w-full;
 }
 
 @keyframes fadein {
@@ -31,7 +31,7 @@ div.fade {
 }
 
 .fig {
-    @apply mt-auto mb-[60px] sm:relative sm:left-[19px] sm:my-auto;
+    @apply mb-[60px] mt-auto sm:relative sm:left-[19px] sm:my-auto;
 }
 
 div.imageandcross {

diff --git a/apps/explorer/src/components/footer/Footer.tsx b/apps/explorer/src/components/footer/Footer.tsx
@@ -37,7 +37,7 @@ function FooterLinks({ links }: { links: FooterItems }) {
 
 function Footer() {
     return (
-        <footer className="bg-gray-75 py-10 px-5 md:px-10 md:py-14">
+        <footer className="bg-gray-75 px-5 py-10 md:px-10 md:py-14">
             <nav className="mx-auto grid grid-cols-1 gap-8 md:mx-0 md:grid-cols-4 md:gap-10 xl:w-1/2">
                 <div className="order-last mx-auto md:order-first md:mt-0">
                     <div className="h-full space-y-2 md:flex md:flex-col md:justify-between">

diff --git a/apps/explorer/src/components/module/ModuleView.module.css b/apps/explorer/src/components/module/ModuleView.module.css
@@ -15,7 +15,7 @@ section .codeview {
 }
 
 .moduletitle {
-    @apply pt-2 pb-2 text-sm font-semibold;
+    @apply pb-2 pt-2 text-sm font-semibold;
 }
 
 .module {
@@ -34,7 +34,7 @@ section .codeview {
 
 .itemviewtitle,
 .title {
-    @apply mt-5 mb-0 text-lg  font-[500] text-gray-100;
+    @apply mb-0 mt-5 text-lg  font-[500] text-gray-100;
 }
 
 section .codeview pre {

diff --git a/apps/explorer/src/components/module/PkgModulesWrapper.tsx b/apps/explorer/src/components/module/PkgModulesWrapper.tsx
@@ -131,7 +131,7 @@ function PkgModuleViewWrapper({ id, modules }: Props) {
                                     <button
                                         type="button"
                                         className={clsx(
-                                            'mt-0.5 block w-full cursor-pointer rounded-md border py-2 px-1.5 text-left text-body',
+                                            'mt-0.5 block w-full cursor-pointer rounded-md border px-1.5 py-2 text-left text-body',
                                             active
                                                 ? 'border-transparent bg-sui/10 text-gray-80'
                                                 : 'border-transparent bg-white font-medium text-gray-80'

diff --git a/apps/explorer/src/components/node-map/index.tsx b/apps/explorer/src/components/node-map/index.tsx
@@ -164,7 +164,7 @@ export default function NodeMap({ minHeight }: Props) {
                     </div>
                 </div>
 
-                <div className="absolute top-5 right-5 z-10">
+                <div className="absolute right-5 top-5 z-10">
                     <DateFilter value={dateFilter} onChange={setDateFilter} />
                 </div>
 

diff --git a/apps/explorer/src/components/ownedobjects/views/OwnedObjectView.tsx b/apps/explorer/src/components/ownedobjects/views/OwnedObjectView.tsx
@@ -32,7 +32,7 @@ export default function OwnedObjectView({ results }: { results: DataType }) {
     return (
         <div className="grid w-full grid-cols-1 divide-x-0 divide-gray-45 md:grid-cols-2 md:divide-x">
             {coin_results.length > 0 && (
-                <div className="space-y-5 pt-5 pr-0 xl:pr-10">
+                <div className="space-y-5 pr-0 pt-5 xl:pr-10">
                     <Heading color="gray-90" variant="heading4/semibold">
                         Coins
                     </Heading>

diff --git a/apps/explorer/src/components/transactions/RecentTxCard.module.css b/apps/explorer/src/components/transactions/RecentTxCard.module.css
@@ -3,7 +3,7 @@ div.txcardgrid h3 {
 }
 
 div.txcard {
-    @apply mt-5 mb-5 grid h-auto items-center border border-gray-45 bg-white bg-center pt-5 pb-5 pl-5 pr-5 text-left font-mono shadow-sm md:flex md:justify-around;
+    @apply mb-5 mt-5 grid h-auto items-center border border-gray-45 bg-white bg-center pb-5 pl-5 pr-5 pt-5 text-left font-mono shadow-sm md:flex md:justify-around;
 }
 
 div.txcardgridlarge {
@@ -55,7 +55,7 @@ div.txadd {
 }
 
 .txsearch input {
-    @apply mr-0 ml-0 rounded-none border border-gray-45 pl-2 pr-2 text-base shadow-sm;
+    @apply ml-0 mr-0 rounded-none border border-gray-45 pl-2 pr-2 text-base shadow-sm;
 }
 
 .txsearch [type='submit'] {

diff --git a/apps/explorer/src/pages/epochs/EpochTimer.tsx b/apps/explorer/src/pages/epochs/EpochTimer.tsx
@@ -10,7 +10,7 @@ export function EpochTimer() {
     const { epoch, progress, label } = useEpochProgress();
     if (!epoch) return null;
     return (
-        <div className="flex w-full items-center justify-center gap-1.5 rounded-full border border-gray-45 py-2 px-2.5 shadow-notification">
+        <div className="flex w-full items-center justify-center gap-1.5 rounded-full border border-gray-45 px-2.5 py-2 shadow-notification">
             <div className="w-5 text-steel-darker">
                 <ProgressCircle progress={progress} />
             </div>

diff --git a/apps/explorer/src/pages/home/Home.tsx b/apps/explorer/src/pages/home/Home.tsx
@@ -19,7 +19,7 @@ function Home() {
     return (
         <div
             data-testid="home-page"
-            className="grid grid-cols-1 gap-y-10 gap-x-12 md:grid-cols-2"
+            className="grid grid-cols-1 gap-x-12 gap-y-10 md:grid-cols-2"
         >
             <ErrorBoundary>
                 <HomeMetrics />

diff --git a/apps/explorer/src/pages/object-result/views/TokenView.tsx b/apps/explorer/src/pages/object-result/views/TokenView.tsx
@@ -137,7 +137,7 @@ export function TokenView({ data }: { data: DataType }) {
                                     </DescriptionList>
                                 </div>
                                 {data.display ? (
-                                    <div className="pt-2 pr-10 md:pt-2.5">
+                                    <div className="pr-10 pt-2 md:pt-2.5">
                                         <DescriptionList>
                                             <LinkOrTextDescriptionItem
                                                 title="Name"

diff --git a/apps/explorer/src/pages/transaction-result/TransactionResult.module.css b/apps/explorer/src/pages/transaction-result/TransactionResult.module.css
@@ -36,7 +36,7 @@
 }
 
 .txcomponent {
-    @apply pt-4 pb-4;
+    @apply pb-4 pt-4;
 }
 
 .txgridcolspan2 {
@@ -55,7 +55,7 @@
 
 .itemviewtitle,
 .txtitle {
-    @apply mt-5 mb-0 text-lg  font-[500] text-gray-100;
+    @apply mb-0 mt-5 text-lg  font-[500] text-gray-100;
 }
 
 .itemviewcontentlabel {
@@ -112,7 +112,7 @@
 }
 
 .txdetailsbg ul {
-    @apply mt-5 mb-2;
+    @apply mb-2 mt-5;
 
     border-top: none !important;
 }

diff --git a/apps/explorer/src/pages/transaction-result/TxLinks.module.css b/apps/explorer/src/pages/transaction-result/TxLinks.module.css
@@ -3,7 +3,7 @@
 }
 
 .mutatedcreatedlist ul li {
-    @apply pt-1.5 pb-1.5 font-mono;
+    @apply pb-1.5 pt-1.5 font-mono;
 }
 
 .mutatedcreatedlist ul li a,

diff --git a/apps/explorer/src/ui/Banner.tsx b/apps/explorer/src/ui/Banner.tsx
@@ -67,7 +67,7 @@ export function Banner({
             )}
             <div className="overflow-hidden break-words">{children}</div>
             {onDismiss ? (
-                <div className="absolute top-0 right-0">
+                <div className="absolute right-0 top-0">
                     <IconButton
                         icon={X12}
                         onClick={onDismiss}

diff --git a/apps/explorer/src/ui/Button.tsx b/apps/explorer/src/ui/Button.tsx
@@ -51,7 +51,7 @@ export function Button({
             disabled={props.disabled || loading}
         >
             {loading && (
-                <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
+                <div className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2">
                     <LoadingSpinner />
                 </div>
             )}

diff --git a/apps/explorer/src/ui/DisclosureBox.tsx b/apps/explorer/src/ui/DisclosureBox.tsx
@@ -23,7 +23,7 @@ export function DisclosureBox({
             <Disclosure defaultOpen={defaultOpen}>
                 <Disclosure.Button
                     as="div"
-                    className="flex cursor-pointer flex-nowrap items-center py-3.75 px-5"
+                    className="flex cursor-pointer flex-nowrap items-center px-5 py-3.75"
                 >
                     <div className="flex-1 text-body font-semibold text-gray-90">
                         {title}

diff --git a/apps/explorer/src/ui/VerticalList.tsx b/apps/explorer/src/ui/VerticalList.tsx
@@ -16,7 +16,7 @@ export function ListItem({ active, children, onClick }: ListItemProps) {
             <button
                 type="button"
                 className={clsx(
-                    'block w-full cursor-pointer rounded-md border py-2 px-2.5 text-left text-body',
+                    'block w-full cursor-pointer rounded-md border px-2.5 py-2 text-left text-body',
                     active
                         ? 'border-gray-50 bg-gray-45 font-semibold text-gray-90 shadow-sm'
                         : 'border-transparent bg-white font-medium text-gray-80'

diff --git a/apps/explorer/src/ui/header/NavItem.tsx b/apps/explorer/src/ui/header/NavItem.tsx
@@ -14,7 +14,7 @@ export const NavItem = forwardRef<HTMLButtonElement, NavItemProps>(
         <button
             ref={ref}
             type="button"
-            className="flex cursor-pointer items-center gap-1 rounded-md border-none bg-transparent py-3 px-4 text-heading6 font-medium text-white outline-none hover:bg-gray-100/60 ui-open:bg-gray-100/60"
+            className="flex cursor-pointer items-center gap-1 rounded-md border-none bg-transparent px-4 py-3 text-heading6 font-medium text-white outline-none hover:bg-gray-100/60 ui-open:bg-gray-100/60"
             {...props}
         >
             {beforeIcon}

diff --git a/apps/explorer/src/ui/header/NetworkSelect.tsx b/apps/explorer/src/ui/header/NetworkSelect.tsx
@@ -67,7 +67,7 @@ function SelectableNetwork({
             role="button"
             onClick={onClick}
             className={clsx(
-                'flex items-start gap-3 rounded-md py-2 px-1.25 text-body font-semibold hover:bg-gray-40 ui-active:bg-gray-40',
+                'flex items-start gap-3 rounded-md px-1.25 py-2 text-body font-semibold hover:bg-gray-40 ui-active:bg-gray-40',
                 state !== NetworkState.UNSELECTED
                     ? 'text-steel-darker'
                     : 'text-steel-dark'
@@ -146,7 +146,7 @@ function NetworkVersion({
     version: number | string;
 }) {
     return (
-        <div className="flex justify-between py-2 px-4">
+        <div className="flex justify-between px-4 py-2">
             <Text variant="subtitle/normal" color="steel">
                 Sui {label}
             </Text>

diff --git a/apps/explorer/tailwind.config.js b/apps/explorer/tailwind.config.js
diff --git a/apps/explorer/tailwind.config.ts b/apps/explorer/tailwind.config.ts
@@ -0,0 +1,9 @@
+// Copyright (c) Mysten Labs, Inc.
+// SPDX-License-Identifier: Apache-2.0
+
+import preset from '@mysten/core/tailwind.config';
+import { type Config } from 'tailwindcss';
+
+export default {
+    presets: [preset],
+} satisfies Partial<Config>;
diff --git a/apps/icons/package.json b/apps/icons/package.json
@@ -10,11 +10,11 @@
     "generate": "node scripts/preprocess.mjs && svgr --config-file svgrrc.config.js svgs"
   },
   "devDependencies": {
-    "@svgr/cli": "^6.5.1",
-    "@svgr/core": "^6.5.1",
+    "@svgr/cli": "^7.0.0",
+    "@svgr/core": "^7.0.0",
     "@types/react": "^18.0.28",
     "react": "^18.2.0",
-    "rimraf": "^4.4.0",
+    "rimraf": "^4.4.1",
     "typescript": "^4.9.4"
   }
 }
-Original file line number
+Diff line change
@@ Expand Up / @@ -164,7 +164,7 @@ export default function NodeMap({ minHeight }: Props) { @@
                         </div>
                     </div>
-                    <div className="absolute top-5 right-5 z-10">
+                    <div className="absolute right-5 top-5 z-10">
                         <DateFilter value={dateFilter} onChange={setDateFilter} />
                     </div>
@@ Expand Down @@