fix(mobile style): fix wallet modal style

ringecosystem · Aug 19, 2024 · 8ae81e9 · 8ae81e9
1 parent 1d2b9d9
commit 8ae81e9
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 20 deletions.
diff --git a/src/components/header.tsx b/src/components/header.tsx
@@ -11,8 +11,15 @@ import { useAccount } from "wagmi";
 import { useTransfer } from "@/hooks";
 import { parseCross } from "@/utils";
 import { animated, useTrail } from "@react-spring/web";
+import WalletSelectionModal from "./walletSelectionModal";
 
 export default function Header() {
+  const [connectModal, setConnectModal] = useState(false);
+
+  const handleClose = useCallback(() => {
+    setConnectModal(false);
+  }, []);
+
   const { sender } = useTransfer();
   const [showMenu, setShowMenu] = useState<boolean>(false);
 
@@ -37,7 +44,9 @@ export default function Header() {
         </Link>
       </animated.div>
       <div className="hidden items-center justify-center gap-[10px] lg:flex">
-        <animated.div style={trails[1]}>{!sender ? <WalletButton /> : <AccountButton />}</animated.div>
+        <animated.div style={trails[1]}>
+          {!sender ? <WalletButton openModal={() => setConnectModal(true)} /> : <AccountButton />}
+        </animated.div>
         <animated.div style={trails[2]}>
           <ChainButton />
         </animated.div>
@@ -71,10 +80,16 @@ export default function Header() {
               <p className="text-[14px] leading-[24px]">Asset Hub</p>
               <span className="ml-auto block h-[16px] w-[16px] bg-[url('/images/icons/downarrow-icon.svg')] bg-contain bg-center bg-no-repeat" />
             </div>
-            <div className="flex h-[36px] w-[190px] cursor-pointer items-center gap-[5px] rounded-[10px] bg-white px-[10px]">
-              <span className="block h-[19px] w-[19px] bg-[url('/images/icons/wallet-icon.svg')] bg-contain bg-center bg-no-repeat" />
-              <p className="text-[14px] leading-[24px]">Connect Wallet</p>
-            </div>
+            {!sender ? (
+              <WalletButton
+                openModal={() => {
+                  handleCloseMenu();
+                  setConnectModal(true);
+                }}
+              />
+            ) : (
+              <AccountButton />
+            )}
           </div>
           <div className="mt-auto flex items-center justify-center gap-[10px]">
             {data.social.map((item: any) => (
@@ -88,6 +103,7 @@ export default function Header() {
           </div>
         </div>
       </div>
+      <WalletSelectionModal visible={connectModal} onClose={handleClose} />
     </section>
   );
 }
diff --git a/src/components/walletButton.tsx b/src/components/walletButton.tsx
@@ -1,27 +1,16 @@
 import { useCallback, useState } from "react";
 import WalletSelectionModal from "./walletSelectionModal";
 
-export default function WalletButton() {
-  const [visible, setVisible] = useState(false);
-
-  const handleClose = useCallback(() => {
-    setVisible(false);
-  }, []);
-
-  console.log(visible);
-
+export default function WalletButton({ openModal }: { openModal: () => void }) {
   return (
     <>
       <div
-        onClick={() => {
-          setVisible(true);
-        }}
-        className="flex h-[36px] w-fit cursor-pointer items-center justify-center gap-[5px] rounded-[10px] bg-white px-[10px] hover:shadow-lg"
+        onClick={openModal}
+        className="flex h-[36px] w-[190px] cursor-pointer items-center gap-[5px] rounded-[10px] bg-white px-[10px] hover:shadow-lg lg:w-fit lg:justify-center"
       >
         <span className="block h-[19px] w-[19px] bg-[url('/images/icons/wallet-icon.svg')] bg-contain bg-center bg-no-repeat" />
         <p className="text-[14px] leading-[24px]">Connect Wallet</p>
       </div>
-      <WalletSelectionModal visible={visible} onClose={handleClose} />
     </>
   );
 }
diff --git a/src/components/walletSelectionModal.tsx b/src/components/walletSelectionModal.tsx
@@ -59,7 +59,7 @@ export default function WalletSelectionModal({ visible, onClose }: { visible: bo
       {visible && (
         <div className="fixed left-0 top-0 z-50 h-[100vh] w-[100vw]">
           <div className="flex h-full w-full items-center justify-center bg-[rgba(0,0,0,0.3)]" onClick={onClose}>
-            <div className="flex h-[300px] w-[500px] flex-col items-center justify-between gap-middle rounded-[20px] bg-white p-[20px]">
+            <div className="flex h-[300px] w-[80vw] flex-col items-center justify-between gap-middle rounded-[20px] bg-white p-[20px] lg:w-[500px]">
               <h2 className="text-[20px] font-bold">Select a wallet Type</h2>
               <div className="flex w-full flex-col gap-middle">
                 <button