refactor some types, add queries for withdrawals

src/views/dialogs/DepositDialog2/AmountInput.tsx

@@ -6,7 +6,7 @@ import { formatUnits, parseUnits } from 'viem';
 
 import { STRING_KEYS } from '@/constants/localization';
 import { TOKEN_DECIMALS } from '@/constants/numbers';
-import { ETH_DECIMALS } from '@/constants/tokens';
+import { ETH_DECIMALS, TokenForTransfer } from '@/constants/tokens';
 import { WalletNetworkType } from '@/constants/wallets';
 
 import { useAccounts } from '@/hooks/useAccounts';
@@ -17,13 +17,12 @@ import { Icon, IconName } from '@/components/Icon';
 import { Output, OutputType } from '@/components/Output';
 
 import { useBalance } from './queries';
-import { DepositToken } from './types';
 import { getTokenSymbol, isNativeTokenDenom } from './utils';
 
 export type AmountInputProps = {
   value: string;
   onChange: (newValue: string) => void;
-  token: DepositToken;
+  token: TokenForTransfer;
   onTokenClick: () => void;
 };
 

src/views/dialogs/DepositDialog2/DepositDialog2.tsx

@@ -7,7 +7,7 @@ import { DepositDialog2Props, DialogProps } from '@/constants/dialogs';
 import { CosmosChainId } from '@/constants/graz';
 import { STRING_KEYS } from '@/constants/localization';
 import { SOLANA_MAINNET_ID } from '@/constants/solana';
-import { USDC_ADDRESSES, USDC_DECIMALS } from '@/constants/tokens';
+import { TokenForTransfer, USDC_ADDRESSES, USDC_DECIMALS } from '@/constants/tokens';
 import { WalletNetworkType } from '@/constants/wallets';
 
 import { useAccounts } from '@/hooks/useAccounts';
@@ -20,9 +20,8 @@ import { SourceAccount } from '@/state/wallet';
 
 import { DepositForm } from './DepositForm';
 import { TokenSelect } from './TokenSelect';
-import { DepositToken } from './types';
 
