feat: qol clear fields after tx submit

dove-protocol · Nov 22, 2022 · e20b380 · e20b380
1 parent 5e37682
commit e20b380
Show file tree

Hide file tree

Showing 6 changed files with 96 additions and 54 deletions.
diff --git a/components/DammTabContent.tsx b/components/DammTabContent.tsx
@@ -48,8 +48,13 @@ const DammTabContent = () => {
   const { callback: toastCallback } = useTriggerToast();
 
   // load up state
-  const [fields, onUserInput, independentField] = useProvideStore(
-    (state) => [state.fields, state.onUserInput, state.independentField],
+  const [fields, onUserInput, independentField, clearFields] = useProvideStore(
+    (state) => [
+      state.fields,
+      state.onUserInput,
+      state.independentField,
+      state.clearFields,
+    ],
     shallow
   );
 
@@ -92,9 +97,7 @@ const DammTabContent = () => {
   const handleProvideLiquidity = () => {
     callback?.()
       .then((tx) => {
-        tx &&
-          parsedAmounts[Field.CURRENCY_A] &&
-          parsedAmounts[Field.CURRENCY_B];
+        parsedAmounts[Field.CURRENCY_A] && parsedAmounts[Field.CURRENCY_B];
         toastCallback?.({
           title: "Liquidity Added",
           description: `${formatTransactionAmount(
@@ -107,6 +110,7 @@ const DammTabContent = () => {
           txid: tx.hash,
           type: "success",
         });
+        clearFields();
       })
       .catch((e) => {
         toastCallback?.({
@@ -120,8 +124,7 @@ const DammTabContent = () => {
   const handleApproveA = () => {
     approveCallbackA?.()
       .then((tx) => {
-        tx &&
-          parsedAmounts[Field.CURRENCY_A] &&
+        parsedAmounts[Field.CURRENCY_A] &&
           toastCallback?.({
             title: "Token Approved",
             description: `${formatTransactionAmount(
@@ -143,8 +146,7 @@ const DammTabContent = () => {
   const handleApproveB = () => {
     approveCallbackB?.()
       .then((tx) => {
-        tx &&
-          parsedAmounts[Field.CURRENCY_B] &&
+        parsedAmounts[Field.CURRENCY_B] &&
           toastCallback?.({
             title: "Token Approved",
             description: `${formatTransactionAmount(
@@ -173,10 +175,11 @@ const DammTabContent = () => {
 
   //////////////////////////////////////////////////////////
 
-  const [withdrawFields, onUserInputWithdraw] = useWithdrawStore(
-    (state) => [state.fields, state.onUserInput],
-    shallow
-  );
+  const [withdrawFields, onUserInputWithdraw, clearWithdrawFields] =
+    useWithdrawStore(
+      (state) => [state.fields, state.onUserInput, state.clearFields],
+      shallow
+    );
 
   const {
     parsedAmounts: withdrawAmounts,
@@ -195,8 +198,7 @@ const DammTabContent = () => {
   const handleWithdraw = () => {
     withdrawCallback?.()
       .then((tx) => {
-        tx &&
-          withdrawAmounts[Field.CURRENCY_A] &&
+        withdrawAmounts[Field.CURRENCY_A] &&
           toastCallback?.({
             title: "Liquidity Removed",
             description: `${formatTransactionAmount(
@@ -205,6 +207,7 @@ const DammTabContent = () => {
             txid: tx.hash,
             type: "success",
           });
+        clearWithdrawFields();
       })
       .catch((e) => {
         toastCallback?.({
@@ -231,8 +234,8 @@ const DammTabContent = () => {
     currencyBalances: mintBalance,
   } = useDerivedMintInfo();
 
-  const [mintFields, onUserInputMint] = useMintStore(
-    (state) => [state.fields, state.onUserInput],
+  const [mintFields, onUserInputMint, clearMintField] = useMintStore(
+    (state) => [state.fields, state.onUserInput, state.clearField],
     shallow
   );
 
@@ -251,15 +254,15 @@ const DammTabContent = () => {
   const handleMintA = () => {
     mintCallbackA?.()
       .then((tx) => {
-        tx &&
-          toastCallback?.({
-            title: "Minted",
-            description: `${formatTransactionAmount(
-              currencyAmountToPreciseFloat(mintAmounts[Field.CURRENCY_A])
-            )} ${mintCurrency[Field.CURRENCY_A]?.symbol}`,
-            txid: tx.hash,
-            type: "success",
-          });
+        toastCallback?.({
+          title: "Minted",
+          description: `${formatTransactionAmount(
+            currencyAmountToPreciseFloat(mintAmounts[Field.CURRENCY_A])
+          )} ${mintCurrency[Field.CURRENCY_A]?.symbol}`,
+          txid: tx.hash,
+          type: "success",
+        });
+        clearMintField(Field.CURRENCY_A);
       })
       .catch((e) => {
         toastCallback?.({
@@ -282,6 +285,7 @@ const DammTabContent = () => {
             txid: tx.hash,
             type: "success",
           });
+        clearMintField(Field.CURRENCY_B);
       })
       .catch((e) => {
         toastCallback?.({

diff --git a/components/SwapTabContent.tsx b/components/SwapTabContent.tsx
@@ -59,15 +59,17 @@ const SwapTabContent = () => {
 
   const { callback: toastCallback } = useTriggerToast();
 
-  const [swapCurrencies, fields, onUserInput, independentField] = useSwapStore(
-    (state) => [
-      state.swapCurrencies,
-      state.fields,
-      state.onUserInput,
-      state.independentField,
-    ],
-    shallow
-  );
+  const [swapCurrencies, fields, onUserInput, independentField, clearFields] =
+    useSwapStore(
+      (state) => [
+        state.swapCurrencies,
+        state.fields,
+        state.onUserInput,
+        state.independentField,
+        state.clearFields,
+      ],
+      shallow
+    );
 
   const dependentField =
     independentField === Field.CURRENCY_A ? Field.CURRENCY_B : Field.CURRENCY_A;
@@ -109,7 +111,7 @@ const SwapTabContent = () => {
   const handleApprove = () => {
     approveCallback?.()
       .then((tx) => {
-        if (!parsedAmounts[Field.CURRENCY_A] || !tx) return;
+        if (!parsedAmounts[Field.CURRENCY_A]) return;
         toastCallback?.({
           title: "Approved",
           description: `${formatCurrencyAmount(
@@ -132,20 +134,19 @@ const SwapTabContent = () => {
   const handleSwap = () => {
     swapCallback?.()
       .then((tx) => {
-        tx &&
-          toastCallback?.({
-            title: "Swap",
-            description: `${formatCurrencyAmount(
-              parsedAmounts[Field.CURRENCY_A],
-              6
-            )} ${
-              currencies[Field.CURRENCY_A]?.symbol
-            } for ${formatCurrencyAmount(parsedAmounts[Field.CURRENCY_B], 6)} ${
-              currencies[Field.CURRENCY_B]?.symbol
-            }`,
-            txid: tx.hash,
-            type: "success",
-          });
+        toastCallback?.({
+          title: "Swap",
+          description: `${formatCurrencyAmount(
+            parsedAmounts[Field.CURRENCY_A],
+            6
+          )} ${currencies[Field.CURRENCY_A]?.symbol} for ${formatCurrencyAmount(
+            parsedAmounts[Field.CURRENCY_B],
+            6
+          )} ${currencies[Field.CURRENCY_B]?.symbol}`,
+          txid: tx.hash,
+          type: "success",
+        });
+        clearFields();
       })
       .catch((e) => {
         toastCallback?.({
@@ -162,8 +163,8 @@ const SwapTabContent = () => {
 
   /////////////////////////////
 
-  const [mintFields, onUserInputMint] = useMintStore(
-    (state) => [state.fields, state.onUserInput],
+  const [mintFields, onUserInputMint, clearMintField] = useMintStore(
+    (state) => [state.fields, state.onUserInput, state.clearField],
     shallow
   );
 
@@ -199,6 +200,7 @@ const SwapTabContent = () => {
           txid: tx.hash,
           type: "success",
         });
+        clearMintField(Field.CURRENCY_A);
       })
       .catch((e) => {
         toastCallback?.({
@@ -223,6 +225,7 @@ const SwapTabContent = () => {
           txid: txid.hash,
           type: "success",
         });
+        clearMintField(Field.CURRENCY_B);
       })
       .catch((e) => {
         toastCallback?.({
@@ -243,8 +246,8 @@ const SwapTabContent = () => {
 
   /////////////////////////////
 
-  const [burnFields, onUserInputBurn] = useBurnStore(
-    (state) => [state.fields, state.onUserInput],
+  const [burnFields, onUserInputBurn, clearBurnFields] = useBurnStore(
+    (state) => [state.fields, state.onUserInput, state.clearFields],
     shallow
   );
 
@@ -353,6 +356,7 @@ const SwapTabContent = () => {
           txid: tx.hash,
           type: "success",
         });
+        clearBurnFields();
       })
       .catch((e) => {
         toastCallback?.({

diff --git a/state/burn/useBurnStore.ts b/state/burn/useBurnStore.ts
@@ -20,6 +20,7 @@ interface BurnStoreState {
   fields: { [field in Field]: string };
   onUserInput: (field: Field, value: string) => void;
   onSwitchTokens: () => void;
+  clearFields: () => void;
 }
 
 export const useBurnStore = create<BurnStoreState>((set, get) => ({
@@ -41,4 +42,12 @@ export const useBurnStore = create<BurnStoreState>((set, get) => ({
     );
   },
   onSwitchTokens: () => {},
+  clearFields: () => {
+    set(
+      produce((draft) => {
+        draft.fields[Field.CURRENCY_A] = "";
+        draft.fields[Field.CURRENCY_B] = "";
+      })
+    );
+  },
 }));
diff --git a/state/mint/useMintStore.ts b/state/mint/useMintStore.ts
@@ -20,6 +20,7 @@ interface MintStoreState {
   fields: { [field in Field]: string };
   onUserInput: (field: Field, value: string) => void;
   onSwitchTokens: () => void;
+  clearField: (field: Field) => void;
 }
 
 export const useMintStore = create<MintStoreState>((set, get) => ({
@@ -41,4 +42,11 @@ export const useMintStore = create<MintStoreState>((set, get) => ({
     );
   },
   onSwitchTokens: () => {},
+  clearField: (field) => {
+    set(
+      produce((draft) => {
+        draft.fields[field] = "";
+      })
+    );
+  },
 }));
diff --git a/state/provide/useProvideStore.ts b/state/provide/useProvideStore.ts
@@ -22,6 +22,7 @@ interface ProvideStoreState {
   onUserInput: (field: Field, value: string) => void;
   onSwitchTokens: () => void;
   independentField: Field;
+  clearFields: () => void;
 }
 
 export const useProvideStore = create<ProvideStoreState>(
@@ -47,6 +48,14 @@ export const useProvideStore = create<ProvideStoreState>(
       },
       onSwitchTokens: () => {},
       independentField: Field.CURRENCY_A,
+      clearFields: () => {
+        set(
+          produce((draft) => {
+            draft.fields[Field.CURRENCY_A] = "";
+            draft.fields[Field.CURRENCY_B] = "";
+          })
+        );
+      },
     }),
     {
       name: "ProvideStore",

diff --git a/state/withdraw/useWithdrawStore.ts b/state/withdraw/useWithdrawStore.ts
@@ -19,6 +19,7 @@ interface WithdrawStoreState {
   fields: { [field in Field]: string };
   onUserInput: (field: Field, value: string) => void;
   onSwitchTokens: () => void;
+  clearFields: () => void;
 }
 
 export const useWithdrawStore = create<WithdrawStoreState>((set, get) => ({
@@ -39,4 +40,11 @@ export const useWithdrawStore = create<WithdrawStoreState>((set, get) => ({
     );
   },
   onSwitchTokens: () => {},
+  clearFields: () => {
+    set(
+      produce((draft) => {
+        draft.fields[Field.CURRENCY_A] = "";
+      })
+    );
+  },
 }));