remove native asset from token list and update navbar

balancer · Aug 5, 2024 · 4f9ad0b · 4f9ad0b
1 parent e64b671
commit 4f9ad0b
Show file tree

Hide file tree

Showing 6 changed files with 52 additions and 20 deletions.
diff --git a/packages/nextjs/components/Header.tsx b/packages/nextjs/components/Header.tsx
@@ -20,10 +20,10 @@ export const menuLinks: HeaderMenuLink[] = [
     label: "🐮 CoW AMMs",
     href: "/cow",
   },
-  {
-    label: "🐞 Debug Contracts",
-    href: "/debug",
-  },
+  // {
+  //   label: "🐞 Debug Contracts",
+  //   href: "/debug",
+  // },
 ];
 
 export const HeaderMenuLinks = () => {

diff --git a/packages/nextjs/components/SwitchTheme.tsx b/packages/nextjs/components/SwitchTheme.tsx
@@ -36,10 +36,10 @@ export const SwitchTheme = ({ className }: { className?: string }) => {
       <label
         onClick={handleToggle}
         htmlFor="theme-toggle"
-        className={`mr-2 swap swap-rotate ${!isDarkMode ? "swap-active" : ""}`}
+        className={`btn btn-secondary rounded-xl swap swap-rotate ${!isDarkMode ? "swap-active" : ""}`}
       >
-        <SunIcon className="swap-on h-7 w-7" />
-        <MoonIcon className="swap-off h-7 w-7" />
+        <SunIcon className="swap-on h-6 w-6" />
+        <MoonIcon className="swap-off h-6 w-6" />
       </label>
     </div>
   );

diff --git a/packages/nextjs/components/common/TokenSelectModal.tsx b/packages/nextjs/components/common/TokenSelectModal.tsx
@@ -19,13 +19,13 @@ export const TokenSelectModal: React.FC<ModalProps> = ({ tokenOptions, setIsModa
       <div className="absolute w-full h-full" onClick={() => setIsModalOpen(false)} />
       <div className="relative w-[500px]">
         <div className="relative bg-base-300 border border-base-200 rounded-lg">
-          <div className="p-4">
+          <div className="p-4 mb-2">
             <XMarkIcon
               className="absolute top-4 right-4 w-7 h-7 hover:cursor-pointer"
               onClick={() => setIsModalOpen(false)}
             />
 
-            <h5 className="font-bold text-xl mb-5">Select Token</h5>
+            <h5 className="font-bold text-xl mb-3">Select Token</h5>
             <input
               type="text"
               placeholder="Search by symbol..."
@@ -34,9 +34,9 @@ export const TokenSelectModal: React.FC<ModalProps> = ({ tokenOptions, setIsModa
               className="w-full input input-bordered rounded-xl bg-base-200 disabled:bg-base-300 px-5 h-[52px] text-lg"
             />
           </div>
-          <div className="flex flex-col gap-0 border-t border-base-content">
+          <div>
             <VirtualList
-              className="flex flex-col gap-0 border-t border-base-content"
+              className="flex flex-col gap-0 border-t border-neutral-500"
               width="100%"
               height={500}
               itemCount={filteredTokenOptions.length}

diff --git a/...ages/nextjs/components/scaffold-eth/RainbowKitCustomConnectButton/AddressInfoDropdown.tsx b/...ages/nextjs/components/scaffold-eth/RainbowKitCustomConnectButton/AddressInfoDropdown.tsx
@@ -48,7 +48,7 @@ export const AddressInfoDropdown = ({
   return (
     <>
       <details ref={dropdownRef} className="dropdown dropdown-end leading-3">
-        <summary tabIndex={0} className="btn btn-secondary btn-sm pl-0 pr-2 shadow-md dropdown-toggle gap-0 !h-auto">
+        <summary tabIndex={0} className="btn btn-secondary rounded-xl shadow-md dropdown-toggle gap-0 !h-auto">
           <BlockieAvatar address={checkSumAddress} size={30} ensImage={ensAvatar} />
           <span className="ml-2 mr-1">
             {isENS(displayName) ? displayName : checkSumAddress?.slice(0, 6) + "..." + checkSumAddress?.slice(-4)}

diff --git a/packages/nextjs/components/scaffold-eth/RainbowKitCustomConnectButton/index.tsx b/packages/nextjs/components/scaffold-eth/RainbowKitCustomConnectButton/index.tsx
@@ -1,23 +1,35 @@
 "use client";
 
 // @refresh reset
-import { Balance } from "../Balance";
+// import { Balance } from "../Balance";
+import { useRef, useState } from "react";
 import { AddressInfoDropdown } from "./AddressInfoDropdown";
 import { AddressQRCodeModal } from "./AddressQRCodeModal";
+import { NetworkOptions } from "./NetworkOptions";
 import { WrongNetworkDropdown } from "./WrongNetworkDropdown";
 import { ConnectButton } from "@rainbow-me/rainbowkit";
 import { Address } from "viem";
 import { useNetworkColor } from "~~/hooks/scaffold-eth";
+import { useOutsideClick } from "~~/hooks/scaffold-eth";
 import { useTargetNetwork } from "~~/hooks/scaffold-eth/useTargetNetwork";
 import { getBlockExplorerAddressLink } from "~~/utils/scaffold-eth";
 
 /**
  * Custom Wagmi Connect Button (watch balance + custom design)
  */
 export const RainbowKitCustomConnectButton = () => {
+  const [selectingNetwork, setSelectingNetwork] = useState(false);
+  const dropdownRef = useRef<HTMLDetailsElement>(null);
+
   const networkColor = useNetworkColor();
   const { targetNetwork } = useTargetNetwork();
 
+  const closeDropdown = () => {
+    setSelectingNetwork(false);
+    dropdownRef.current?.removeAttribute("open");
+  };
+  useOutsideClick(dropdownRef, closeDropdown);
+
   return (
     <ConnectButton.Custom>
       {({ account, chain, openConnectModal, mounted }) => {
@@ -43,11 +55,28 @@ export const RainbowKitCustomConnectButton = () => {
 
               return (
                 <>
-                  <div className="flex flex-col items-center mr-1">
-                    <Balance address={account.address as Address} className="min-h-0 h-auto" />
-                    <span className="text-xs" style={{ color: networkColor }}>
-                      {chain.name}
-                    </span>
+                  <div className="flex flex-col items-center mx-5">
+                    <details ref={dropdownRef} className="dropdown dropdown-end leading-3">
+                      <summary
+                        onClick={() => setSelectingNetwork(true)}
+                        tabIndex={0}
+                        className="btn btn-secondary rounded-xl text-lg shadow-md dropdown-toggle gap-0 !h-auto"
+                        style={{ color: networkColor }}
+                      >
+                        {/* <button
+                          className="text-lg bg-base-200 px-4 py-1.5 rounded-xl hover:bg-base-100 hover:cursor-pointer"
+                          style={{ color: networkColor }}
+                        > */}
+                        {chain.name}
+                        {/* </button> */}
+                      </summary>
+                      <ul
+                        tabIndex={0}
+                        className="dropdown-content menu z-[2] p-2 mt-2 shadow-center shadow-accent bg-base-200 rounded-box gap-1"
+                      >
+                        <NetworkOptions hidden={!selectingNetwork} />
+                      </ul>
+                    </details>
                   </div>
                   <AddressInfoDropdown
                     address={account.address as Address}

diff --git a/packages/nextjs/hooks/token/useFetchTokenList.ts b/packages/nextjs/hooks/token/useFetchTokenList.ts
@@ -37,16 +37,19 @@ export const useFetchTokenList = () => {
         throw new Error("Error fetching token list from balancer API");
       }
 
-      // Hardcoded token list for sepolia testing
       if (chainName === "SEPOLIA") {
+        // Only use faucet tokens for sepolia testing
         return SEPOLIA_FAUCET_TOKENS;
       } else {
-        return json.data.tokenGetTokens;
+        // Filter out native assets
+        return json.data.tokenGetTokens.filter((token: Token) => token.address !== NATIVE_ASSET_ADDRESS);
       }
     },
   });
 };
 
+const NATIVE_ASSET_ADDRESS = "0xeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee";
+
 const chainId = sepolia.id;
 const SEPOLIA_FAUCET_TOKENS = [
   {