add transfer insufficient usdc gas warning (#19)

package.json

@@ -39,7 +39,7 @@
     "@cosmjs/tendermint-rpc": "^0.31.0",
     "@dydxprotocol/abacus": "^0.4.1",
     "@dydxprotocol/v4-client-js": "^0.32.0",
-    "@dydxprotocol/v4-localization": "^0.0.21",
+    "@dydxprotocol/v4-localization": "^0.0.25",
     "@ethersproject/providers": "^5.7.2",
     "@js-joda/core": "^5.5.3",
     "@radix-ui/react-collapsible": "^1.0.3",

pnpm-lock.yaml

@@ -29,8 +29,8 @@ dependencies:
     specifier: ^0.32.0
     version: 0.32.0
   '@dydxprotocol/v4-localization':
-    specifier: ^0.0.21
-    version: 0.0.21
+    specifier: ^0.0.25
+    version: 0.0.25
   '@ethersproject/providers':
     specifier: ^5.7.2
     version: 5.7.2
@@ -1186,8 +1186,8 @@ packages:
       - utf-8-validate
     dev: false
 
-  /@dydxprotocol/v4-localization@0.0.21:
-    resolution: {integrity: sha512-HG6JdHSHIq39rSgYNv36DwiJ550POicJGg+3nJNHstKHMO+fnHMdPpDBIjqUx3fXRphF9NxfhdgnmYqj2x++rg==}
+  /@dydxprotocol/v4-localization@0.0.25:
+    resolution: {integrity: sha512-Rp6VHA8z+nwgvTjjB3fvL8gY7bd4DYDHV+NPoL0MFuRm39vhFxGlBVAGDkXPkQTh6YU5BlZV2yXLkDeSfFqEBQ==}
     dev: false
 
   /@emotion/is-prop-valid@1.2.1:

src/hooks/useAccountBalance.ts

@@ -16,6 +16,7 @@ import { getSelectedNetwork } from '@/state/appSelectors';
 
 import { useAccounts } from './useAccounts';
 import { usePollNativeTokenBalance } from './usePollNativeTokenBalance';
+import { usePollUSDCBalance } from './usePollUSDCBalance';
 
 type UseAccountBalanceProps = {
   // Token Items
@@ -96,9 +97,13 @@ export const useAccountBalance = ({
     .div(QUANTUM_MULTIPLIER)
     .toNumber();
 
+  const usdcCoinBalance = usePollUSDCBalance({ dydxAddress });
+  const usdcBalance = MustBigNumber(usdcCoinBalance?.amount).div(QUANTUM_MULTIPLIER).toNumber();
+
   return {
     balance,
     nativeTokenBalance,
+    usdcBalance,
     queryStatus: isCosmosChain ? cosmosQuery.status : evmQuery.status,
     isQueryFetching: isCosmosChain ? cosmosQuery.isFetching : evmQuery.fetchStatus === 'fetching',
   };

src/pages/rewards/DYDXBalancePanel.tsx

@@ -49,7 +49,7 @@ export const DYDXBalancePanel = () => {
                   size={ButtonSize.Small}
                   onClick={() => dispatch(openDialog({ type: DialogTypes.Receive }))}
                 >
-                  {stringGetter({ key: STRING_KEYS.EXCHANGE_RECEIVED })}
+                  {stringGetter({ key: STRING_KEYS.RECEIVE })}
                 </Styled.ReceiveButton>
                 <Button
                   slotLeft={<Icon iconName={IconName.Send} />}

src/views/forms/TransferForm.tsx

@@ -84,7 +84,7 @@ export const TransferForm = ({
   const { dydxAddress } = useAccounts();
   const { address: recipientAddress, size } = useSelector(getTransferInputs, shallowEqual) || {};
   const { transfer, simulateTransfer } = useSubaccount();
-  const { nativeTokenBalance } = useAccountBalance();
+  const { nativeTokenBalance, usdcBalance } = useAccountBalance();
   const { selectedNetwork } = useSelectedNetwork();
 
   // User Input
@@ -104,6 +104,8 @@ export const TransferForm = ({
           .toNumber();
   const amount = asset === DydxChainAsset.USDC ? size?.usdcSize : size?.size;
 
+  const showNotEnoughGasWarning = fees && asset === DydxChainAsset.USDC && usdcBalance < fees;
+
   // BN
   const amountBN = MustBigNumber(amount);
   const balanceBN = MustBigNumber(balance);
@@ -359,6 +361,15 @@ export const TransferForm = ({
         />
       </WithDetailsReceipt>
 
+      {showNotEnoughGasWarning && (
+        <AlertMessage type={AlertType.Warning}>
+          {stringGetter({
+            key: STRING_KEYS.TRANSFER_INSUFFICIENT_GAS,
+            params: { USDC_BALANCE: `(${usdcBalance})` },
+          })}
+        </AlertMessage>
+      )}
+
       {error && <AlertMessage type={AlertType.Error}>{error.message}</AlertMessage>}
 
       <Styled.Footer>