feat: gho bridging to ink (#2667)

Author: grothem

src/components/transactions/Bridge/BridgeConfig.ts

@@ -20,7 +20,7 @@ import { ENABLE_TESTNET } from 'src/utils/marketsAndNetworksConfig';
 export const bridgeGasLimit = '252000';
 
 type Config = {
-  sourceChainId: ChainId;
+  sourceChainId: ChainId | number;
   router: string;
   chainSelector: string;
   subgraphUrl: string;
@@ -201,6 +201,28 @@ const prodConfig: Config[] = [
       },
     ],
   },
+  {
+    sourceChainId: 57073,
+    chainSelector: '3461204551265785888',
+    burnMintTokenPool: '0xDe6539018B095353A40753Dc54C91C68c9487D4E',
+    router: '0xca7c90A52B44E301AC01Cb5EB99b2fD99339433A',
+    tokenOracle: '0x20fd5f3FCac8883a3A0A2bBcD658A2d2c6EFa6B6',
+    wrappedNativeOracle: '0xA17887fd35B14A4c6e6ec87458591941934d444c',
+    subgraphUrl: `https://gateway.thegraph.com/api/${process.env.NEXT_PUBLIC_SUBGRAPH_API_KEY}/subgraphs/id/CZxebNCRkL9RHpFcQcDnRdQMB4yBM8PFgz5NKEHKtrw6`,
+    feeTokens: [
+      {
+        name: 'Ethereum',
+        symbol: 'ETH',
+        decimals: 18,
+        address: constants.AddressZero, // Use zero address for network token ccip
+        chainId: 57073,
+        extensions: {
+          isNative: true,
+        },
+        balance: '0',
+      },
+    ],
+  },
 ];
 
 const testnetConfig: Config[] = [

src/components/transactions/Bridge/BridgeModalContent.tsx

@@ -1,3 +1,4 @@
+import { AaveV3InkWhitelabel } from '@bgd-labs/aave-address-book';
 import { SwitchVerticalIcon } from '@heroicons/react/outline';
 import { Trans } from '@lingui/macro';
 import {
@@ -24,7 +25,7 @@ import {
 } from 'src/components/transactions/FlowCommons/TxModalDetails';
 import { NetworkSelect } from 'src/components/transactions/NetworkSelect';
 import { ConnectWalletButton } from 'src/components/WalletConnection/ConnectWalletButton';
-import { useBridgeTokens } from 'src/hooks/bridge/useBridgeWalletBalance';
+import { useBridgeTokens, UseBridgeTokensParams } from 'src/hooks/bridge/useBridgeWalletBalance';
 import { TokenInfoWithBalance, useTokensBalance } from 'src/hooks/generic/useTokensBalance';
 import { useModalContext } from 'src/hooks/useModal';
 import { useWeb3Context } from 'src/libs/hooks/useWeb3Context';
@@ -53,7 +54,34 @@ import { useGetBridgeMessage } from './useGetBridgeMessage';
 import { useTimeToDestination } from './useGetFinalityTime';
 
 const defaultNetwork = supportedNetworksWithBridge[0];
-const defaultNetworkMarket = marketsData[defaultNetwork.chainId];
+
+function getUseBridgeTokensParams(chainId: number): UseBridgeTokensParams {
+  const tokenOracle = getConfigFor(chainId).tokenOracle;
+
+  if (chainId === 57073) {
+    // no market config available yet for ink, so values are set here
+    return {
+      chainId,
+      ghoTokenAddress: '0xfc421aD3C883Bf9E7C4f42dE845C4e4405799e73',
+      tokenOracle,
+      walletBalanceProviderAddress: AaveV3InkWhitelabel.WALLET_BALANCE_PROVIDER,
+    };
+  }
+
+  const market = Object.values(marketsData).filter(
+    (md) => md.chainId === chainId && md.v3 === true && md.addresses.GHO_TOKEN_ADDRESS
+  )[0];
+  if (!market || !market.addresses.GHO_TOKEN_ADDRESS) {
+    throw new Error('Market not found');
+  }
+
+  return {
+    chainId,
+    ghoTokenAddress: market.addresses.GHO_TOKEN_ADDRESS,
+    tokenOracle: getConfigFor(chainId).tokenOracle,
+    walletBalanceProviderAddress: market.addresses.WALLET_BALANCE_PROVIDER,
+  };
+}
 
 export const BridgeModalContent = () => {
   const { mainTxState: bridgeTxState, txError, close, gasLimit } = useModalContext();
@@ -121,19 +149,8 @@ export const BridgeModalContent = () => {
     setMaxSelected(false);
   }, [sourceNetworkObj]);
 
-  // Find v3 market for briding as all markets are on v3
-  const findMarketData = (chainId: number) => {
-    const allMarkets = Object.values(marketsData).filter((elem) => elem.chainId === chainId);
-    const v3Market = allMarkets.find((market) => market.v3 === true);
-    return v3Market || allMarkets[0] || defaultNetworkMarket;
-  };
-
-  const selectedMarketData = findMarketData(sourceNetworkObj.chainId);
-
-  const { data: sourceTokenInfo, isFetching: fetchingBridgeTokenBalance } = useBridgeTokens(
-    selectedMarketData,
-    getConfigFor(sourceNetworkObj.chainId).tokenOracle
-  );
+  const params = getUseBridgeTokensParams(sourceNetworkObj.chainId);
+  const { data: sourceTokenInfo, isFetching: fetchingBridgeTokenBalance } = useBridgeTokens(params);
 
   const isWrongNetwork = currentChainId !== sourceNetworkObj.chainId;
 
@@ -306,6 +323,9 @@ export const BridgeModalContent = () => {
     </TextWithTooltip>
   );
 
+  // There's no market config available for ink yet, so skip showing gas station since it relies on having a market
+  const showGasStation = sourceNetworkObj.chainId !== 57073;
+
   return (
     <>
       <Box display="flex" justifyContent="space-between" alignItems="center">
@@ -419,7 +439,11 @@ export const BridgeModalContent = () => {
               sourceChainId={sourceNetworkObj.chainId}
             />
           </Box>
-          <TxModalDetails gasLimit={gasLimit} chainId={sourceNetworkObj.chainId}>
+          <TxModalDetails
+            gasLimit={gasLimit}
+            chainId={sourceNetworkObj.chainId}
+            showGasStation={showGasStation}
+          >
             <BridgeAmount
               amount={amount}
               maxAmountToBridgeFormatted={maxAmountToBridgeFormatted}

src/hooks/bridge/useBridgeWalletBalance.tsx

@@ -1,18 +1,29 @@
 import { useQuery } from '@tanstack/react-query';
 import { BigNumber, Contract } from 'ethers';
 import { useRootStore } from 'src/store/root';
-import { MarketDataType } from 'src/ui-config/marketsConfig';
 import { POLLING_INTERVAL, queryKeysFactory } from 'src/ui-config/queries';
 import { useSharedDependencies } from 'src/ui-config/SharedDependenciesProvider';
 import { getProvider } from 'src/utils/marketsAndNetworksConfig';
 
-export const useBridgeTokens = (currentMarketData: MarketDataType, tokenOracle: string) => {
+export interface UseBridgeTokensParams {
+  chainId: number;
+  ghoTokenAddress: string;
+  tokenOracle: string;
+  walletBalanceProviderAddress: string;
+}
+
+export const useBridgeTokens = ({
+  chainId,
+  ghoTokenAddress,
+  tokenOracle,
+  walletBalanceProviderAddress,
+}: UseBridgeTokensParams) => {
   const { poolTokensBalanceService } = useSharedDependencies();
   const user = useRootStore((store) => store.account);
 
   return useQuery({
     queryFn: async () => {
-      const provider = getProvider(currentMarketData.chainId);
+      const provider = getProvider(chainId);
       const oracle = new Contract(
         tokenOracle,
         [
@@ -28,7 +39,9 @@ export const useBridgeTokens = (currentMarketData: MarketDataType, tokenOracle:
       ]);
 
       const balances = await poolTokensBalanceService.getGhoBridgeBalancesTokenBalances(
-        currentMarketData,
+        chainId,
+        ghoTokenAddress,
+        walletBalanceProviderAddress,
         user
       );
 
@@ -37,14 +50,14 @@ export const useBridgeTokens = (currentMarketData: MarketDataType, tokenOracle:
         tokenPriceUSD: latestAnswer.toNumber() / BigNumber.from(10).pow(decimals).toNumber(),
       };
     },
-    queryKey: queryKeysFactory.getGhoBridgeBalances(user, currentMarketData),
+    queryKey: queryKeysFactory.getGhoBridgeBalances(user, chainId),
     enabled: !!user,
     refetchInterval: POLLING_INTERVAL,
     initialData: {
       bridgeTokenBalance: '0',
       bridgeTokenBalanceFormatted: '0',
       tokenPriceUSD: 1,
-      address: currentMarketData.addresses.GHO_TOKEN_ADDRESS,
+      address: ghoTokenAddress,
     },
   });
 };

src/hooks/useBridgeTransactionHistory.tsx

@@ -61,13 +61,20 @@ const sendRequestsQuery = gql`
 `;
 
 const getSendRequests = async (url: string, sender: string) => {
-  const result = await request<{ ccipsendRequests: SubgraphBridgeTransaction[] }>(
+  let result: { ccipsendRequests: SubgraphBridgeTransaction[] } = { ccipsendRequests: [] };
+  try {
+   result = await request<{ ccipsendRequests: SubgraphBridgeTransaction[] }>(
     url,
     sendRequestsQuery,
     {
       sender,
-    }
-  );
+      }
+    );
+  } catch (e) {
+    console.error(e);
+    // silently fail so other network txs are still shown
+    return [];
+  }
 
   return result.ccipsendRequests
     .map((tx) => {

src/services/WalletBalanceService.ts

@@ -79,27 +79,29 @@ export class WalletBalanceService {
   }
 
   async getGhoBridgeBalancesTokenBalances(
-    marketData: MarketDataType,
+    chainId: number,
+    ghoTokenAddress: string,
+    walletBalanceProviderAddress: string,
     user: string
   ): Promise<{
     bridgeTokenBalance: string;
     bridgeTokenBalanceFormatted: string;
     address: string;
   }> {
     const walletBalanceService = this.getWalletBalanceService(
-      marketData.chainId,
-      marketData.addresses.WALLET_BALANCE_PROVIDER
+      chainId,
+      walletBalanceProviderAddress
     );
 
     const balances = await walletBalanceService.batchBalanceOf(
       [user],
-      [marketData.addresses.GHO_TOKEN_ADDRESS?.toLowerCase() as string] // GHO UNDERLYING
+      [ghoTokenAddress?.toLowerCase() as string] // GHO UNDERLYING
     );
 
     return {
       bridgeTokenBalance: balances[0].toString(),
       bridgeTokenBalanceFormatted: formatUnits(balances[0].toString(), 18),
-      address: marketData.addresses.GHO_TOKEN_ADDRESS as string,
+      address: ghoTokenAddress,
     };
   }
 }

src/ui-config/queries.ts

@@ -163,10 +163,10 @@ export const queryKeysFactory = {
     chainId,
     'tokenDelegatees',
   ],
-  getGhoBridgeBalances: (user: string, marketData: MarketDataType) => [
+  getGhoBridgeBalances: (user: string, chainId: number) => [
     ...queryKeysFactory.gho,
     ...queryKeysFactory.user(user),
-    ...queryKeysFactory.market(marketData),
+    chainId,
     'getGhoBridgeBalances',
   ],
   migrationExceptions: (