-function getDefaultToken(sourceAccount: SourceAccount): DepositToken {
+function getDefaultToken(sourceAccount: SourceAccount): TokenForTransfer {
   if (!sourceAccount.chain) throw new Error('No user chain detected');
 
   // TODO(deposit2.0): Use user's biggest balance as the default token
@@ -53,7 +52,7 @@ export const DepositDialog2 = ({ setIsOpen }: DialogProps<DepositDialog2Props>)
   const { sourceAccount } = useAccounts();
 
   const [amount, setAmount] = useState('');
-  const [token, setToken] = useState<DepositToken>(getDefaultToken(sourceAccount));
+  const [token, setToken] = useState<TokenForTransfer>(getDefaultToken(sourceAccount));
 
   const { isMobile } = useBreakpoints();
   const stringGetter = useStringGetter();

src/views/dialogs/DepositDialog2/DepositForm.tsx

@@ -4,8 +4,9 @@ import { formatUnits, parseUnits } from 'viem';
 
 import { ButtonAction, ButtonState, ButtonType } from '@/constants/buttons';
 import { STRING_KEYS } from '@/constants/localization';
-import { USDC_DECIMALS } from '@/constants/tokens';
+import { TokenForTransfer, USDC_DECIMALS } from '@/constants/tokens';
 
+import { SkipRouteSpeed } from '@/hooks/transfers/skipClient';
 import { useDebounce } from '@/hooks/useDebounce';
 import { useStringGetter } from '@/hooks/useStringGetter';
 
@@ -14,8 +15,7 @@ import { Output, OutputType } from '@/components/Output';
 
 import { AmountInput } from './AmountInput';
 import { RouteOptions } from './RouteOptions';
-import { useRoutes } from './queries';
-import { DepositSpeed, DepositToken } from './types';
+import { useDepositRoutes } from './queries';
 
 export const DepositForm = ({
   onTokenSelect,
@@ -26,13 +26,13 @@ export const DepositForm = ({
   onTokenSelect: () => void;
   amount: string;
   setAmount: Dispatch<SetStateAction<string>>;
-  token: DepositToken;
+  token: TokenForTransfer;
 }) => {
   const stringGetter = useStringGetter();
-  const [selectedSpeed, setSelectedSpeed] = useState<DepositSpeed>('fast');
+  const [selectedSpeed, setSelectedSpeed] = useState<SkipRouteSpeed>('fast');
 
   const debouncedAmount = useDebounce(amount);
-  const { data: routes, isFetching } = useRoutes(token, debouncedAmount);
+  const { data: routes, isFetching } = useDepositRoutes(token, debouncedAmount);
 
   useEffect(() => {
     if (debouncedAmount && !isFetching && !routes?.fast) setSelectedSpeed('slow');
@@ -64,8 +64,7 @@ export const DepositForm = ({
       {/* TODO(deposit2.0): Show difference between current and new balance here */}
       {selectedRoute && (
         <div tw="flex justify-between text-small">
-          {/* TODO(deposit2.0): localization */}
-          <div tw="text-color-text-0">Available balance</div>
+          <div tw="text-color-text-0">{stringGetter({ key: STRING_KEYS.AVAILABLE_BALANCE })}</div>
           <div>
             +
             <Output

src/views/dialogs/DepositDialog2/RouteOptions.tsx

@@ -5,18 +5,18 @@ import { formatUnits } from 'viem';
 
 import { USD_DECIMALS } from '@/constants/numbers';
 
+import { SkipRouteSpeed } from '@/hooks/transfers/skipClient';
+
 import { LightningIcon, ShieldIcon } from '@/icons';
 
 import { Output, OutputType } from '@/components/Output';
 
-import { DepositSpeed } from './types';
-
 type Props = {
   routes: { slow?: RouteResponse; fast?: RouteResponse };
   isLoading: boolean;
   disabled: boolean;
-  selectedSpeed: DepositSpeed;
-  onSelectSpeed: (route: DepositSpeed) => void;
+  selectedSpeed: SkipRouteSpeed;
+  onSelectSpeed: (route: SkipRouteSpeed) => void;
 };
 
 export const RouteOptions = ({

src/views/dialogs/DepositDialog2/TokenSelect.tsx

@@ -6,13 +6,13 @@ import { parseUnits } from 'viem';
 
 import { CHAIN_INFO } from '@/constants/chains';
 import { TOKEN_DECIMALS, USD_DECIMALS } from '@/constants/numbers';
+import { TokenForTransfer } from '@/constants/tokens';
 
 import { AssetIcon } from '@/components/AssetIcon';
 import { LoadingSpinner } from '@/components/Loading/LoadingSpinner';
 import { Output, OutputType } from '@/components/Output';
 
 import { useBalances } from './queries';
-import { DepositToken } from './types';
 import { getTokenSymbol } from './utils';
 
 export const TokenSelect = ({
@@ -21,8 +21,8 @@ export const TokenSelect = ({
   setToken,
 }: {
   onBack: () => void;
-  token: DepositToken;
-  setToken: Dispatch<SetStateAction<DepositToken>>;
+  token: TokenForTransfer;
+  setToken: Dispatch<SetStateAction<TokenForTransfer>>;
 }) => {
   const { isLoading, data } = useBalances();
 
@@ -50,7 +50,7 @@ export const TokenSelect = ({
     return partition(allBalances, (balance) => parseUnits(balance.amount, balance.decimals!) > 0);
   }, [data]);
 
-  const onTokenClick = (newToken: DepositToken) => () => {
+  const onTokenClick = (newToken: TokenForTransfer) => () => {
     setToken(newToken);
     onBack();
   };

src/views/dialogs/DepositDialog2/queries.ts

@@ -9,16 +9,14 @@ import { DYDX_DEPOSIT_CHAIN, EVM_DEPOSIT_CHAINS } from '@/constants/chains';
 import { CosmosChainId } from '@/constants/graz';
 import { SOLANA_MAINNET_ID } from '@/constants/solana';
 import { timeUnits } from '@/constants/time';
-import { DYDX_CHAIN_USDC_DENOM, USDC_ADDRESSES } from '@/constants/tokens';
+import { DYDX_CHAIN_USDC_DENOM, TokenForTransfer, USDC_ADDRESSES } from '@/constants/tokens';
 import { WalletNetworkType } from '@/constants/wallets';
 
 import { useSkipClient } from '@/hooks/transfers/skipClient';
 import { useAccounts } from '@/hooks/useAccounts';
 
 import { SourceAccount } from '@/state/wallet';
 
-import { DepositToken } from './types';
-
 export function useBalances() {
   const { sourceAccount } = useAccounts();
   const { skipClient } = useSkipClient();
@@ -112,7 +110,11 @@ function networkTypeToBalances(sourceAccount: SourceAccount): BalanceRequest {
   throw new Error('Fetching balances for unknown chain');
 }
 
-async function getSkipRoutes(skipClient: SkipClient, token: DepositToken, amount: string) {
+async function getSkipDepositRoutes(
+  skipClient: SkipClient,
+  token: TokenForTransfer,
+  amount: string
+) {
   const routeOptions: RouteRequest = {
     sourceAssetDenom: token.denom,
     sourceAssetChainID: token.chainId,
@@ -133,12 +135,12 @@ async function getSkipRoutes(skipClient: SkipClient, token: DepositToken, amount
   return { slow, fast: isFastRouteAvailable ? fast : undefined };
 }
 
-export function useRoutes(token: DepositToken, amount: string) {
+export function useDepositRoutes(token: TokenForTransfer, amount: string) {
   const { skipClient } = useSkipClient();
   const rawAmount = amount && parseUnits(amount, token.decimals);
   return useQuery({
     queryKey: ['routes', token.chainId, token.denom, amount],
-    queryFn: () => getSkipRoutes(skipClient, token, amount),
+    queryFn: () => getSkipDepositRoutes(skipClient, token, amount),
     enabled: Boolean(rawAmount && rawAmount > 0),
     staleTime: 1 * timeUnits.minute,
     refetchOnMount: 'always',

src/views/dialogs/WithdrawDialog2/AddressInput.tsx

@@ -3,6 +3,7 @@ import { EventHandler } from 'react';
 import { SyntheticInputEvent } from 'react-number-format/types/types';
 import styled from 'styled-components';
 
+import { CHAIN_INFO } from '@/constants/chains';
 import { STRING_KEYS } from '@/constants/localization';
 import { WalletNetworkType } from '@/constants/wallets';
 
@@ -15,14 +16,14 @@ import { Icon, IconName } from '@/components/Icon';
 type AddressInputProps = {
   value: string;
   onChange: (newValue: string) => void;
-  _destinationChain: string;
+  destinationChain: string;
   onDestinationClicked: () => void;
 };
 
 export const AddressInput = ({
   value,
   onChange,
-  _destinationChain,
+  destinationChain,
   onDestinationClicked,
 }: AddressInputProps) => {
   const stringGetter = useStringGetter();
@@ -50,8 +51,8 @@ export const AddressInput = ({
         onClick={onDestinationClicked}
       >
         <div tw="flex items-center gap-0.5">
-          <AssetIcon tw="h-[2rem] w-[2rem]" symbol="ETH" />
-          <div>Ethereum</div>
+          <AssetIcon tw="h-[2rem] w-[2rem]" logoUrl={CHAIN_INFO[destinationChain]?.icon} />
+          <div>{CHAIN_INFO[destinationChain]?.name}</div>
         </div>
         {sourceAccount.chain !== WalletNetworkType.Solana && (
           <$CaretIcon size="10px" iconName={IconName.Caret} />

src/views/dialogs/WithdrawDialog2/ChainSelect.tsx

@@ -1,8 +1,7 @@
 import { Dispatch, Fragment, SetStateAction } from 'react';
 
-import { mainnet } from 'viem/chains';
-
 import { CHAIN_INFO } from '@/constants/chains';
+import { WITHDRAWABLE_ASSETS } from '@/constants/tokens';
 
 import { AssetIcon } from '@/components/AssetIcon';
 
@@ -23,30 +22,26 @@ export const ChainSelect = ({
   return (
     <div tw="flex flex-col gap-0.5 py-1">
       <div tw="flex flex-col">
-        {[mainnet.id].map((chain) => {
-          const chainId = chain.toString();
-
-          return (
-            <Fragment key={chainId}>
-              <button
-                onClick={onChainClick(chainId)}
-                type="button"
-                style={{
-                  backgroundColor: chainId === selectedChain ? 'var(--color-layer-4)' : undefined,
-                }}
-                tw="flex w-full justify-between px-1.25 py-1 hover:bg-color-layer-4"
-                key={chainId}
-              >
-                <div tw="flex items-center gap-0.75">
-                  <AssetIcon tw="h-[2rem] w-[2rem]" symbol="ETH" />
-                  <div tw="flex flex-col items-start gap-0.125">
-                    <div tw="text-medium font-medium">{CHAIN_INFO[chainId]?.name}</div>
-                  </div>
+        {Object.values(WITHDRAWABLE_ASSETS).map(({ chainId }) => (
+          <Fragment key={chainId}>
+            <button
+              onClick={onChainClick(chainId)}
+              type="button"
+              style={{
+                backgroundColor: chainId === selectedChain ? 'var(--color-layer-4)' : undefined,
+              }}
+              tw="flex w-full justify-between px-1.25 py-1 hover:bg-color-layer-4"
+              key={chainId}
+            >
+              <div tw="flex items-center gap-0.75">
+                <AssetIcon tw="h-[2rem] w-[2rem]" logoUrl={CHAIN_INFO[chainId]?.icon} />
+                <div tw="flex flex-col items-start gap-0.125">
+                  <div tw="text-medium font-medium">{CHAIN_INFO[chainId]?.name}</div>
                 </div>
-              </button>
-            </Fragment>
-          );
-        })}
+              </div>
+            </button>
+          </Fragment>
+        ))}
       </div>
     </div>
   );

src/views/dialogs/WithdrawDialog2/WithdrawDialog2.tsx

@@ -1,10 +1,14 @@
 import { useRef, useState } from 'react';
 
 import styled from 'styled-components';
+import { mainnet } from 'viem/chains';
 
 import { DepositDialog2Props, DialogProps } from '@/constants/dialogs';
+import { CosmosChainId } from '@/constants/graz';
 import { STRING_KEYS } from '@/constants/localization';
+import { WalletNetworkType } from '@/constants/wallets';
 
+import { useAccounts } from '@/hooks/useAccounts';
 import { useBreakpoints } from '@/hooks/useBreakpoints';
 import { useStringGetter } from '@/hooks/useStringGetter';
 
@@ -14,8 +18,12 @@ import { ChainSelect } from './ChainSelect';
 import { WithdrawForm } from './WithdrawForm';
 
 export const WithdrawDialog2 = ({ setIsOpen }: DialogProps<DepositDialog2Props>) => {
-  const [destinationAddress, setDestinationAddress] = useState('');
-  const [destinationChain, setDestinationChain] = useState('');
+  const { sourceAccount } = useAccounts();
+  const [destinationAddress, setDestinationAddress] = useState(sourceAccount.address ?? '');
+  const [destinationChain, setDestinationChain] = useState(
+    sourceAccount.chain === WalletNetworkType.Evm ? mainnet.id.toString() : CosmosChainId.Noble
+  );
+
   const [amount, setAmount] = useState('');
 
   const { isMobile } = useBreakpoints();