wallet use new transferObject method (MystenLabs#2876)

* wallet use new transferObject method * update * upate transfer cost * set the default nft transfer fee to a const value * update
sorcer1122 · Jul 1, 2022 · 3dee34c · 3dee34c
1 parent 4b55835
commit 3dee34c
Show file tree

Hide file tree

Showing 7 changed files with 27 additions and 43 deletions.
diff --git a/wallet/src/ui/app/components/sui-object/index.tsx b/wallet/src/ui/app/components/sui-object/index.tsx
@@ -18,7 +18,7 @@ import st from './SuiObject.module.scss';
 
 export type SuiObjectProps = {
     obj: SuiObjectType;
-    sendNFT?: boolean;
+    sendNFT?: boolean | 'unavaliable';
 };
 
 function SuiObject({ obj, sendNFT }: SuiObjectProps) {

diff --git a/wallet/src/ui/app/pages/transfer-nft/TransferNFTForm.tsx b/wallet/src/ui/app/pages/transfer-nft/TransferNFTForm.tsx
@@ -3,13 +3,14 @@
 
 import { ErrorMessage, Field, Form, useFormikContext } from 'formik';
 import { useEffect, useRef, memo } from 'react';
-import { useIntl } from 'react-intl';
 
 import AddressInput from '_components/address-input';
 import Alert from '_components/alert';
 import LoadingIndicator from '_components/loading/LoadingIndicator';
-import NumberInput from '_components/number-input';
-import { balanceFormatOptions } from '_shared/formatting';
+import {
+    GAS_SYMBOL,
+    DEFAULT_NFT_TRANSFER_GAS_FEE,
+} from '_redux/slices/sui-objects/Coin';
 
 import type { FormValues } from '.';
 
@@ -31,10 +32,9 @@ function TransferNFTForm({
         isValid,
         values: { to, amount },
     } = useFormikContext<FormValues>();
-    const intl = useIntl();
+
     const onClearRef = useRef(onClearSubmitError);
     onClearRef.current = onClearSubmitError;
-    const transferCost = 10000;
     useEffect(() => {
         onClearRef.current();
     }, [to, amount]);
@@ -52,30 +52,10 @@ function TransferNFTForm({
             </div>
 
             <div className={st.group}>
-                <label className={st.label}>Amount:</label>
-                <Field
-                    component={NumberInput}
-                    allowNegative={false}
-                    name="amount"
-                    value={transferCost}
-                    className={st.input}
-                    disabled={true}
-                />
-                <div className={st.muted}>
-                    Available balance:{' '}
-                    {intl.formatNumber(
-                        BigInt(gasBalance),
-                        balanceFormatOptions
-                    )}{' '}
-                </div>
-                <ErrorMessage
-                    className={st.error}
-                    name="amount"
-                    component="div"
-                />
+                * Total transaction fee estimate (gas cost):
+                {DEFAULT_NFT_TRANSFER_GAS_FEE} {GAS_SYMBOL}
             </div>
-
-            {BigInt(gasBalance) < transferCost && (
+            {BigInt(gasBalance) < DEFAULT_NFT_TRANSFER_GAS_FEE && (
                 <div className={st.error}>
                     * Insufficient balance to cover transfer cost
                 </div>

diff --git a/wallet/src/ui/app/pages/transfer-nft/index.tsx b/wallet/src/ui/app/pages/transfer-nft/index.tsx
@@ -15,14 +15,17 @@ import {
     accountNftsSelector,
 } from '_redux/slices/account';
 import { transferSuiNFT } from '_redux/slices/sui-objects';
-import { GAS_TYPE_ARG } from '_redux/slices/sui-objects/Coin';
+import {
+    GAS_TYPE_ARG,
+    DEFAULT_NFT_TRANSFER_GAS_FEE,
+} from '_redux/slices/sui-objects/Coin';
 
 import type { SerializedError } from '@reduxjs/toolkit';
 import type { FormikHelpers } from 'formik';
 
 const initialValues = {
     to: '',
-    amount: 10000,
+    amount: DEFAULT_NFT_TRANSFER_GAS_FEE,
 };
 
 export type FormValues = typeof initialValues;
@@ -79,6 +82,7 @@ function TransferNFTPage() {
                     transferSuiNFT({
                         recipientAddress: to,
                         nftId: objectId,
+                        transferCost: DEFAULT_NFT_TRANSFER_GAS_FEE,
                     })
                 ).unwrap();
                 resetForm();

diff --git a/wallet/src/ui/app/pages/transfer-nft/validation.ts b/wallet/src/ui/app/pages/transfer-nft/validation.ts
@@ -17,15 +17,15 @@ export function createValidationSchema(
             `NFT is owned by this address`,
             (value) => senderAddress !== value
         ).test(
-            'sender-address',
+            'nft-sender-address',
             // eslint-disable-next-line no-template-curly-in-string
             `NFT address must be defferent from receiver address`,
             (value) => objectId !== value
         ),
         amount: Yup.number()
             .integer()
             .required()
-            .test('max', `Insufficient balance to cover gas fee`, (amount) => {
+            .test('nft-gas-balance-chec', `Insufficient balance to cover gas fee`, (amount) => {
                 return gasBalance >= BigInt(amount || 0);
             })
             .label('Amount'),

diff --git a/wallet/src/ui/app/redux/slices/sui-objects/Coin.ts b/wallet/src/ui/app/redux/slices/sui-objects/Coin.ts
@@ -23,6 +23,7 @@ export const DEFAULT_GAS_BUDGET_FOR_MERGE = 500;
 export const DEFAULT_GAS_BUDGET_FOR_TRANSFER = 100;
 export const GAS_TYPE_ARG = '0x2::sui::SUI';
 export const GAS_SYMBOL = 'SUI';
+export const DEFAULT_NFT_TRANSFER_GAS_FEE = 450;
 
 // TODO use sdk
 export class Coin {

diff --git a/wallet/src/ui/app/redux/slices/sui-objects/NFT.ts b/wallet/src/ui/app/redux/slices/sui-objects/NFT.ts
@@ -36,15 +36,13 @@ export class ExampleNFT {
     public static async TransferNFT(
         signer: RawSigner,
         nftId: string,
-        recipientID: string
+        recipientID: string,
+        transferCost: number
     ): Promise<TransactionResponse> {
-        return await signer.executeMoveCall({
-            packageObjectId: '0x2',
-            module: 'devnet_nft',
-            function: 'transfer',
-            typeArguments: [],
-            arguments: [nftId, recipientID],
-            gasBudget: 10000,
+        return await signer.transferObject({
+            objectId: nftId,
+            gasBudget: transferCost,
+            recipient: recipientID,
         });
     }
 }
diff --git a/wallet/src/ui/app/redux/slices/sui-objects/index.ts b/wallet/src/ui/app/redux/slices/sui-objects/index.ts
@@ -54,15 +54,16 @@ export const mintDemoNFT = createAsyncThunk<void, void, AppThunkConfig>(
 
 export const transferSuiNFT = createAsyncThunk<
     void,
-    { nftId: ObjectId; recipientAddress: SuiAddress },
+    { nftId: ObjectId; recipientAddress: SuiAddress; transferCost: number },
     AppThunkConfig
 >(
     'transferSuiNFT',
     async (data, { extra: { api, keypairVault }, dispatch }) => {
         await ExampleNFT.TransferNFT(
             api.getSignerInstance(keypairVault.getKeyPair()),
             data.nftId,
-            data.recipientAddress
+            data.recipientAddress,
+            data.transferCost
         );
         await dispatch(fetchAllOwnedObjects());
     }