Merge pull request #459 from yieldprotocol/dev

master < dev

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

@@ -1,6 +1,6 @@
 {
   "name": "chatweb3-frontend",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "private": true,
   "scripts": {
     "dev": "next dev",
@@ -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';
@@ -186,6 +188,8 @@ export const Widget = (props: WidgetProps) => {
       tokenInSymbol={parsedArgs[0]}
       tokenOutSymbol={parsedArgs[1]}
       inputAmount={parsedArgs[3]}
+      transactionKeyword={parsedArgs[2]} // BUYAMOUNT or SELLAMOUNT
+      slippage={parsedArgs[4]}
     />
   );
 
@@ -228,7 +232,6 @@ export const Widget = (props: WidgetProps) => {
       assetsToShow={6}
     />
   );
-
   widgets.set(
     'yield-protocol-lend',
     <YieldProtocolLend
@@ -281,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]} />);
 
@@ -323,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/WelcomeMessage.tsx

@@ -35,11 +35,17 @@ const WelcomeMessage = () => {
   return (
     <div className="h-full place-items-center ">
       <div className="mx-auto w-full max-w-4xl space-y-20">
-        <Image src={cactiImage} alt="CactiChat" className="mx-auto" width={400} height={300} />
+        <div className="flex w-full justify-center">
+          <div className="w-[50%]">
+            <Image src={cactiImage} alt="CactiChat" className="mx-auto" />
+          </div>
+        </div>
 
         <div className="grid grid-cols-1 gap-20 p-4 sm:grid-cols-3">
           <WelcomeColumn>
-            <Cactus1 className="h-16" />
+            <div className="w-[20%] sm:w-[40%] ">
+              <Cactus1 className="h-16" />
+            </div>
             <WelcomeBoxSubtitle> Explore NFTs </WelcomeBoxSubtitle>
             <WelcomeBox onClick={() => sendMessage('Browse some cheetah nft collections')}>
               Browse some [cheetah] NFT collections
@@ -53,7 +59,9 @@ const WelcomeMessage = () => {
           </WelcomeColumn>
 
           <WelcomeColumn>
-            <Cactus2 className="h-16" />
+          <div className="w-[20%] sm:w-[40%] ">
+              <Cactus2 className="h-16" />
+            </div>
             <WelcomeBoxSubtitle>Interact with protocols</WelcomeBoxSubtitle>
             <WelcomeBox onClick={() => sendMessage('Swap 0.1 ETH for DAI on Uniswap')}>
               Swap 0.1 ETH for DAI on Uniswap
@@ -69,7 +77,9 @@ const WelcomeMessage = () => {
           </WelcomeColumn>
 
           <WelcomeColumn>
-            <Cactus3 className="h-16" />
+          <div className="w-[20%] sm:w-[40%] ">
+              <Cactus3 className="h-16" />
+            </div>
             {/* <ExclamationTriangleIcon className="mt-3 h-12 text-gray-300" /> */}
             <WelcomeBoxSubtitle>Query the Network</WelcomeBoxSubtitle>
             <WelcomeBox onClick={() => sendMessage('What is the price of ETH in terms of USD')}>

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/current/widgets/uniswap/Uniswap.tsx

@@ -25,21 +25,26 @@ interface UniswapProps {
   tokenInSymbol: string;
   tokenOutSymbol: string;
   inputAmount: string;
+  slippage: string;
+  transactionKeyword: 'BUYAMOUNT' | 'SELLAMOUNT';
 }
 
-const Uniswap = ({ tokenInSymbol, tokenOutSymbol, inputAmount }: UniswapProps) => {
+const Uniswap = ({ tokenInSymbol, tokenOutSymbol, inputAmount, slippage, transactionKeyword }: UniswapProps) => {
   const chainId = useChainId();
+  const isBuying = transactionKeyword === 'BUYAMOUNT';
 
   const { address: recipient } = useAccount();
   const { data: tokenIn, isETH: tokenInIsETH } = useToken(tokenInSymbol);
   const { isETH: tokenOutIsETH } = useToken(tokenOutSymbol);
   const { data: tokenInChecked } = useToken(tokenInIsETH ? 'WETH' : tokenInSymbol);
   const { data: tokenOutChecked } = useToken(tokenOutIsETH ? 'WETH' : tokenOutSymbol);
   const input = useInput(inputAmount, tokenInChecked?.symbol!);
-  const slippage = 2.0; // in percentage terms
+
+  const slippage_ = +slippage || 0.5; // in percentage terms
+
   const getSlippageAdjustedAmount = (amount: BigNumber) =>
     BigNumber.from(amount)
-      .mul(10000 - slippage * 100)
+      .mul(10000 - slippage_ * 100)
       .div(10000);
 
   // token out quote for amount in
@@ -250,7 +255,7 @@ const Uniswap = ({ tokenInSymbol, tokenOutSymbol, inputAmount }: UniswapProps) =
       <ListResponse
         title="Breakdown"
         data={[
-          ['Slippage', `${slippage}%`],
+          ['Slippage', `${slippage_}%`],
           ['Minimum swap', cleanValue(amountOutMinimum_, 2)],
           ['Route', `${tokenInSymbol}-${tokenOutSymbol}`],
         ]}