@xswap-link/sdk 0.1.0 → 0.1.2

package/src/components/TxConfigForm/Form.tsx

@@ -1,80 +1,75 @@
 import "@src/global.css";
-import React, { FC, FormEvent, useEffect, useState } from "react";
+import React, { FormEvent, useEffect, useState } from "react";
 import { ethers } from "ethers";
-import {
-  Chain,
-  ContractCall,
-  Route,
-  Token,
-  TokenBalances,
-  TokenPrices,
-} from "@src/models";
+import { useAccount, useSwitchChain } from "wagmi";
+import { Chain, Route, Token, TokenBalances, TokenPrices } from "@src/models";
 import { getPrices, getRoute } from "@src/services";
-import {
-  getBalances,
-  safeBigNumberFrom,
-  shortAddress,
-  weiToHumanReadable,
-} from "@src/utils";
-import {
-  ChevronDownIcon,
-  ChevronUpIcon,
-  CoinsIcon,
-  DownArrowIcon,
-  HistoryIcon,
-  PercentageIcon,
-} from "@src/components/icons";
-import { SLIPPAGE_PRESETS, NUMBER_INPUT_REGEX } from "@src/constants";
-import { History } from "./History";
-import { Alert } from "@src/components";
+import { getBalances } from "@src/utils";
+import { ROUTE_TIMEOUT_MS } from "@src/constants";
+import { TxConfigFormProps } from "@src/components";
 import { useDebounce } from "@src/hooks";
-import { TokenPicker } from "./TokenPicker";
-import { Skeleton } from "@src/components/Skeleton";
 import { ADDRESSES } from "@src/contracts";
