feat: network switch within action response

next.config.js

@@ -3,6 +3,7 @@ const nextConfig = {
   reactStrictMode: true,
   env: {
     NEXT_PUBLIC_ENV_TAG: process.env.NEXT_PUBLIC_ENV_TAG,
+    ARBITRUM_FORK_URL: process.env.ARBITRUM_FORK_URL,
     NEXT_PUBLIC_TENDERLY_FORK_ID: process.env.NEXT_PUBLIC_TENDERLY_FORK_ID,
   },
   images: {

package.json

@@ -21,6 +21,7 @@
     "test-storybook": "test-storybook"
   },
   "dependencies": {
+    "@arbitrum/sdk": "^3.1.6",
     "@center-inc/react": "^1.1.13",
     "@headlessui/react": "^1.7.15",
     "@heroicons/react": "^2.0.14",

src/components/cactiComponents/ActionResponse.tsx

@@ -5,9 +5,9 @@ import { AddressZero } from '@ethersproject/constants';
 import { CheckCircleIcon, ExclamationTriangleIcon } from '@heroicons/react/24/outline';
 import { ConnectButton } from '@rainbow-me/rainbowkit';
 import { BigNumber, UnsignedTransaction } from 'ethers';
-import { formatUnits } from 'ethers/lib/utils.js';
+import { formatEther, formatUnits } from 'ethers/lib/utils.js';
 import tw from 'tailwind-styled-components';
-import { useAccount } from 'wagmi';
+import { useAccount, useNetwork, useSwitchNetwork } from 'wagmi';
 import useToken from '@/hooks/useToken';
 import { cleanValue } from '@/utils';
 import { ActionStepper } from './ActionStepper';
@@ -60,6 +60,7 @@ export type ActionResponseProps = {
   stepper?: boolean;
   onSuccess?: (receipt?: TransactionReceipt) => void;
   onError?: (receipt?: TransactionReceipt) => void;
+  chainId?: number;
 };
 
 /**
@@ -77,8 +78,13 @@ export const ActionResponse = ({
   skipBalanceCheck,
   onSuccess,
   onError,
+  chainId = 1,
 }: ActionResponseProps) => {
   const { address } = useAccount();
+  const { chain } = useNetwork();
+  const { chains, switchNetworkAsync } = useSwitchNetwork();
+  const wrongChain = !!chainId && chain?.id !== chainId;
+
   const _approvalParams = useMemo<ApprovalBasicParams>(
     () =>
       approvalParams || {
@@ -138,17 +144,17 @@ export const ActionResponse = ({
 
     // explicitly showing approvalParams === undefined for clarity - as oppposed to !approvalParams
     if (_approvalParams === undefined) return setHasEnoughBalance(true);
-    if (sendParams?.value! >= ethBal!) {
+    if (BigNumber.from(sendParams?.value || '0').gt(BigNumber.from(ethBal || '0')))
       return setHasEnoughBalance(false);
-    }
 
     // check approval token balance
-    if (balance && _approvalParams?.approvalAmount)
+    if (balance && _approvalParams?.approvalAmount) {
       setHasEnoughBalance(balance.gte(_approvalParams.approvalAmount));
+    }
   }, [_approvalParams, balance, ethBal, sendParams?.value, skipBalanceCheck]);
 
   /**
-   * BUTTON FLOW:
+   * BUTTON FLOW for approvals and transactions:
    * Update all the local states on tx/approval status changes.
    **/
   useEffect(() => {
@@ -251,8 +257,26 @@ export const ActionResponse = ({
     submitTx,
     token?.symbol,
     disabled,
+    wrongChain,
+    chains,
+    switchNetworkAsync,
+    chainId,
   ]);
 
+  // handle chain changes if on the wrong chain
+  useEffect(() => {
+    if (!wrongChain) return;
+
+    const correctChainName = chains.find((c) => c.id === chainId)?.name;
+    setButtonLabel(
+      correctChainName && switchNetworkAsync ? `Switch to ${correctChainName}` : `Unsupported Chain`
+    );
+    return (
+      switchNetworkAsync &&
+      setAction({ name: 'switch', fn: async () => await switchNetworkAsync(chainId) })
+    );
+  }, [chainId, chains, state, switchNetworkAsync, wrongChain]);
+
   /* Set the styling based on the state (Note: always diasbled if 'disabled' from props) */
   const extraStyle = stylingByState[disabled ? ActionResponseState.DISABLED : state];
 

src/components/current/MessageTranslator.tsx

@@ -5,6 +5,8 @@ import { parseMessage } from '@/utils/parse-message';
 import { ErrorResponse, TextResponse } from '../cactiComponents';
 import { ImageVariant } from '../cactiComponents/ImageResponse';
 import { TableResponse } from '../cactiComponents/TableResponse';
+import ArbitrumDeposit from '../experimental_/widgets/arbitrum/ArbitrumDeposit';
+import ArbitrumWithdraw from '../experimental_/widgets/arbitrum/ArbitrumWithdraw';
 import { Widgetize } from '../legacy/legacyComponents/MessageTranslator';
 import Avatar from '../shared/Avatar';
 import { FeedbackButton } from './FeedbackButton';
@@ -230,7 +232,6 @@ export const Widget = (props: WidgetProps) => {
       assetsToShow={6}
     />
   );
-
   widgets.set(
     'yield-protocol-lend',
     <YieldProtocolLend
@@ -283,23 +284,20 @@ export const Widget = (props: WidgetProps) => {
     'zksync-deposit',
     <ZKSyncDeposit tokenSymbol={parsedArgs[0]} userAmount={parsedArgs[1]} />
   );
-
   widgets.set(
     'zksync-withdraw',
     <ZKSyncWithdraw tokenSymbol={parsedArgs[0]} userAmount={parsedArgs[1]} />
   );
-  widgets.set('stake-sfrxeth', <StakeSfrxEth receiver={parsedArgs[0]} value={parsedArgs[1]} />);
   widgets.set(
     'liquity-borrow',
     <LiquityBorrow borrowAmount={parsedArgs[0]} collateralAmount={parsedArgs[1]} />
   );
   widgets.set('liquity-close', <LiquityClose />);
-
   widgets.set('deposit-eth-lido', <LidoDeposit inputString={parsedArgs} />);
   widgets.set('withdraw-eth-lido', <LidoWithdraw inputString={parsedArgs} />);
-
   widgets.set('deposit-eth-reth', <RethDeposit inputString={parsedArgs} />);
   widgets.set('withdraw-eth-reth', <RethWithdraw inputString={parsedArgs} />);
+  widgets.set('stake-sfrxeth', <StakeSfrxEth receiver={parsedArgs[0]} value={parsedArgs[1]} />);
 
   widgets.set('savings-dai-deposit', <DepositDSR depositAmount={parsedArgs[0]} />);
 
@@ -325,6 +323,15 @@ export const Widget = (props: WidgetProps) => {
     />
   );
 
+  widgets.set(
+    'arbitrum-deposit',
+    <ArbitrumDeposit tokenSymbol={parsedArgs[0]} amtString={parsedArgs[1]} />
+  );
+  widgets.set(
+    'arbitrum-withdraw',
+    <ArbitrumWithdraw tokenSymbol={parsedArgs[0]} amtString={parsedArgs[1]} />
+  );
+
   /* If available, return the widget in the widgets map */
   if (widgets.has(fnName)) {
     return widgets.get(fnName)!;

src/components/current/widgets/hop/HopBridge.tsx

@@ -1,5 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import { Hop } from '@hop-protocol/sdk';
+import { config } from '@hop-protocol/sdk/dist/src/config';
 import { CanonicalToken, ChainSlug } from '@hop-protocol/sdk/dist/src/constants';
 import { Interface, UnsignedTransaction } from 'ethers/lib/utils';
 import { erc20ABI } from 'wagmi';
@@ -100,6 +101,10 @@ const HopBridge = ({ inputString, tokenSymbol, toChain, fromChain }: HopBridgePr
     })();
   }, [_fromChain, input?.value, _toChain, tokenIn?.address, tokenSymbol]); // TODO signer is causing infinite loop
 
+  // find the chain id of the from chain using the hop sdk config
+  // using the `fromSlug`(returns the Chain) property of Chain doesn't return the chain id, so using the below methodology instead
+  const fromChainId = config.chains.mainnet[_fromChain].chainId as number | undefined;
+
   return (
     <>
       <HeaderResponse
@@ -115,6 +120,7 @@ const HopBridge = ({ inputString, tokenSymbol, toChain, fromChain }: HopBridgePr
         approvalParams={approvalParams}
         txParams={undefined}
         sendParams={sendParams}
+        chainId={fromChainId}
       />
     </>
   );

src/components/experimental_/widgets/arbitrum/ArbitrumDeposit.tsx

@@ -0,0 +1,119 @@
+import { useEffect, useMemo, useState } from 'react';
+import { Erc20Bridger, getL2Network } from '@arbitrum/sdk';
+import { UnsignedTransaction } from 'ethers';
+import { Interface } from 'ethers/lib/utils.js';
+import { erc20ABI, useAccount, usePrepareContractWrite, useProvider } from 'wagmi';
+import { ActionResponse, HeaderResponse } from '@/components/cactiComponents';
+import { ApprovalBasicParams } from '@/components/cactiComponents/hooks/useApproval';
+import useInput from '@/hooks/useInput';
+import useToken from '@/hooks/useToken';
+import Inbox from './abi/Inbox';
+
+interface ArbitrumDepositETHProps {
+  tokenSymbol: string;
+  amtString: string;
+}
+
+// the proxy contract address, not the actual implementation address
+const INBOX_CONTRACT_ADDRESS = '0x4Dbd4fc535Ac27206064B68FfCf827b0A60BAB3f';
+export const L2_CHAIN_ID = 42161;
+
+const ArbitrumDeposit = ({ tokenSymbol, amtString }: ArbitrumDepositETHProps) => {
+  const l1Provider = useProvider({ chainId: 1 });
+  const l2Provider = useProvider({ chainId: L2_CHAIN_ID });
+  const { data: token, isETH } = useToken(tokenSymbol.toUpperCase());
+  const { address: account } = useAccount();
+  const amount = useInput(amtString, token?.symbol!);
+
+  const [erc20ApprovalParams, setErc20ApprovalParams] = useState<ApprovalBasicParams>();
+  const [erc20SendParams, setErc20SendParams] = useState<UnsignedTransaction>();
+  const [error, setError] = useState('');
+
+  const { data: depositEth } = usePrepareContractWrite({
+    address: INBOX_CONTRACT_ADDRESS,
+    abi: Inbox,
+    functionName: 'depositEth',
+    overrides: { value: amount?.value },
+    enabled: isETH,
+  });
+
+  // handle erc20 (wip)
+  useEffect(() => {
+    (async () => {
+      if (isETH) return;
+      if (!l1Provider) return setError('No L1 provider detected');
+      if (!l2Provider) return setError('No L2 provider detected');
+      if (!token?.address) return setError('No token address detected');
+      if (!amount?.value) return setError('No amount detected');
+      if (!account) return setError('No account detected');
+
+      const arbitrumOne = await getL2Network(
+        L2_CHAIN_ID /** <-- chain id of target Arbitrum chain */
+      );
+
+      const erc20Bridger = new Erc20Bridger(arbitrumOne);
+
+      // get approval params
+      try {
+        const { data } = await erc20Bridger.getApproveTokenRequest({
+          l1Provider,
+          erc20L1Address: token.address,
+          amount: amount.value,
+        });
+
+        // get the spender address
+        const iface = new Interface(erc20ABI);
+        const parsed = iface.parseTransaction({ data: data.toString() });
+        const spender = parsed.args[0];
+
+        setErc20ApprovalParams({
+          approvalAmount: amount.value,
+          tokenAddress: token.address,
+          spender,
+          skipApproval: false,
+        });
+      } catch (error) {
+        console.error(error);
+        setError('There was an error initiating the transaction');
+      }
+
+      try {
+        // get the send params
+        const req = await erc20Bridger.getDepositRequest({
+          l1Provider,
+          l2Provider,
+          erc20L1Address: token.address,
+          amount: amount.value,
+          from: account,
+        });
+
+        setErc20SendParams(req.txRequest);
+      } catch (error) {
+        console.error(error);
+        setError('There was an error initiating the transaction');
+      }
+    })();
+  }, [account, amount?.value, isETH, l1Provider, l2Provider, token?.address]);
+
+  const sendParams = useMemo(
+    () => (isETH ? depositEth?.request : erc20SendParams),
+    [depositEth?.request, erc20SendParams, isETH]
+  );
+
+  return (
+    <>
+      <HeaderResponse
+        text={`Deposit ${amount?.formatted} ${tokenSymbol} to Arbitrum`}
+        projectName="arbitrum"
+      />
+      <ActionResponse
+        label={`Deposit ${amount?.formatted || ''} ${tokenSymbol} to Arbitrum`}
+        txParams={undefined}
+        approvalParams={erc20ApprovalParams}
+        sendParams={sendParams}
+      />
+    </>
+  );
+};
+
+export default ArbitrumDeposit;

src/components/experimental_/widgets/arbitrum/ArbitrumWithdraw.tsx

@@ -0,0 +1,88 @@
+import { useEffect, useMemo, useState } from 'react';
+import { Erc20Bridger, getL1Network, getL2Network } from '@arbitrum/sdk';
+import { UnsignedTransaction } from 'ethers';
+import { useAccount, usePrepareContractWrite, useProvider } from 'wagmi';
+import { ActionResponse, HeaderResponse } from '@/components/cactiComponents';
+import { ApprovalBasicParams } from '@/components/cactiComponents/hooks/useApproval';
+import useInput from '@/hooks/useInput';
+import useToken from '@/hooks/useToken';
+import { L2_CHAIN_ID } from './ArbitrumDeposit';
+import ArbSys from './abi/ArbSys';
+
+interface ArbitrumWithdrawProps {
+  tokenSymbol: string;
+  amtString: string;
+}
+
+const ARBSYS_CONTRACT_ADDRESS = '0x0000000000000000000000000000000000000064';
+
+const ArbitrumWithdraw = ({ tokenSymbol, amtString }: ArbitrumWithdrawProps) => {
+  const l1Provider = useProvider({ chainId: 1 });
+  const l2Provider = useProvider({ chainId: L2_CHAIN_ID });
+  const { data: token, isETH } = useToken(tokenSymbol);
+  const amount = useInput(amtString, token?.symbol!);
+  const { address: account } = useAccount();
+  const [erc20ApprovalParams, setErc20ApprovalParams] = useState<ApprovalBasicParams>();
+  const [erc20SendParams, setErc20SendParams] = useState<UnsignedTransaction>();
+
+  const { data: withdrawEth } = usePrepareContractWrite({
+    address: ARBSYS_CONTRACT_ADDRESS,
+    abi: ArbSys,
+    functionName: 'withdrawEth',
+    args: [account!],
+    overrides: { value: amount?.value },
+  });
+
+  // handle erc20 withdraw
+  useEffect(() => {
+    (async () => {
+      if (isETH) return;
+      if (!token?.address) return;
+      if (!amount?.value) return;
+      if (!account) return;
+
+      const arbitrumOne = await getL2Network(L2_CHAIN_ID /** <-- chain id of Arbitrum chain */);
+
+      const erc20Bridger = new Erc20Bridger(arbitrumOne);
+
+      try {
+        const req = await erc20Bridger.getWithdrawalRequest({
+          erc20l1Address: token.address,
+          amount: amount.value,
+          destinationAddress: account,
+          from: account,
+        });
+
+        setErc20SendParams(req.txRequest);
+      } catch (e) {
+        console.error(e);
+        console.error('Error initiating transaction');
+      }
+    })();
+  }, [account, amount?.value, isETH, token?.address]);
+
+  if (!token) <>token not supported</>;
+  if (!amount?.value) <>amount specified is invalid</>;
+
+  const sendParams = useMemo(
+    () => (isETH ? withdrawEth?.request : erc20SendParams),
+    [erc20SendParams, isETH, withdrawEth?.request]
+  );
+
+  return (
+    <>
+      <HeaderResponse
+        text={`Withdraw ${amount?.formatted} ${tokenSymbol} from Arbitrum`}
+        projectName="arbitrum"
+      />
+      <ActionResponse
+        label={`Withdraw ${amount?.formatted} ${tokenSymbol} from Arbitrum`}
+        txParams={undefined}
+        approvalParams={undefined}
+        sendParams={sendParams}
+      />
+    </>
+  );
+};
+
+export default ArbitrumWithdraw;