cleanup

src/hooks/transfers/useTransfers.tsx

@@ -27,6 +27,7 @@ import { getSelectedDydxChainId } from '@/state/appSelectors';
 import { useAppSelector } from '@/state/appTypes';
 
 import { convertBech32Address } from '@/lib/addressUtils';
+import { isNativeDenom } from '@/lib/assetUtils';
 
 import { skipClient } from '../../lib/skip';
 import { useAccounts } from '../useAccounts';
@@ -51,7 +52,6 @@ const chainsQueryFn = async () => {
 };
 
 const assetsQueryFn = async () => {
-  // TODO: sort this! first by native asset, then by lowest fees (so lowest fees is first)
   const assetsByChain = await skipClient.assets({
     includeEvmAssets: true,
     includeSvmAssets: true,
@@ -110,7 +110,13 @@ export const useTransfers = () => {
   );
 
   const assetsForSelectedChain = useMemo(() => {
-    if (selectedChainId) return assetsByChain[selectedChainId] ?? [];
+    if (selectedChainId) {
+      // sort native denoms to the front of list
+      const sortedAssetsForChain = (assetsByChain[selectedChainId] ?? []).sort((a) => {
+        return isNativeDenom(a.denom) ? -1 : 1;
+      });
+      return sortedAssetsForChain;
+    }
     return [];
   }, [selectedChainId, assetsByChain]);
 

src/hooks/useAccountBalance.ts

@@ -41,13 +41,6 @@ type UseAccountBalanceProps = {
   isCosmosChain?: boolean;
 };
 
-/**
- * cosmjs uses this 0x address as the chain's native token.
- * skip does not, but we add this value in order to be able to send payloads to cosmjs
- * @todo We may need to add additional logic here if we 'useAccountBalance' on forms that do not follow this format.
- */
-export const CHAIN_DEFAULT_TOKEN_ADDRESS = '0xEeeeeEeeeEeEeeEeEeEeeEEEeeeeEeeeeeeeEEeE';
-
 export const useAccountBalance = ({
   addressOrDenom,
   chainId,

src/lib/assetUtils.ts

@@ -52,6 +52,12 @@ export const getAssetFromMarketId = (marketId: string): string => {
 };
 
 const SKIP_NATIVE_DENOM_SUFFIX = 'native';
+
+/**
+ * cosmjs uses this 0x address as the chain's native token.
+ * skip does not, but we add this value in order to be able to send payloads to cosmjs
+ * @todo We may need to add additional logic here if we 'useAccountBalance' on forms that do not follow this format.
+ */
 const NATIVE_TOKEN_ADDRESS = '0xEeeeeEeeeEeEeeEeEeEeeEEEeeeeEeeeeeeeEEeE';
 
 export const isNativeDenom = (denom: string | undefined): boolean => {

src/views/forms/AccountManagementForms/DepositForm.tsx

@@ -43,7 +43,7 @@ import {
 import { AppRoute, BASE_ROUTE } from '@/constants/routes';
 import { ConnectorType, type EvmAddress, WalletNetworkType, WalletType } from '@/constants/wallets';
 
-import { CHAIN_DEFAULT_TOKEN_ADDRESS, useAccountBalance } from '@/hooks/useAccountBalance';
+import { useAccountBalance } from '@/hooks/useAccountBalance';
 import { useAccounts } from '@/hooks/useAccounts';
 import { useDebounce } from '@/hooks/useDebounce';
 import { useDydxClient } from '@/hooks/useDydxClient';
@@ -78,6 +78,7 @@ import { track } from '@/lib/analytics/analytics';
 import { dd } from '@/lib/analytics/datadog';
 import { isNativeDenom } from '@/lib/assetUtils';
 import { MustBigNumber } from '@/lib/numbers';
+import { NATIVE_TOKEN_ADDRESS } from '@/lib/skip';
 import { log } from '@/lib/telemetry';
 import { sleep } from '@/lib/timeUtils';
 import { parseWalletError } from '@/lib/wallet';
@@ -176,7 +177,7 @@ export const DepositForm = ({ onDeposit, onError }: DepositFormProps) => {
 
   // Async Data
   const { balance } = useAccountBalance({
-    addressOrDenom: sourceToken?.address || CHAIN_DEFAULT_TOKEN_ADDRESS,
+    addressOrDenom: sourceToken?.address || NATIVE_TOKEN_ADDRESS,
     chainId,
     isCosmosChain: isKeplrWallet,
   });