-
-interface Props {
-  dstChainId: string;
-  dstTokenAddr: string;
-  customContractCalls: ContractCall[];
-  desc: string;
-  supportedChains: Chain[];
-  onSubmit: (route: Route) => void;
-}
-
-export const Form: FC<Props> = ({
+import { History } from "./History";
+import { TopBar } from "./TopBar";
+import { Settings } from "./Settings";
+import { FeesDetails } from "./FeesDetails";
+import { Summary } from "./Summary";
+import { SwapPanel } from "./SwapPanel";
+import { ErrorField } from "./ErrorField";
+import { Description } from "./Description";
+import { DEFAULT_SOURCE_CHAIN_ID } from "@src/constants";
+
+export const Form = ({
   dstChainId,
   dstTokenAddr,
   customContractCalls,
   desc,
   supportedChains,
   onSubmit,
+}: TxConfigFormProps & {
+  onSubmit: (route: Route) => void;
 }) => {
-  const [signer, setSigner] = useState<string>("");
+  const [signer, setSigner] = useState<string | undefined>();
   const [dstChain, setDstChain] = useState<Chain>();
   const [dstToken, setDstToken] = useState<Token>();
   const [srcChain, setSrcChain] = useState<Chain>();
   const [srcToken, setSrcToken] = useState<Token>();
   const [amount, setAmount] = useState<string>("");
   const [paymentToken, setPaymentToken] = useState<Token>();
-  const [slippage, setSlippage] = useState<number>();
-  const [slippageActivePresetIndex, setSlippageActivePresetIndex] = useState(1);
-  const [usingSlippageInput, setUsingSlippageInput] = useState(false);
-  const [chainListShown, setChainListShown] = useState(false);
-  const [tokenListShown, setTokenListShown] = useState(false);
   const [route, setRoute] = useState<Route>();
   const [expressChecked, setExpressChecked] = useState(true);
-  const [feesDetailsShown, setFeesDetailsShown] = useState(false);
   const [historyTabShown, setHistoryTabShown] = useState(false);
   const [isGettingRoute, setIsGettingRoute] = useState(false);
   const [prices, setPrices] = useState<TokenPrices>();
   const [balances, setBalances] = useState<TokenBalances>();
+  const [settingsShown, setSettingsShown] = useState(false);
+  const [formError, setFormError] = useState("");
+  const [slippage, setSlippage] = useState<string>("1.5");
+  const [feesDetailsShown, setFeesDetailsShown] = useState(false);
 
   const debouncedAmount = useDebounce(amount, 1000);
-  const { ethereum } = window;
+  const account = useAccount();
+  const { switchChainAsync } = useSwitchChain();
+
+  useEffect(() => {
+    setSigner(account.address);
+  }, [account.address]);
+
+  useEffect(() => {
+    const defaultChain = supportedChains.find(
+      ({ chainId }) => chainId === account.chainId?.toString(),
+    );
+    setSrcChain(
+      defaultChain ??
+        supportedChains.find(
+          ({ chainId }) => chainId === DEFAULT_SOURCE_CHAIN_ID,
+        ),
+    );
+  }, [account.chainId]);
 
   useEffect(() => {
     setDstChain(supportedChains.find((chain) => chain.chainId === dstChainId));
-  }, [supportedChains]);
+  }, [supportedChains, dstChainId]);
 
   useEffect(() => {
     setDstToken(
@@ -84,12 +79,6 @@ export const Form: FC<Props> = ({
     );
   }, [dstChain]);
 
-  useEffect(() => {
-    if (!usingSlippageInput) {
-      setSlippage(SLIPPAGE_PRESETS[slippageActivePresetIndex]);
-    }
-  }, [slippageActivePresetIndex, usingSlippageInput]);
-
   useEffect(() => {
     if (
       srcChain &&
@@ -99,6 +88,10 @@ export const Form: FC<Props> = ({
       paymentToken &&
       slippage
     ) {
+      setFormError("");
+      const timeout = setTimeout(() => {
+        setFormError("Getting Route is taking longer than usually");
+      }, ROUTE_TIMEOUT_MS);
       setIsGettingRoute(true);
       setFeesDetailsShown(false);
       getRoute({
@@ -112,12 +105,21 @@ export const Form: FC<Props> = ({
         toChain: dstChainId,
         toToken: dstTokenAddr,
         paymentToken: paymentToken.address,
-        slippage,
+        slippage: Number(slippage),
         expressDelivery: expressChecked,
         customContractCalls,
       })
-        .then((response) => setRoute(response))
-        .finally(() => setIsGettingRoute(false));
+        .then((response) => {
+          setRoute(response);
+          setFormError("");
+        })
+        .catch((err) => {
+          setFormError(err.message);
+        })
+        .finally(() => {
+          setIsGettingRoute(false);
+          clearTimeout(timeout);
+        });
     }
   }, [
     signer,
@@ -129,52 +131,6 @@ export const Form: FC<Props> = ({
     expressChecked,
   ]);
 
-  useEffect(() => {
-    if (ethereum) {
-      ethereum
-        .request({ method: "eth_accounts" })
-        .then((accounts: string[]) => {
-          if (accounts[0]) {
-            setSigner(accounts[0]);
-          }
-        });
-
-      ethereum.on("accountsChanged", (accounts: string[]) => {
-        if (accounts[0]) {
-          setSigner(accounts[0]);
-        }
-      });
-      return () => ethereum.removeListener("accountsChanged", () => {});
-    }
-  }, [ethereum]);
-
-  useEffect(() => {
-    if (
-      ethereum &&
-      ethereum.request &&
-      supportedChains &&
-      supportedChains.length > 0
-    ) {
-      ethereum.request({ method: "eth_chainId" }).then((chainId: string) => {
-        setSrcChain(
-          supportedChains.find(
-            (chain) => chain.chainId === parseInt(chainId, 16).toString(),
-          ),
-        );
-      });
-
-      ethereum.on("chainChanged", (chainId: string) => {
-        setSrcChain(
-          supportedChains.find(
-            (chain) => chain.chainId === parseInt(chainId, 16).toString(),
-          ),
-        );
-      });
-
-      return () => ethereum.removeListener("chainChanged", () => {});
-    }
-  }, [ethereum, supportedChains]);
-
   useEffect(() => {
     if (srcChain) {
       setPaymentToken(
@@ -188,9 +144,12 @@ export const Form: FC<Props> = ({
   }, [srcChain]);
 
   useEffect(() => {
-    if (srcChain && !srcToken) {
-      setSrcToken(srcChain?.tokens[0]);
-    }
+    setAmount("");
+    setFormError("");
+  }, [srcToken]);
+
+  useEffect(() => {
+    setSrcToken(srcChain?.tokens[0]);
   }, [srcChain]);
 
   useEffect(() => {
@@ -209,357 +168,80 @@ export const Form: FC<Props> = ({
 
   const handleSubmit = (event: FormEvent<HTMLFormElement>) => {
     event.preventDefault();
-    if (route) {
-      onSubmit(route);
-    } else {
-      // TODO error handling (cannot submit if no values)
-    }
+    if (route) onSubmit(route);
+  };
+
+  const handleSwitchChain = async () => {
+    await switchChainAsync({ chainId: Number(srcChain?.chainId) });
   };
 
   return (
     <form
-      className="flex flex-col gap-2 z-10 my-0 mx-auto p-2 rounded-3xl overflow-hidden w-96 sm:w-[482px] min-h-[562px]"
+      className="flex flex-col gap-2 z-10 my-0 mx-auto p-4 rounded-3xl overflow-hidden font-light w-x_mobile sm:w-x_desktop"
       onSubmit={handleSubmit}
     >
-      <div className="flex w-4/5 justify-between mx-auto">
-        <div className="rounded-lg text-[rgba(255,255,255,0.6)] py-1 px-2 text-sm whitespace-nowrap globalBorder">
-          {signer
-            ? `Connected wallet: ${shortAddress(signer)}`
-            : `Disconnected`}
-        </div>
-        {signer && (
-          <div
-            onClick={() => setHistoryTabShown((x) => !x)}
-            className="flex items-center text-xs gap-1 cursor-pointer"
-          >
-            {!historyTabShown ? (
-              <>
-                <HistoryIcon />
-                <div>History</div>
-              </>
-            ) : (
-              <div>Back</div>
-            )}
-          </div>
-        )}
-      </div>
+      <TopBar
+        signer={signer}
+        historyTabShown={historyTabShown}
+        setHistoryTabShown={setHistoryTabShown}
+        setSettingsShown={setSettingsShown}
+      />
+      {settingsShown && (
+        <Settings
+          expressChecked={expressChecked}
+          setExpressChecked={setExpressChecked}
+          setSettingsShown={setSettingsShown}
+          slippage={slippage}
+          setSlippage={setSlippage}
+        />
+      )}
       {historyTabShown ? (
-        <div className="flex items-center justify-center w-full">
-          <History signer={signer} supportedChains={supportedChains} />
-        </div>
+        <History signer={signer} supportedChains={supportedChains} />
       ) : (
         <div className="flex flex-col gap-2">
-          {desc && (
-            <div className="flex flex-col items-start globalBorder rounded-lg bg-[rgba(15,15,15,1)] p-4">
-              <div className="w-full flex gap-4 items-start justify-between mb-4">
-                {desc}
-              </div>
-            </div>
+          {desc && <Description description={desc} />}
+          <SwapPanel
+            amount={amount}
+            setAmount={setAmount}
+            srcToken={srcToken}
+            setSrcToken={setSrcToken}
+            srcChain={srcChain}
+            signer={signer}
+            balances={balances}
+            prices={prices}
+            supportedChains={supportedChains}
+            setSrcChain={setSrcChain}
+          />
+          <Summary
+            isGettingRoute={isGettingRoute}
+            amount={amount}
+            route={route}
+            dstToken={dstToken}
+            dstChain={dstChain}
+          />
+          <FeesDetails
+            route={route}
+            isGettingRoute={isGettingRoute}
+            paymentToken={paymentToken}
+            dstToken={dstToken}
+            expressChecked={expressChecked}
+            slippage={slippage}
+            feesDetailsShown={feesDetailsShown}
+            setFeesDetailsShown={setFeesDetailsShown}
+          />
+          {formError.length > 0 && <ErrorField error={formError} />}
+          {srcChain && srcChain.chainId !== account.chainId?.toString() ? (
+            <button type="button" onClick={handleSwitchChain}>
+              Switch chain
+            </button>
+          ) : (
+            <button
+              type="submit"
+              disabled={!signer || !route || isGettingRoute}
+            >
+              Submit
+            </button>
           )}
-          <div className="flex flex-col items-start globalBorder rounded-lg bg-[rgba(15,15,15,1)] p-4">
-            <div className="w-full flex gap-4 items-start justify-between mb-4">
-              <div className="flex flex-col overflow-hidden w-1/2">
-                <input
-                  className="p-0 border-none bg-transparent text-2xl overflow-ellipsis"
-                  value={amount}
-                  onChange={(e) => {
-                    if (e.target.value === ".") return;
-                    if (NUMBER_INPUT_REGEX.test(e.target.value)) {
-                      setIsGettingRoute(true);
-                      setFeesDetailsShown(false);
-                      setAmount(e.target.value.replace(/,/g, "."));
-                    }
-                  }}
-                  inputMode="decimal"
-                  spellCheck="false"
-                  autoComplete="off"
-                  autoCorrect="off"
-                  placeholder="0"
-                />
-              </div>
-              <div className="flex flex-col relative items-end gap-2.5 w-1/2">
-                <div
-                  className="flex gap-2 items-center p-2 max-w-full cursor-pointer bg-black text-white text-xs globalBorder rounded-3xl whitespace-nowrap"
-                  onClick={() => {
-                    setTokenListShown((state) => !state);
-                  }}
-                >
-                  <img
-                    height={16}
-                    width={16}
-                    src={srcToken?.image}
-                    style={{ marginRight: "4px" }}
-                    alt={srcToken?.name}
-                  />
-                  <div>{srcToken?.symbol}</div>
-                  <DownArrowIcon />
-                </div>
-
-                {tokenListShown && (
-                  <TokenPicker
-                    onCloseClick={() => setTokenListShown(false)}
-                    tokens={srcChain?.tokens}
-                    signer={signer}
-                    selectedToken={srcToken}
-                    setSelectedToken={(token) => setSrcToken(token)}
-                    balances={balances}
-                  />
-                )}
-
-                <div className="flex gap-2 items-center text-xs font-medium text-white opacity-60 py-0.5 px-2">
-                  {signer && (
-                    <>
-                      Balance:{" "}
-                      {srcToken && balances ? (
-                        weiToHumanReadable({
-                          amount: balances[srcToken.address]?.toString() || "0",
-                          decimals: srcToken.decimals,
-                          precisionFractionalPlaces: 4,
-                        })
-                      ) : (
-                        <Skeleton w="w-12" h="h-3" />
-                      )}
-                    </>
-                  )}
-                </div>
-              </div>
-            </div>
-
-            <div className="flex justify-between items-center w-full text-xs text-[rgba(255,255,255,0.6)] relative">
-              {srcToken ? (
-                prices && prices[srcToken.address] ? (
-                  <div>
-                    {`$${(
-                      Number(amount) * Number(prices[srcToken.address])
-                    ).toFixed(2)}`}
-                  </div>
-                ) : (
-                  <Alert desc="Unknown price" />
-                )
-              ) : (
-                <>$0.00</>
-              )}
-              <div
-                className="bg-black globalBorder rounded-2xl whitespace-nowrap flex items-center p-2 cursor-pointer gap-1"
-                onClick={() => setChainListShown((prev) => !prev)}
-              >
-                <img
-                  width={12}
-                  height={12}
-                  src={srcChain?.image}
-                  alt={srcChain?.name}
-                />
-                <div>{srcChain?.displayName}</div>
-                <DownArrowIcon />
-              </div>
-
-              {chainListShown && (
-                <ul className="bg-black globalBorder rounded-lg whitespace-nowrap z-1 right-0 top-10 px-2 max-w-full max-h-[40vh] overflow-auto absolute text-sm z-20">
-                  {supportedChains
-                    .filter((chain) => chain.chainId !== srcChain?.chainId)
-                    .map((chain, index) => (
-                      <div key={`${chain.ecosystem}-${chain.chainId}`}>
-                        <li
-                          className="bg-transparent border-none flex gap-1 items-center cursor-pointer py-2 w-full"
-                          key={index}
-                          onClick={() => {
-                            setSrcChain(chain);
-                            setChainListShown(false);
-                          }}
-                        >
-                          <img
-                            width={12}
-                            height={12}
-                            src={chain.image}
-                            alt={chain.displayName}
-                          />
-                          {chain.displayName}
-                        </li>
-                        {index !== supportedChains.length - 1 && (
-                          <div className="h-px mx-2 bg-[rgba(255,255,255,0.15)]"></div>
-                        )}
-                      </div>
-                    ))}
-                </ul>
-              )}
-            </div>
-          </div>
-          <div className="flex flex-col items-start globalBorder rounded-lg bg-[rgba(15,15,15,1)] p-4">
-            <div className="flex justify-around sm:justify-start gap-4 items-center w-full text-xs text-[rgba(255,255,255,0.6)]">
-              <div className="flex flex-col items-center sm:flex-row gap-1">
-                You're getting:
-                {isGettingRoute && amount.length > 0 ? (
-                  <div className="bg-current rounded animate-pulse w-[190px] h-7" />
-                ) : (
-                  <div className="flex gap-1">
-                    <div className="text-white text-lg">
-                      {weiToHumanReadable({
-                        amount: route?.estAmountOut || "0",
-                        decimals: dstToken?.decimals || 18,
-                        precisionFractionalPlaces: 5,
-                      })}
-                    </div>
-                    <div className="flex items-center gap-1 text-white">
-                      <div className="w-4 h-4">
-                        <img src={dstToken?.image} alt={dstToken?.name} />
-                      </div>
-                      <div className="text-lg">{dstToken?.symbol}</div>
-                    </div>
-                  </div>
-                )}
-              </div>
-              <div className="flex flex-col sm:flex-row gap-1">
-                on chain:
-                <div className="flex gap-1 text-white">
-                  <div className="w-4 h-4">
-                    <img src={dstChain?.image} alt={dstChain?.name} />
-                  </div>
-                  <div>{dstChain?.displayName}</div>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div className="flex flex-col gap-2 globalBorder rounded-lg bg-[rgba(15,15,15,1)] p-4">
-            <div className="flex w-full items-center justify-between">
-              <div className="flex gap-1 text-xs font-medium text-white opacity-60">
-                <CoinsIcon />
-                <div className="mr-1">Fees:</div>
-                {isGettingRoute ? (
-                  <div className="bg-current rounded animate-pulse w-20 h-4" />
-                ) : (
-                  ` ${weiToHumanReadable({
-                    amount: safeBigNumberFrom(
-                      route?.xSwapFees.xSwapFee.nativeFee || "0",
-                    )
-                      .add(safeBigNumberFrom(route?.xSwapFees.ccipFee || "0"))
-                      .add(
-                        safeBigNumberFrom(
-                          route?.xSwapFees.expressDeliveryFee || "0",
-                        ),
-                      )
-                      .toString(),
-                    decimals: 18,
-                    precisionFractionalPlaces: 5,
-                  })} ${paymentToken?.symbol}`
-                )}
-              </div>
-              <div
-                onClick={() => setFeesDetailsShown((x) => !x)}
-                className="text-xs font-medium text-white opacity-60 cursor-pointer"
-              >
-                {feesDetailsShown ? <ChevronUpIcon /> : <ChevronDownIcon />}
-              </div>
-            </div>
-            {feesDetailsShown && (
-              <div className="flex w-full items-center justify-between ">
-                <div className="flex flex-col text-[10px] ">
-                  <div className="font-medium text-white opacity-60">
-                    CCIP Fee:
-                    {` ${weiToHumanReadable({
-                      amount: route?.xSwapFees.ccipFee || "0",
-                      decimals: 18,
-                      precisionFractionalPlaces: 5,
-                    })} ${paymentToken?.symbol}`}
-                  </div>
-                  <div className="font-medium text-white opacity-60">
-                    Native Fee:
-                    {` ${weiToHumanReadable({
-                      amount: route?.xSwapFees.xSwapFee.nativeFee || "0",
-                      decimals: 18,
-                      precisionFractionalPlaces: 5,
-                    })} ${paymentToken?.symbol}`}
-                  </div>
-                </div>
-                <div className="flex flex-col text-[10px] ">
-                  <div className="font-medium text-white opacity-60">
-                    Slippage: {`${slippage}%`}
-                  </div>
-                  <div className="font-medium text-white opacity-60">
-                    Min amount out:{" "}
-                    {weiToHumanReadable({
-                      amount: route?.minAmountOut || "0",
-                      decimals: dstToken?.decimals || 18,
-                      precisionFractionalPlaces: 5,
-                    })}{" "}
-                    {dstToken?.symbol}
-                  </div>
-                </div>
-              </div>
-            )}
-          </div>
-          <div className="flex justify-between">
-            <div className="flex flex-col gap-2 ">
-              <div className=" text-[rgba(255,255,255,0.6)]">Slippage:</div>
-              <div className="flex gap-2">
-                <div className="flex items-center bg-[rgba(15,15,15,1)] p-1 globalBorder rounded-xl">
-                  {SLIPPAGE_PRESETS.map((preset, index) => (
-                    <div
-                      key={index}
-                      className={`transition-all cursor-pointer block rounded-lg p-2 border-none text-sm ${
-                        index === slippageActivePresetIndex &&
-                        !usingSlippageInput
-                          ? "text-white"
-                          : "text-[rgba(255,255,255,0.2)]"
-                      } ${
-                        index === slippageActivePresetIndex &&
-                        !usingSlippageInput
-                          ? "bg-gradient-to-r from-[#3681c6] to-[#2b4a9d]"
-                          : ""
-                      }`}
-                      onClick={() => {
-                        setUsingSlippageInput(false);
-                        setSlippageActivePresetIndex(index);
-                      }}
-                    >
-                      {`${preset}%`}
-                    </div>
-                  ))}
-                </div>
-                <div className="bg-[rgba(39,39,39,1)] p-2 border border-solid border-[rgba(82,82,82,1)] rounded-xl text-white flex items-center">
-                  <input
-                    className="text-white border-none bg-[rgba(39,39,39,1)] w-10 placeholder:text-[rgba(255,255,255,0.2)] focus:outline-none"
-                    placeholder="1.5"
-                    value={usingSlippageInput ? slippage : ""}
-                    onChange={(e) => {
-                      if (e.target.value.length > 0) {
-                        if (NUMBER_INPUT_REGEX.test(e.target.value)) {
-                          setUsingSlippageInput(true);
-                          setSlippage(Number(e.target.value));
-                        }
-                      } else {
-                        setUsingSlippageInput(false);
-                        setSlippageActivePresetIndex(1);
-                      }
-                    }}
-                  />
-                  <PercentageIcon />
-                </div>
-              </div>
-            </div>
-
-            <div className="flex gap-2 items-center">
-              <div className=" text-[rgba(255,255,255,0.6)]">
-                Express delivery:
-              </div>
-              <div>
-                <span
-                  className="inline-flex w-14 h-9 p-3 relative align-middle box-border overflow-hidden cursor-pointer"
-                  onClick={() => {
-                    setExpressChecked((x) => !x);
-                  }}
-                >
-                  <span className="h-full, w-full rounded-lg bg-[rgba(255,255,255,0.3)]"></span>
-                  <span
-                    className={`transition-all w-5 h-5 rounded-full absolute translate-y-[-4px] 
-                ${
-                  expressChecked ? "translate-x-[12px] bg-x_blue" : "bg-white"
-                } `}
-                  ></span>
-                </span>
-              </div>
-            </div>
-          </div>
-          <button disabled={!signer || !route || isGettingRoute}>Submit</button>
         </div>
       )}
     </form>