Gracefully handle network changes in AccountSend

ScopeLift · Apr 7, 2022 · 74bec85 · 74bec85
1 parent 176b9a8
commit 74bec85
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 13 deletions.
diff --git a/frontend/src/pages/AccountSend.vue b/frontend/src/pages/AccountSend.vue
@@ -169,10 +169,10 @@ import useSettingsStore from 'src/store/settings';
 import useWalletStore from 'src/store/wallet';
 // --- Other ---
 import { txNotify } from 'src/utils/alerts';
-import { BigNumber, Contract, getAddress, MaxUint256, parseUnits, Zero } from 'src/utils/ethers';
+import { BigNumber, Contract, getAddress, MaxUint256, parseUnits, formatUnits, Zero } from 'src/utils/ethers';
 import { humanizeTokenAmount, humanizeMinSendAmount, humanizeArithmeticResult } from 'src/utils/utils';
 import { generatePaymentLink, parsePaymentLink } from 'src/utils/payment-links';
-import { Provider, TokenInfo } from 'components/models';
+import { Provider, TokenInfoExtended } from 'components/models';
 import { ERC20_ABI } from 'src/utils/constants';
 
 function useSendForm() {
@@ -200,7 +200,7 @@ function useSendForm() {
   const recipientIdBaseInputRef = ref<Vue>();
   const useNormalPubKey = ref(false);
   const shouldUseNormalPubKey = computed(() => advancedMode.value && useNormalPubKey.value); // only use normal public key if advanced mode is on
-  const token = ref<TokenInfo | null>();
+  const token = ref<TokenInfoExtended | null>();
   const tokenBaseInputRef = ref<Vue>();
   const humanAmount = ref<string>();
   const humanAmountBaseInputRef = ref<Vue>();
@@ -226,10 +226,11 @@ function useSendForm() {
     // message is hidden if the user checks the block after entering an address. We do this by checking if the
     // checkbox toggle was changed, and if so re-validating the form. The rest of this watcher is for handling
     // async validation rules
-    [isLoading, shouldUseNormalPubKey, recipientId, token, humanAmount],
+    [isLoading, shouldUseNormalPubKey, recipientId, token, humanAmount, tokenList],
     async (
-      [isLoadingValue, useNormalPubKey, recipientIdValue, tokenValue, humanAmountValue],
-      [prevIsLoadingValue, prevUseNormalPubKey, prevRecipientIdValue, prevTokenValue, prevHumanAmountValue]
+      [isLoadingValue, useNormalPubKey, recipientIdValue, tokenValue, humanAmountValue,
+        tokenListValue],
+      [prevIsLoadingValue, prevUseNormalPubKey, prevRecipientIdValue, prevTokenValue, prevHumanAmountValue, prevTokenListValue]
     ) => {
       // Fetch toll
       toll.value = <BigNumber>await umbra.value?.umbraContract.toll();
@@ -249,10 +250,17 @@ function useSendForm() {
         await humanAmountInputRef.validate();
       }
 
+      const currentTokens = (tokenListValue as TokenInfoExtended[]).map(tok => tok.address);
+      const prevTokens = (prevTokenListValue as TokenInfoExtended[]).map(tok => tok.address);
+      if (currentTokens.toString() != prevTokens.toString()) {
+        token.value = tokenList.value[0];
+        humanAmount.value = undefined;
+      }
+
       // Reset token and amount if token is not supported on the network
       if (
         tokenList.value.length &&
-        !tokenList.value.some((tokenOption) => tokenOption.symbol === (tokenValue as TokenInfo)?.symbol)
+        !tokenList.value.some((tokenOption) => tokenOption.symbol === (tokenValue as TokenInfoExtended)?.symbol)
       ) {
         token.value = tokenList.value[0];
         humanAmount.value = undefined;

diff --git a/frontend/src/utils/payment-links.ts b/frontend/src/utils/payment-links.ts
@@ -1,5 +1,5 @@
 import { copyToClipboard } from 'quasar';
-import { TokenInfo } from 'components/models';
+import { TokenInfoExtended } from 'components/models';
 import { utils as umbraUtils } from '@umbra/umbra-js';
 import useWalletStore from 'src/store/wallet';
 import { notifyUser } from 'src/utils/alerts';
@@ -17,7 +17,7 @@ function getProvider() {
 /**
  * @notice Returns a list of supported tokens, falling back to the mainnet token list
  */
-async function getTokens(nativeToken: TokenInfo) {
+async function getTokens(nativeToken: TokenInfoExtended) {
   // If we have a valid relayer instance and associated token list, return it
   const { relayer, tokens } = useWalletStore();
   if (relayer.value && tokens.value) return tokens.value;
@@ -44,7 +44,7 @@ export async function generatePaymentLink({
   amount = undefined,
 }: {
   to: string | undefined;
-  token: TokenInfo | undefined;
+  token: TokenInfoExtended | undefined;
   amount: string | undefined;
 }) {
   // Ensure at least one form field was provided
@@ -66,9 +66,9 @@ export async function generatePaymentLink({
 /**
  * @notice Parses a payment link based on the query parameters of the current page
  */
-export async function parsePaymentLink(nativeToken: TokenInfo) {
+export async function parsePaymentLink(nativeToken: TokenInfoExtended) {
   // Setup output object
-  const paymentData: { to: string | null; token: TokenInfo | null; amount: string | null } = {
+  const paymentData: { to: string | null; token: TokenInfoExtended | null; amount: string | null } = {
     to: null,
     token: null,
     amount: null,
@@ -83,7 +83,7 @@ export async function parsePaymentLink(nativeToken: TokenInfo) {
       continue;
     }
 
-    // Otherwise, parse the token symbol into it's TokenInfo object
+    // Otherwise, parse the token symbol into it's TokenInfoExtended object
     const tokens = await getTokens(nativeToken); // get list of supported tokens
     paymentData['token'] = tokens.filter((token) => token.symbol.toLowerCase() === value.toLowerCase())[0];
   }