refactor: replace wallet deprecated methods with txbuilder in set col…

…lateral flow
input-output-hk · Jun 2, 2023 · ff49752 · ff49752
1 parent b786213
commit ff49752
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 23 deletions.
diff --git a/apps/browser-extension-wallet/src/hooks/useCollateral.ts b/apps/browser-extension-wallet/src/hooks/useCollateral.ts
@@ -8,23 +8,23 @@ import { firstValueFrom } from 'rxjs';
 import { map, take, filter } from 'rxjs/operators';
 import { isNotNil } from '@cardano-sdk/util';
 import { useSyncingTheFirstTime } from './useSyncingTheFirstTime';
+import { TxBuilder } from '@cardano-sdk/tx-construction';
 
 const COLLATERAL_ADA_AMOUNT = 5;
 export const COLLATERAL_AMOUNT_LOVELACES = BigInt(Wallet.util.adaToLovelacesString(String(COLLATERAL_ADA_AMOUNT)));
 
-type TX_STATE = Cardano.TxBodyWithHash | null;
-
 type UseCollateralReturn = {
   initializeCollateralTx: () => Promise<void>;
   submitCollateralTx: () => Promise<void>;
   isInitializing: boolean;
   isSubmitting: boolean;
-  tx: TX_STATE;
+  txFee: Cardano.Lovelace;
   hasEnoughAda: boolean;
 };
 
 export const useCollateral = (): UseCollateralReturn => {
-  const [tx, setTx] = useState<TX_STATE>();
+  const [txFee, setTxFee] = useState<Cardano.Lovelace>();
+  const [txBuilder, setTxBuilder] = useState<TxBuilder>();
   const { inMemoryWallet, getKeyAgentType } = useWalletStore();
   const isInMemory = useMemo(() => getKeyAgentType() === Wallet.KeyManagement.KeyAgentType.InMemory, [getKeyAgentType]);
   const [isInitializing, setIsInitializing] = useState<boolean>(false);
@@ -48,23 +48,22 @@ export const useCollateral = (): UseCollateralReturn => {
     // if the wallet has not been synced at least once or has no balance don't initialize Tx
     if (!hasEnoughAda || isSyncingForTheFirstTime) return;
     setIsInitializing(true);
-    const initialTx = await inMemoryWallet.initializeTx({ outputs: new Set([output]) });
-    setTx(initialTx);
+    const builder = inMemoryWallet.createTxBuilder().addOutput(output);
+    const tx = await builder.build().inspect();
+    setTxFee(tx.body.fee);
+    setTxBuilder(builder);
     setIsInitializing(false);
-  }, [inMemoryWallet, output, hasEnoughAda, isSyncingForTheFirstTime]);
+  }, [hasEnoughAda, isSyncingForTheFirstTime, inMemoryWallet, output]);
+
   const submitCollateralTx = async () => {
-    if (!tx) return;
+    if (!txBuilder) return;
     setIsSubmitting(true);
     try {
-      const signedTx = await inMemoryWallet.finalizeTx({
-        tx
-      });
-      await inMemoryWallet.submitTx(signedTx);
+      const { tx } = await txBuilder.build().sign();
+      await inMemoryWallet.submitTx(tx);
       const utxo = await firstValueFrom(
         inMemoryWallet.utxo.available$.pipe(
-          map((utxos) =>
-            utxos.find((o) => o[0].txId === signedTx.id && o[1].value.coins === COLLATERAL_AMOUNT_LOVELACES)
-          ),
+          map((utxos) => utxos.find((o) => o[0].txId === tx.id && o[1].value.coins === COLLATERAL_AMOUNT_LOVELACES)),
           filter(isNotNil),
           take(1)
         )
@@ -81,7 +80,7 @@ export const useCollateral = (): UseCollateralReturn => {
     submitCollateralTx,
     isInitializing,
     isSubmitting,
-    tx,
+    txFee,
     hasEnoughAda
   };
 };
diff --git a/...allet/src/views/browser-view/features/settings/components/Collateral/CollateralDrawer.tsx b/...allet/src/views/browser-view/features/settings/components/Collateral/CollateralDrawer.tsx
@@ -32,7 +32,7 @@ export const CollateralDrawer = ({
   const [isPasswordValid, setIsPasswordValid] = useState<boolean>(true);
   const [currentStep, setCurrentStep] = useState<CollateralStep>('send');
   const isWalletSyncingForTheFirstTime = useSyncingTheFirstTime();
-  const { tx, initializeCollateralTx, submitCollateralTx, isInitializing, isSubmitting, hasEnoughAda } =
+  const { txFee, initializeCollateralTx, submitCollateralTx, isInitializing, isSubmitting, hasEnoughAda } =
     useCollateral();
   const { fiatCurrency } = useCurrencyStore();
 
@@ -59,7 +59,7 @@ export const CollateralDrawer = ({
     }
     return (
       <CollateralStepSend
-        tx={tx}
+        txFee={txFee}
         hasEnoughAda={hasEnoughAda}
         popupView={popupView}
         password={password}

diff --git a/...let/src/views/browser-view/features/settings/components/Collateral/CollateralStepSend.tsx b/...let/src/views/browser-view/features/settings/components/Collateral/CollateralStepSend.tsx
@@ -17,7 +17,7 @@ import { CurrencyInfo } from '@src/types';
 const { Text } = Typography;
 
 interface CollateralStepSendProps {
-  tx: Cardano.TxBodyWithHash;
+  txFee: Cardano.Lovelace;
   popupView?: boolean;
   hasEnoughAda: boolean;
   password: string;
@@ -30,7 +30,7 @@ interface CollateralStepSendProps {
 }
 
 export const CollateralStepSend = ({
-  tx,
+  txFee,
   hasEnoughAda,
   popupView = false,
   password,
@@ -85,7 +85,7 @@ export const CollateralStepSend = ({
             </div>
           )}
         </div>
-        {hasEnoughAda && tx && (
+        {hasEnoughAda && txFee && (
           <RowContainer>
             {renderLabel({
               label: t('staking.confirmation.transactionFee'),
@@ -94,9 +94,9 @@ export const CollateralStepSend = ({
             })}
             <div>
               {renderAmountInfo(
-                `${Wallet.util.lovelacesToAdaString(tx.body.fee.toString())} ${cardanoCoin.symbol}`,
+                `${Wallet.util.lovelacesToAdaString(txFee.toString())} ${cardanoCoin.symbol}`,
                 `${Wallet.util.convertAdaToFiat({
-                  ada: Wallet.util.lovelacesToAdaString(tx.body.fee.toString()),
+                  ada: Wallet.util.lovelacesToAdaString(txFee.toString()),
                   fiat: priceResult?.cardano?.price || 0
                 })} ${fiatCurrency?.code}`
               )}