Add connect wallet page

components/Layout/Header/index.js

@@ -23,6 +23,7 @@ import CurrencyTable from './CurrencyTable'
 import NetworkTable from './NetworkTable'
 import MobileMenu from './MobileMenu'
 import { FaAngleDown } from 'react-icons/fa'
+import { FaWallet } from 'react-icons/fa'
 import { IoIosRocket } from 'react-icons/io'
 
 import LogoSmall from '../LogoSmall'
@@ -522,6 +523,9 @@ export default function Header({
             )}
 
             <hr className="hr" />
+            <Link href="/auth/connect-wallet" className="link">
+              <FaWallet /> Connect Wallet
+            </Link>
             <Link href="/admin">
               <IoIosRocket style={{ fontSize: '1.2em', marginBottom: '-2px' }} /> Bithomp Pro
             </Link>

components/SignForm.js

@@ -125,6 +125,8 @@ export default function SignForm({
     //eslint-disable-next-line react-hooks/exhaustive-deps
   }, [uuid])
 
+  if (!signRequest) return null
+
   const txSend = (options) => {
     //when the request is wallet specific it's a priority, logout if not matched
     //when request is not wallet specific, use the account wallet if loggedin

pages/auth/connect-wallet.js

@@ -0,0 +1,127 @@
+import { useState } from 'react'
+
+import { useTranslation } from 'next-i18next'
+import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
+import Image from 'next/image'
+
+import SignForm from '../../components/SignForm'
+
+export async function getServerSideProps(context) {
+  const { locale } = context
+  return {
+    props: {
+      ...(await serverSideTranslations(locale, ['common']))
+    }
+  }
+}
+
+export default function ConnectWallet() {
+  const { t } = useTranslation('common')
+
+  const [account, setAccount] = useState(null)
+  const [signRequest, setSignRequest] = useState(null)
+  const [refreshPage, setRefreshPage] = useState('')
+  const [wcSession, setWcSession] = useState(null)
+
+  const handleWalletClick = (wallet) => {
+    setSignRequest({
+      wallet: wallet,
+      redirectName: 'connect-wallet'
+    })
+  }
+
+  return (
+    <main className="content-center">
+      <h1>{t('connect-wallet.title', 'Connect your crypto wallet')}</h1>
+      <p>
+        {t(
+          'connect-wallet.description',
+          'Connect your crypto wallet to the blockchain explorer to start exploring XRP Ledger.'
+        )}
+      </p>
+      <section className="mx-auto max-w-sm">
+        <ul className="list-none flex flex-col gap-2">
+          <li className="flex justify-center items-center gap-2 border-2 border-black p-2 hover:shadow-[4px_4px_0px_0px] transition-shadow duration-300">
+            <span onClick={() => handleWalletClick('xaman')}>
+              <Image src="/images/wallets/xaman.png" alt="Xaman" width={24} height={24} />
+              <span>Xaman</span>
+            </span>
+          </li>
+          <li
+            onClick={() => handleWalletClick('crossmark')}
+            className="flex justify-center items-center gap-2 border-2 border-black p-2 hover:shadow-[4px_4px_0px_0px] transition-shadow duration-300"
+          >
+            <span>
+              <Image
+                src="/images/wallets/crossmark.png"
+                className="wallet-logo"
+                alt="Crossmark Wallet"
+                height={24}
+                width={24}
+              />
+              Crossmark
+            </span>
+          </li>
+          <li className="flex justify-center items-center gap-2 border-2 border-black p-2 hover:shadow-[4px_4px_0px_0px] transition-shadow duration-300">
+            <span onClick={() => handleWalletClick('gemwallet')}>
+              <Image
+                src="/images/wallets/gemwallet.svg"
+                className="wallet-logo"
+                alt="GemWallet"
+                height={24}
+                width={24}
+              />
+              GemWallet
+            </span>
+          </li>
+          <li className="flex justify-center items-center gap-2 border-2 border-black p-2 hover:shadow-[4px_4px_0px_0px] transition-shadow duration-300">
+            <span onClick={() => handleWalletClick('metamask')}>
+              <Image
+                src="/images/wallets/metamask.svg"
+                className="wallet-logo"
+                alt="Metamask Wallet"
+                height={24}
+                width={24}
+              />
+              Metamask
+            </span>
+          </li>
+          <li className="flex justify-center items-center gap-2 border-2 border-black p-2 hover:shadow-[4px_4px_0px_0px] transition-shadow duration-300">
+            <span onClick={() => handleWalletClick('ledgerwallet')}>
+              <Image
+                src="/images/wallets/ledgerwallet.svg"
+                className="wallet-logo"
+                alt="Ledger Wallet"
+                height={24}
+                width={24}
+              />
+              Ledger
+            </span>
+          </li>
+          <li className="flex justify-center items-center gap-2 border-2 border-black p-2 hover:shadow-[4px_4px_0px_0px] transition-shadow duration-300">
+            <span onClick={() => handleWalletClick('trezor')}>
+              <Image
+                src="/images/wallets/trezor.svg"
+                className="wallet-logo"
+                alt="Trezor Wallet"
+                height={24}
+                width={24}
+              />
+              Trezor
+            </span>
+          </li>
+        </ul>
+      </section>
+      <SignForm
+        signRequest={signRequest}
+        setSignRequest={setSignRequest}
+        refreshPage={refreshPage}
+        setRefreshPage={setRefreshPage}
+        account={account}
+        setAccount={setAccount}
+        wcSession={wcSession}
+        setWcSession={setWcSession}
+      />
+    </main>
+  )
+}

styles/components/signForm.scss

@@ -1,6 +1,6 @@
 .sign-in-form {
   background: rgba(black, 0.6);
-  position: absolute;
+  position: fixed;
   top: 0;
   right: 0;
   bottom: 0;

styles/ui.scss

@@ -99,7 +99,7 @@ body.dark {
   .content-text,
   .content-center,
   .content-profile {
-    z-index: 1;
+    // z-index: 1;
     position: relative;
   }