feat: custom wallet ui sidebar

.storybook/preview.tsx

@@ -2,16 +2,13 @@ import { Preview } from "@storybook/react";
 import { MemoryRouter } from "react-router-dom";
 
 import { default as GlobalStyles } from "../src/components/GlobalStyles/GlobalStyles";
-import { OnboardContext, useOnboardManager } from "../src/hooks/useOnboard";
 
 const preview: Preview = {
   decorators: [
     (Story) => (
       <MemoryRouter initialEntries={["/"]}>
         <GlobalStyles />
-        <OnboardContext.Provider value={useOnboardManager()}>
-          <Story />
-        </OnboardContext.Provider>
+        <Story />
       </MemoryRouter>
     ),
   ],

e2e/wallet-setup/connected.setup.ts

@@ -20,12 +20,12 @@ export default defineWalletSetup(MM_PASSWORD, async (context, walletPage) => {
   // Go to a locally hosted MetaMask Test Dapp.
   await page.goto(E2E_DAPP_URL);
 
-  // Connect via web3-onboard modal
+  // Connect via wallet
   await page
     .getByRole("banner")
     .locator(page.getByRole("button", { name: "Connect" }))
     .click();
-  await page.getByRole("button", { name: "MetaMask" }).click();
+  await page.getByText("MetaMask").click();
 
   await metamask.connectToDapp(["Account 1"]);
 });

package.json

@@ -25,14 +25,6 @@
     "@uniswap/sdk-core": "^4.2.0",
     "@uniswap/v3-sdk": "^3.11.0",
     "@vercel/kv": "^2.0.0",
-    "@web3-onboard/coinbase": "^2.4.1",
-    "@web3-onboard/core": "^2.24.0",
-    "@web3-onboard/gnosis": "^2.2.0",
-    "@web3-onboard/injected-wallets": "^2.11.1",
-    "@web3-onboard/metamask": "^2.2.0",
-    "@web3-onboard/phantom": "^2.1.1",
-    "@web3-onboard/react": "^2.11.0",
-    "@web3-onboard/walletconnect": "^2.4.6",
     "axios": "^0.27.2",
     "ethers": "5.7.2",
     "framer-motion": "^11.3.19",
@@ -43,7 +35,7 @@
     "react": "v18",
     "react-dom": "v18",
     "react-feather": "^2.0.9",
-    "react-pro-sidebar": "^1.1.0-alpha.1",
+    "react-pro-sidebar": "^1.1.0",
     "react-router-dom": "v5",
     "react-tooltip": "^5.18.0",
     "superstruct": "^0.15.4",

src/Routes.tsx

@@ -63,7 +63,6 @@ const warningMessage = `
 `;
 
 function useRoutes() {
-  const [openSidebar, setOpenSidebar] = useState(false);
   const [enableACXBanner, setEnableACXBanner] = useState(true);
   const { provider, isContractAddress } = useConnection();
   const location = useLocation();
@@ -82,8 +81,6 @@ function useRoutes() {
   }, [location.pathname, history]);
 
   return {
-    openSidebar,
-    setOpenSidebar,
     provider,
     error,
     removeError,
@@ -99,8 +96,6 @@ function useRoutes() {
 // Need this component for useLocation hook
 const Routes: React.FC = () => {
   const {
-    openSidebar,
-    setOpenSidebar,
     error,
     removeError,
     location,
@@ -140,12 +135,8 @@ const Routes: React.FC = () => {
       {isContractAddress && (
         <SuperHeader size="lg">{warningMessage}</SuperHeader>
       )}
-      <Header
-        openSidebar={openSidebar}
-        setOpenSidebar={setOpenSidebar}
-        transparentHeader={isAirdrop || isHomepage}
-      />
-      <Sidebar openSidebar={openSidebar} setOpenSidebar={setOpenSidebar} />
+      <Header transparentHeader={isAirdrop || isHomepage} />
+      <Sidebar />
       <ScrollToTop />
       <Suspense fallback={<BouncingDotsLoader />}>
         <Switch>

src/components/Header/Header.tsx

@@ -16,6 +16,7 @@ import MenuToggle from "./MenuToggle";
 import { enableMigration } from "utils";
 import useScrollPosition from "hooks/useScrollPosition";
 import { isChildPath } from "./utils";
+import { useSidebarContext } from "hooks/useSidebarContext";
 
 const LINKS = !enableMigration
   ? [
@@ -27,21 +28,16 @@ const LINKS = !enableMigration
   : [];
 
 interface Props {
-  openSidebar: boolean;
-  setOpenSidebar: React.Dispatch<React.SetStateAction<boolean>>;
   transparentHeader?: boolean;
 }
 
-const Header: React.FC<Props> = ({
-  openSidebar,
-  setOpenSidebar,
-  transparentHeader,
-}) => {
+const Header: React.FC<Props> = ({ transparentHeader }) => {
   const location = useLocation();
   const scrollPosition = useScrollPosition();
+  const { isOpen, openSidebar, closeSidebar } = useSidebarContext();
 
   const toggleMenu = () => {
-    setOpenSidebar((prevValue) => !prevValue);
+    isOpen ? closeSidebar() : openSidebar();
   };
 
   return (
@@ -77,8 +73,8 @@ const Header: React.FC<Props> = ({
       </Navigation>
       <Spacing />
       <WalletWrapper>
-        <Wallet setOpenSidebar={setOpenSidebar} />
-        <MobileNavigation animate={openSidebar ? "open" : "closed"}>
+        <Wallet />
+        <MobileNavigation animate={isOpen ? "open" : "closed"}>
           <MenuToggle toggle={toggleMenu} />
         </MobileNavigation>
       </WalletWrapper>

src/components/Header/MenuToggle.tsx

@@ -1,6 +1,7 @@
 import { FC } from "react";
 import styled from "@emotion/styled";
 import { ReactComponent as HamburgerIcon } from "assets/icons/hamburger.svg";
+import { COLORS } from "utils";
 
 interface MenuToggleProps {
   toggle: () => void;
@@ -17,19 +18,18 @@ const MenuToggle: FC<MenuToggleProps> = ({ toggle }) => {
 export default MenuToggle;
 
 const CloseButton = styled.button`
-  position: relative;
+  cursor: pointer;
+
+  display: flex;
   width: 40px;
   height: 40px;
-  padding: 0;
-  margin: 0;
-  display: flex;
   justify-content: center;
   align-items: center;
-  background-color: transparent;
-  border: 1px solid #4c4e57;
-  border-radius: 20px;
-  cursor: pointer;
-  outline: none;
+  gap: 6px;
+
+  border-radius: 12px;
+  border: 1px solid ${COLORS["grey-500"]};
+  background: #2d2e33;
 
   :hover {
     border: 1px solid #e0f3ff;