frontend: Updated code to use the latest version of Sui SDK.

kkomelin · Jun 5, 2024 · 69d2e01 · 69d2e01
1 parent d29f86d
commit 69d2e01
Show file tree

Hide file tree

Showing 11 changed files with 110 additions and 125 deletions.
diff --git a/packages/frontend/index.html b/packages/frontend/index.html
@@ -5,15 +5,15 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>%VITE_APP_NAME%</title>
     <meta name="description" content="%VITE_APP_DESCRIPTION%" />
-    
+
     <!-- Icons are generated with https://realfavicongenerator.net/ -->
-    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
-    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
-    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
-    <link rel="manifest" href="/site.webmanifest">
-    <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#4da2ff">
-    <meta name="msapplication-TileColor" content="#242424">
-    <meta name="theme-color" content="#242424">
+    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
+    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
+    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
+    <link rel="manifest" href="/site.webmanifest" />
+    <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#4da2ff" />
+    <meta name="msapplication-TileColor" content="#242424" />
+    <meta name="theme-color" content="#242424" />
   </head>
   <body>
     <div id="root"></div>

diff --git a/packages/frontend/package.json b/packages/frontend/package.json
@@ -13,23 +13,23 @@
     "deploy:firebase": "firebase deploy --only hosting"
   },
   "dependencies": {
-    "@mysten/dapp-kit": "^0.13.2",
-    "@mysten/sui.js": "^0.54.1",
-    "@mysten/wallet-standard": "^0.11.6",
+    "@mysten/dapp-kit": "^0.14.5",
+    "@mysten/sui": "^1.0.5",
+    "@mysten/wallet-standard": "^0.12.5",
     "@radix-ui/react-select": "^2.0.0",
     "@radix-ui/react-toggle": "^1.0.3",
     "@radix-ui/themes": "^3.0.5",
     "@tanstack/react-query": "^5.40.1",
     "bignumber.js": "^9.1.2",
     "clsx": "^2.1.1",
-    "lucide-react": "^0.378.0",
+    "lucide-react": "^0.383.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-hot-toast": "^2.4.1",
     "react-use": "^17.5.0"
   },
   "devDependencies": {
-    "@types/node": "^20.14.1",
+    "@types/node": "^20.14.2",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
     "@typescript-eslint/eslint-plugin": "^7.12.0",
@@ -41,8 +41,8 @@
     "eslint-plugin-react-hooks": "^4.6.2",
     "eslint-plugin-react-refresh": "^0.4.7",
     "postcss": "^8.4.38",
-    "prettier": "^3.3.0",
-    "prettier-plugin-tailwindcss": "^0.5.14",
+    "prettier": "^3.3.1",
+    "prettier-plugin-tailwindcss": "^0.6.1",
     "tailwindcss": "^3.4.3",
     "typescript": "^5.4.5",
     "vite": "^5.2.12",

diff --git a/packages/frontend/src/components/Notification.tsx b/packages/frontend/src/components/Notification.tsx
@@ -31,7 +31,7 @@ const Notification: FC<PropsWithChildren<INotification>> = ({
       {isCloseButtonVisible && (
         <Button
           variant="ghost"
-          className="-mr-3 cursor-pointer px-1 1text-sds-dark text-sds-accent-a11"
+          className="-mr-3 cursor-pointer px-1 text-sds-accent-a11"
           onClick={() => toast.dismiss(id)}
         >
           <XIcon />

diff --git a/packages/frontend/src/components/layout/Header.tsx b/packages/frontend/src/components/layout/Header.tsx
@@ -9,7 +9,7 @@ const Header = () => {
     <header className="supports-backdrop-blur:bg-white/60 dark:border-slate-50/1 sticky top-0 z-40 flex w-full flex-row flex-wrap items-center justify-center gap-4 bg-white/95 px-3 py-3 backdrop-blur transition-colors duration-500 sm:justify-between sm:gap-3 lg:z-50 lg:border-b lg:border-slate-900/10 dark:bg-transparent">
       <Link
         href="#"
-        className="flex flex-col sm:flex-row items-center justify-center gap-1 text-sds-dark outline-none hover:no-underline dark:text-sds-light"
+        className="flex flex-col items-center justify-center gap-1 text-sds-dark outline-none hover:no-underline sm:flex-row dark:text-sds-light"
       >
         <img src={Logo} alt="Logo" className="h-12 w-12" />
         <div className="pt-1 text-xl sm:text-2xl">

diff --git a/packages/frontend/src/helpers/faucet.ts b/packages/frontend/src/helpers/faucet.ts
@@ -1,4 +1,4 @@
-import { getFaucetHost, requestSuiFromFaucetV1 } from '@mysten/sui.js/faucet'
+import { getFaucetHost, requestSuiFromFaucetV1 } from '@mysten/sui/faucet'
 import { ENetworksWithFaucet } from '~~/types/ENetworksWithFaucet'
 
 export const fundAddress = async (

diff --git a/packages/frontend/src/helpers/greeting/misc.ts b/packages/frontend/src/helpers/greeting/misc.ts
@@ -1,5 +1,5 @@
-import { SuiObjectResponse } from '@mysten/sui.js/client'
-import { isValidSuiObjectId } from '@mysten/sui.js/utils'
+import { SuiObjectResponse } from '@mysten/sui/client'
+import { isValidSuiObjectId } from '@mysten/sui/utils'
 import { CONTRACT_MODULE_NAME } from '~~/config/networks'
 
 export const fullFunctionName = (

diff --git a/packages/frontend/src/helpers/greeting/transactions.ts b/packages/frontend/src/helpers/greeting/transactions.ts
@@ -1,41 +1,41 @@
-import { TransactionBlock } from '@mysten/sui.js/transactions'
+import { Transaction } from '@mysten/sui/transactions'
 import { fullFunctionName } from '~~/helpers/greeting/misc'
 
 export const prepareCreateGreetingTransaction = (
   packageId: string
-): TransactionBlock => {
-  const txb = new TransactionBlock()
-  txb.moveCall({
+): Transaction => {
+  const tx = new Transaction()
+  tx.moveCall({
     arguments: [],
     target: fullFunctionName(packageId, 'create'),
   })
 
-  return txb
+  return tx
 }
 
 export const prepareSetGreetingTransaction = (
   packageId: string,
   objectId: string,
   name: string
-): TransactionBlock => {
-  const txb = new TransactionBlock()
-  txb.moveCall({
-    arguments: [txb.object(objectId), txb.pure.string(name), txb.object('0x8')],
+): Transaction => {
+  const tx = new Transaction()
+  tx.moveCall({
+    arguments: [tx.object(objectId), tx.pure.string(name), tx.object('0x8')],
     target: fullFunctionName(packageId, 'set_greeting'),
   })
 
-  return txb
+  return tx
 }
 
 export const prepareResetGreetingTransaction = (
   packageId: string,
   objectId: string
-): TransactionBlock => {
-  const txb = new TransactionBlock()
-  txb.moveCall({
-    arguments: [txb.object(objectId)],
+): Transaction => {
+  const tx = new Transaction()
+  tx.moveCall({
+    arguments: [tx.object(objectId)],
     target: fullFunctionName(packageId, 'reset_greeting'),
   })
 
-  return txb
+  return tx
 }
diff --git a/packages/frontend/src/hooks/useFaucet.tsx b/packages/frontend/src/hooks/useFaucet.tsx
@@ -1,5 +1,5 @@
 import { useCurrentAccount, useSuiClientContext } from '@mysten/dapp-kit'
-import { formatAddress } from '@mysten/sui.js/utils'
+import { formatAddress } from '@mysten/sui/utils'
 import { NETWORKS_WITH_FAUCET } from '~~/config/networks'
 import { fundAddress } from '~~/helpers/faucet'
 import { notification } from '~~/helpers/notification'

diff --git a/packages/frontend/src/hooks/useNetworkConfig.tsx b/packages/frontend/src/hooks/useNetworkConfig.tsx
@@ -1,5 +1,5 @@
 import { createNetworkConfig } from '@mysten/dapp-kit'
-import { getFullnodeUrl } from '@mysten/sui.js/client'
+import { getFullnodeUrl } from '@mysten/sui/client'
 import {
   CONTRACT_PACKAGE_VARIABLE_NAME,
   DEVNET_CONTRACT_PACKAGE_ID,

diff --git a/packages/frontend/src/hooks/useTransact.ts b/packages/frontend/src/hooks/useTransact.ts
@@ -1,37 +1,28 @@
-import {
-  useSignAndExecuteTransactionBlock,
-  useSuiClient,
-} from '@mysten/dapp-kit'
-import { SuiTransactionBlockResponse } from '@mysten/sui.js/client'
-import { TransactionBlock } from '@mysten/sui.js/transactions'
+import { useSignAndExecuteTransaction, useSuiClient } from '@mysten/dapp-kit'
+import { Transaction } from '@mysten/sui/transactions'
+import { SuiSignAndExecuteTransactionOutput } from '@mysten/wallet-standard'
 import { EXPLORER_URL_VARIABLE_NAME } from '~~/config/networks'
 import { transactionUrl } from '~~/helpers/networks'
 import { notification } from '~~/helpers/notification'
 import useNetworkConfig from '~~/hooks/useNetworkConfig'
 
 interface IProps {
-  onSuccess?: (response: SuiTransactionBlockResponse) => void
+  onSuccess?: (data: SuiSignAndExecuteTransactionOutput) => void
   onError?: (e: Error) => void
 }
 
 const useTransact = ({ onSuccess, onError }: IProps = {}) => {
   const client = useSuiClient()
-  const { mutate: signAndExecute } = useSignAndExecuteTransactionBlock()
+  const { mutate: signAndExecute } = useSignAndExecuteTransaction()
   const { useNetworkVariable } = useNetworkConfig()
   const explorerUrl = useNetworkVariable(EXPLORER_URL_VARIABLE_NAME)
 
-  const transact = (txb: TransactionBlock) => {
+  const transact = (tx: Transaction) => {
     const notificationId = notification.txLoading()
 
     signAndExecute(
       {
-        // @todo: Handle types properly.
-        /* eslint-disable  @typescript-eslint/no-explicit-any */
-        transactionBlock: txb as any,
-        options: {
-          showEffects: true,
-          showObjectChanges: true,
-        },
+        transaction: tx,
       },
       {
         onError: (e: Error) => {
@@ -40,18 +31,18 @@ const useTransact = ({ onSuccess, onError }: IProps = {}) => {
             onError(e)
           }
         },
-        onSuccess: (tx: SuiTransactionBlockResponse) => {
+        onSuccess: (data: SuiSignAndExecuteTransactionOutput) => {
           client
-            .waitForTransactionBlock({
-              digest: tx.digest,
+            .waitForTransaction({
+              digest: data.digest,
             })
             .then(() => {
               notification.txSuccess(
-                transactionUrl(explorerUrl, tx.digest),
+                transactionUrl(explorerUrl, data.digest),
                 notificationId
               )
               if (onSuccess != null) {
-                onSuccess(tx)
+                onSuccess(data)
               }
             })
         },