Overhaul state and hooks with SDK types/constants and zustand

components/InputWithBalance.tsx

@@ -1,84 +1,70 @@
 import { BigNumber } from "ethers";
-import React from "react";
+import React, { useMemo } from "react";
 import { BiDollar } from "react-icons/bi";
 import { useNetwork } from "wagmi";
-import { validateNumber } from "../lib/utils";
+import { formatCurrencyAmount } from "../lib/utils/formatCurrencyAmount";
+import { ChainId, Currency, CurrencyAmount } from "../sdk";
 
 const InputWithBalance = ({
-  label,
-  expectedChainId,
+  currency,
   balance,
   value,
-  setValue,
-  setError,
-  maxEnabled = false,
+  onUserInput,
+  showMaxButton,
+  onMax,
+  disabled = false,
+  expectedChainId,
 }: {
-  label: string;
-  expectedChainId: number;
-  balance?: {
-    formatted: string;
-    value: BigNumber;
-  };
+  currency: Currency | undefined;
+  balance: CurrencyAmount<Currency> | undefined;
   value: string;
-  setValue: (value: string) => void;
-  setError?: (error: string | undefined) => void;
-  maxEnabled?: boolean;
+  onUserInput?: (value: string) => void;
+  showMaxButton: boolean;
+  onMax?: () => void;
+  disabled?: boolean;
+  expectedChainId: ChainId;
 }) => {
   const { chain } = useNetwork();
 
-  let error = chain?.id !== expectedChainId;
-
-  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    if (validateNumber(e.target.value)) {
-      setValue(e.target.value);
-      if (setError && balance && e.target.value !== "") {
-        const value = parseFloat(e.target.value) * 10 ** 6;
-        if (BigNumber.from(value).gt(balance.value)) {
-          console.log("error");
-          setError("Insufficient balance");
-        } else {
-          setError(undefined);
-        }
-      }
-    }
-  };
+  if (!chain || chain.id !== expectedChainId) {
+    disabled = true;
+  }
 
   return (
     <div className="relative mb-4">
       <input
-        disabled={error}
+        disabled={disabled}
         className={`flex h-24 w-full items-start justify-between rounded-sm border border-white/5 ${
-          error ? "bg-transparent" : "bg-black/10"
+          disabled ? "bg-transparent" : "bg-black/10"
         } p-4 pb-12 pt-4 font-wagmi text-xl text-white  placeholder:text-white/50 focus:outline-none`}
         placeholder="0.00"
         value={value}
-        onChange={handleChange}
+        onChange={(e) => {
+          if (onUserInput) {
+            onUserInput(e.target.value);
+          }
+        }}
       />
       <div className="absolute top-4 right-4 flex flex-col items-end">
-        <h4
-          className={`mb-2 flex h-fit items-center  rounded-sm border border-white/5 px-2 py-0.5 ${
-            error ? "text-white/50" : "bg-black/10 text-white"
-          }`}
-        >
-          <BiDollar className="mr-2 rounded-sm bg-white/5 p-px" />
-          {label}
-        </h4>
-        {!error && (
+        {currency && (
+          <h4
+            className={`mb-2 flex h-fit items-center  rounded-sm border border-white/5 px-2 py-0.5 ${
+              disabled ? "text-white/50" : "bg-black/10 text-white"
+            }`}
+          >
+            <BiDollar className="mr-2 rounded-sm bg-white/5 p-px" />
+            {currency?.symbol}
+          </h4>
+        )}
+        {!disabled && (
           <div className="flex items-center space-x-2">
             {balance && (
               <p className="text-sm text-white/50">
-                Balance: {parseFloat(parseFloat(balance.formatted).toFixed(6))}
+                Balance: {formatCurrencyAmount(balance, 6)}
               </p>
             )}
-            {maxEnabled && balance && (
-              <button
-                onClick={() => {
-                  console.log("max");
-                  setValue(
-                    balance.value.div(BigNumber.from(10).pow(6)).toString()
-                  );
-                }}
-              >
+            {showMaxButton && balance && (
+              <button onClick={onMax}>
                 <p className="text-sm text-white">Max</p>
               </button>
             )}

components/InteractButton.tsx

@@ -8,19 +8,20 @@ import {
 const InteractButton = ({
   text,
   expectedChainId,
-  onClick,
-  error = undefined,
+  onConfirm,
   children,
 }: {
   text: string;
   expectedChainId: number;
   error?: string;
-  onClick: () => void;
+  onConfirm: () => void;
   children?: React.ReactNode;
 }) => {
   const { address } = useAccount();
   const { chain } = useNetwork();
 
+  const error = false;
+
   return (
     <>
       {(() => {
@@ -36,7 +37,7 @@ const InteractButton = ({
             return <>{children}</>;
           }
 
-          return <Button onClick={onClick} text={text} />;
+          return <Button onClick={onConfirm} text={text} />;
         } else {
           return <InteractConnectButton />;
         }

components/PageWrapper.tsx

@@ -0,0 +1,128 @@
+import Main from "../components/layouts/Main";
+import Article from "../components/layouts/Article";
+import * as Tabs from "@radix-ui/react-tabs";
+import { useState, useEffect, useRef } from "react";
+import { chain, useSwitchNetwork } from "wagmi";
+import { useIsMounted } from "../lib/hooks/useIsMounted";
+import { BiCog } from "react-icons/bi";
+import TabContainer from "../components/TabContainer";
+import SwapTabContent from "../components/SwapTabContent";
+import DammTabContent from "../components/DammTabContent";
+import SettingsTabContent from "../components/SettingsTabContent";
+import { GiPeaceDove } from "react-icons/gi";
+import { useUserStore } from "../state/user/useUserStore";
+
+const PageWrapper = ({ children }: { children?: React.ReactNode }) => {
+  const [isAutoSwitch, activeTab, setActiveTab] = useUserStore((state) => [
+    state.isAutoSwitch,
+    state.activeTab,
+    state.setActiveTab,
+  ]);
+  const timerRef = useRef(0);
+
+  useEffect(() => {
+    return () => clearTimeout(timerRef.current);
+  }, []);
+
+  const { chains, error, isLoading, pendingChainId, switchNetwork } =
+    useSwitchNetwork();
+
+  useEffect(() => {
+    if (isAutoSwitch) {
+      if (activeTab === "damm") {
+        switchNetwork?.(chain.goerli.id);
+      }
+      if (activeTab === "polygon") {
+        switchNetwork?.(chain.polygonMumbai.id);
+      }
+      if (activeTab === "arbi") {
+        switchNetwork?.(chain.arbitrumGoerli.id);
+      }
+    }
+  }, [activeTab]);
+
+  const isMounted = useIsMounted();
+
+  if (!isMounted) return null;
+
+  return (
+    <Main>
+      <Article>
+        <div className="radial absolute h-screen w-full"></div>
+        <div className="background-gradient absolute h-full w-[100vw] opacity-20">
+          <div className="background-gradient-pattern" />
+        </div>
+        <div className="relative flex h-screen w-full items-start justify-center pt-48">
+          <div className="relative flex w-full flex-col items-start px-4 py-4">
+            <div className="flex w-full flex-row space-x-4">
+              <Tabs.Root
+                value={activeTab}
+                onValueChange={(v) => setActiveTab(v)}
+                defaultValue="damm"
+                className="w-full"
+              >
+                <Tabs.List className="relative z-10 flex flex-row">
+                  <Tabs.Trigger
+                    value="damm"
+                    className="relative w-full cursor-pointer overflow-hidden rounded-sm rounded-b-none border border-b-0 border-white/5 bg-black/10 px-4 py-2 text-left transition duration-300 ease-linear hover:text-white focus:outline-none rdx-state-active:bg-[#313135] rdx-state-active:text-white rdx-state-inactive:text-white/50"
+                  >
+                    {activeTab === "ethereum" && (
+                      <GiPeaceDove className="absolute right-0 -rotate-45 text-6xl text-white/5" />
+                    )}
+                    <p className="font-normal">dAMM</p>
+                  </Tabs.Trigger>
+                  <Tabs.Trigger
+                    value="polygon"
+                    className="relative w-full cursor-pointer overflow-hidden rounded-sm rounded-b-none border border-b-0 border-white/5 bg-black/10 px-4 py-2 text-left transition duration-300 ease-linear hover:text-white focus:outline-none rdx-state-active:bg-[#313135] rdx-state-active:text-white rdx-state-inactive:text-white/50"
+                  >
+                    {activeTab === "polygon" && (
+                      <GiPeaceDove className="absolute right-0 -rotate-45 text-6xl text-white/5" />
+                    )}
+                    <p className="font-normal">Polygon AMM</p>
+                  </Tabs.Trigger>
+                  <Tabs.Trigger
+                    value="arbi"
+                    className="relative w-full cursor-pointer overflow-hidden rounded-sm rounded-b-none border border-b-0 border-white/5 bg-black/10 px-4 py-2 text-left transition duration-300 ease-linear hover:text-white focus:outline-none rdx-state-active:bg-[#313135] rdx-state-active:text-white rdx-state-inactive:text-white/50"
+                  >
+                    {activeTab === "arbitrum" && (
+                      <GiPeaceDove className="absolute right-0 -rotate-45 text-6xl text-white/5" />
+                    )}
+                    <p className="font-normal">Arbitrum AMM</p>
+                  </Tabs.Trigger>
+                  <Tabs.Trigger
+                    value="settings"
+                    className="w-12 cursor-pointer rounded-sm rounded-b-none border border-b-0 border-white/5 bg-black/10 px-4 py-2 text-left transition duration-300 ease-linear hover:text-white focus:outline-none rdx-state-active:bg-[#313135] rdx-state-active:text-white rdx-state-inactive:text-white/50"
+                  >
+                    <BiCog className="" />
+                  </Tabs.Trigger>
+                </Tabs.List>
+                <Tabs.Content value="ethereum">
+                  <TabContainer>
+                    <DammTabContent />
+                  </TabContainer>
+                </Tabs.Content>
+                <Tabs.Content value="polygon">
+                  <TabContainer>
+                    {/* <SwapTabContent expectedChainId={chain.polygonMumbai.id} /> */}
+                  </TabContainer>
+                </Tabs.Content>
+                <Tabs.Content value="arbitrum">
+                  <TabContainer>
+                    {/* <SwapTabContent expectedChainId={chain.arbitrumGoerli.id} /> */}
+                  </TabContainer>
+                </Tabs.Content>
+                <Tabs.Content value="settings">
+                  <TabContainer>
+                    <SettingsTabContent />
+                  </TabContainer>
+                </Tabs.Content>
+              </Tabs.Root>
+            </div>
+          </div>
+        </div>
+      </Article>
+    </Main>
+  );
+};
+
+export default PageWrapper;

components/SettingsTabContent.tsx

@@ -1,11 +1,11 @@
 import React from "react";
 import { useState } from "react";
 import * as Switch from "@radix-ui/react-switch";
-import { useStore } from "../lib/store";
+import { useUserStore } from "../state/user/useUserStore";
 
 const SettingsTabContent = () => {
-  const isAutoSwitch = useStore((state) => state.isAutoSwitch);
-  const setAutoSwitch = useStore((state) => state.setAutoSwitch);
+  const isAutoSwitch = useUserStore((state) => state.isAutoSwitch);
+  const setAutoSwitch = useUserStore((state) => state.setAutoSwitch);
 
   return (
     <>