refactor(frontend): cast ft addresses (#233)

frontend/src/features/history/utils/filters.ts

@@ -1,16 +1,14 @@
 import { HexString } from '@gear-js/api';
-import { ActorId, H160 } from 'sails-js';
+
+import { FTAddressPair } from '@/types';
 
 const getLastDaysISOTimestamp = (daysCount: number) =>
   new Date(Date.now() - daysCount * 24 * 60 * 60 * 1000).toISOString();
 
-const getAssetOptions = (addresses: [ActorId, H160, 'ethereum' | 'gear'][], symbols: Record<HexString, string>) => {
+const getAssetOptions = (addresses: FTAddressPair[], symbols: Record<HexString, string>) => {
   const options = [] as { label: string; value: string }[];
 
-  for (const pair of addresses) {
-    const varaAddress = pair[0].toString() as HexString;
-    const ethAddress = pair[1].toString() as HexString;
-
+  for (const [varaAddress, ethAddress] of addresses) {
     const varaSymbol = symbols[varaAddress];
     const ethSymbol = symbols[ethAddress];
 

frontend/src/features/swap/hooks/use-bridge.ts

@@ -1,4 +1,3 @@
-import { HexString } from '@gear-js/api';
 import { useMemo, useState } from 'react';
 
 import { useTokens } from '@/hooks';
@@ -16,7 +15,7 @@ function useBridge(networkIndex: number) {
 
   const [pair, setPair] = useState('0');
   const pairIndex = Number(pair);
-  const address = addresses?.[pairIndex][networkIndex].toString() as HexString | undefined;
+  const address = addresses?.[pairIndex][networkIndex];
   const symbol = address ? symbols?.[address] : undefined;
   const decimals = address ? tokenDecimals?.[address] : undefined;
 

frontend/src/features/swap/utils.ts

@@ -1,8 +1,8 @@
 import { HexString } from '@gear-js/api';
-import { ActorId, H160 } from 'sails-js';
 import { formatUnits, parseUnits } from 'viem';
 import { z } from 'zod';
 
+import { FTAddressPair } from '@/types';
 import { isUndefined } from '@/utils';
 
 import { ERROR_MESSAGE } from './consts';
@@ -42,21 +42,15 @@ const getAmountSchema = (
     );
 };
 
-const getOptions = (
-  addresses: [ActorId, H160, 'ethereum' | 'gear'][] | undefined,
-  symbols: Record<HexString, string> | undefined,
-) => {
+const getOptions = (addresses: FTAddressPair[] | undefined, symbols: Record<HexString, string> | undefined) => {
   const varaOptions: { label: string; value: string }[] = [];
   const ethOptions: { label: string; value: string }[] = [];
 
   if (!addresses || !symbols) return { varaOptions, ethOptions };
 
-  addresses.forEach((pair, index) => {
+  addresses.forEach(([varaAddress, ethAddress], index) => {
     const value = index.toString();
 
-    const varaAddress = pair[0].toString() as HexString;
-    const ethAddress = pair[1].toString() as HexString;
-
     const varaSymbol = symbols[varaAddress];
     const ethSymbol = symbols[ethAddress];
 

frontend/src/features/token-tracker/components/token-tracker-modal/token-tracker-modal.tsx

@@ -1,4 +1,3 @@
-import { HexString } from '@gear-js/api';
 import { getTypedEntries, useAccount } from '@gear-js/react-hooks';
 import { Modal } from '@gear-js/vara-ui';
 import { formatUnits } from 'viem';
@@ -24,9 +23,7 @@ function TokenTrackerModal({ lockedBalance, close }: Props) {
   const { addresses, decimals, symbols } = useTokens();
 
   const networkIndex = account ? 0 : 1;
-  const nonNativeAddresses = addresses?.filter(
-    (pair) => (pair[networkIndex].toString() as HexString) !== WRAPPED_VARA_CONTRACT_ADDRESS,
-  );
+  const nonNativeAddresses = addresses?.filter((pair) => pair[networkIndex] !== WRAPPED_VARA_CONTRACT_ADDRESS);
 
   const { data: varaFtBalances } = useVaraFTBalances(nonNativeAddresses);
   const { data: ethFtBalances } = useEthFTBalances(nonNativeAddresses);

frontend/src/features/token-tracker/hooks/use-eth-ft-balances.ts

@@ -1,20 +1,18 @@
-import { HexString } from '@gear-js/api';
 import { useMemo } from 'react';
-import { ActorId, H160 } from 'sails-js';
 import { useReadContracts } from 'wagmi';
 
 import { FUNGIBLE_TOKEN_ABI } from '@/consts';
-import { TokenSupply } from '@/consts/sails/vft-manager';
 import { useEthAccount } from '@/hooks';
+import { FTAddressPair } from '@/types';
 import { isUndefined } from '@/utils';
 
-function useEthFTBalances(addresses: [ActorId, H160, TokenSupply][] | undefined) {
+function useEthFTBalances(addresses: FTAddressPair[] | undefined) {
   const ethAccount = useEthAccount();
 
   const contracts = useMemo(
     () =>
       addresses?.map(([, address]) => ({
-        address: address.toString() as HexString,
+        address,
         abi: FUNGIBLE_TOKEN_ABI,
         functionName: 'balanceOf',
         args: [ethAccount.address],
@@ -26,7 +24,7 @@ function useEthFTBalances(addresses: [ActorId, H160, TokenSupply][] | undefined)
     if (!addresses) return;
 
     const entries = data.map(({ result }, index) => {
-      const address = addresses[index][1].toString() as HexString;
+      const address = addresses[index][1];
       const balance = isUndefined(result) ? 0n : BigInt(result);
 
       return [address, balance] as const;

frontend/src/features/token-tracker/hooks/use-vara-ft-balances.ts

@@ -1,12 +1,11 @@
 import { HexString } from '@gear-js/api';
 import { useAccount, useApi } from '@gear-js/react-hooks';
 import { useQuery } from '@tanstack/react-query';
-import { ActorId, H160 } from 'sails-js';
 
 import { VftProgram } from '@/consts';
-import { TokenSupply } from '@/consts/sails/vft-manager';
+import { FTAddressPair } from '@/types';
 
-function useVaraFTBalances(addresses: [ActorId, H160, TokenSupply][] | undefined) {
+function useVaraFTBalances(addresses: FTAddressPair[] | undefined) {
   const { api, isApiReady } = useApi();
   const { account } = useAccount();
 
@@ -17,8 +16,7 @@ function useVaraFTBalances(addresses: [ActorId, H160, TokenSupply][] | undefined
 
     const result: Record<HexString, bigint> = {};
 
-    for (const pair of addresses) {
-      const address = pair[0].toString() as HexString;
+    for (const [address] of addresses) {
       const balance = await new VftProgram(api, address).vft.balanceOf(account.decodedAddress);
 
       result[address] = balance;

frontend/src/hooks/tokens/use-ft-addresses.ts

@@ -1,3 +1,4 @@
+import { HexString } from '@gear-js/api';
 import { useProgram, useProgramQuery } from '@gear-js/react-hooks';
 
 import { VftManagerProgram } from '@/consts';
@@ -16,6 +17,9 @@ function useFTAddresses() {
     serviceName: 'vftManager',
     functionName: 'varaToEthAddresses',
     args: [],
+    query: {
+      select: (data) => data.map((pair) => [pair[0].toString(), pair[1].toString()] as [HexString, HexString]),
+    },
   });
 }
 

frontend/src/hooks/tokens/use-ft-decimals.ts

@@ -1,13 +1,13 @@
 import { HexString } from '@gear-js/api';
 import { useApi } from '@gear-js/react-hooks';
 import { useQuery } from '@tanstack/react-query';
-import { ActorId, H160 } from 'sails-js';
 import { useConfig } from 'wagmi';
 import { readContract } from 'wagmi/actions';
 
 import { VftProgram, FUNGIBLE_TOKEN_ABI } from '@/consts';
+import { FTAddressPair } from '@/types';
 
-function useFTDecimals(addresses: [ActorId, H160, 'ethereum' | 'gear'][] | undefined) {
+function useFTDecimals(addresses: FTAddressPair[] | undefined) {
   const { api, isApiReady } = useApi();
   const wagmiConfig = useConfig();
 
@@ -25,10 +25,7 @@ function useFTDecimals(addresses: [ActorId, H160, 'ethereum' | 'gear'][] | undef
 
     const result: Record<HexString, number> = {};
 
-    for (const pair of addresses) {
-      const varaAddress = pair[0].toString() as HexString;
-      const ethAddress = pair[1].toString() as HexString;
-
+    for (const [varaAddress, ethAddress] of addresses) {
       const [varaDecimals, ethDecimals] = await Promise.all([
         readVaraDecimals(varaAddress),
         readEthDecimals(ethAddress),

frontend/src/hooks/tokens/use-ft-symbols.ts

@@ -1,13 +1,13 @@
 import { HexString } from '@gear-js/api';
 import { useApi } from '@gear-js/react-hooks';
 import { useQuery } from '@tanstack/react-query';
-import { ActorId, H160 } from 'sails-js';
 import { useConfig } from 'wagmi';
 import { readContract } from 'wagmi/actions';
 
 import { VftProgram, FUNGIBLE_TOKEN_ABI } from '@/consts';
+import { FTAddressPair } from '@/types';
 
-function useFTSymbols(addresses: [ActorId, H160, 'ethereum' | 'gear'][] | undefined) {
+function useFTSymbols(addresses: FTAddressPair[] | undefined) {
   const { api, isApiReady } = useApi();
   const wagmiConfig = useConfig();
 
@@ -25,10 +25,7 @@ function useFTSymbols(addresses: [ActorId, H160, 'ethereum' | 'gear'][] | undefi
 
     const result: Record<HexString, string> = {};
 
-    for (const pair of addresses) {
-      const varaAddress = pair[0].toString() as HexString;
-      const ethAddress = pair[1].toString() as HexString;
-
+    for (const [varaAddress, ethAddress] of addresses) {
       const [varaSymbol, ethSymbol] = await Promise.all([readVaraSymbol(varaAddress), readEthSymbol(ethAddress)]);
 
       result[varaAddress] = varaSymbol;

frontend/src/types/index.ts

@@ -1,3 +1,4 @@
+import { HexString } from '@gear-js/api';
 import { FunctionComponent, SVGProps } from 'react';
 
 type SVGComponent = FunctionComponent<
@@ -6,4 +7,8 @@ type SVGComponent = FunctionComponent<
   }
 >;
 
-export type { SVGComponent };
+type VaraAddress = HexString;
+type EthAddress = HexString;
+type FTAddressPair = [VaraAddress, EthAddress];
+
+export type { SVGComponent, FTAddressPair };