From 727801622b053a3271d068ca7f68578e81e923c3 Mon Sep 17 00:00:00 2001
From: Pavel Fokin <pavel.fokin.dev@gmail.com>
Date: Mon, 16 Jun 2025 14:30:31 +0200
Subject: [PATCH 1/2] Add basic 'sign-in' page

---
 components/Layout/Header/index.js |   4 +
 components/SignForm.js            |   2 +
 pages/auth/connect-wallet.js      | 127 ++++++++++++++++++++++++++++++
 3 files changed, 133 insertions(+)
 create mode 100644 pages/auth/connect-wallet.js

diff --git a/components/Layout/Header/index.js b/components/Layout/Header/index.js
index fb54f3f8..ff4ee2a3 100644
--- a/components/Layout/Header/index.js
+++ b/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>
diff --git a/components/SignForm.js b/components/SignForm.js
index 1b081c03..fe92a6b3 100644
--- a/components/SignForm.js
+++ b/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
diff --git a/pages/auth/connect-wallet.js b/pages/auth/connect-wallet.js
new file mode 100644
index 00000000..01920b1c
--- /dev/null
+++ b/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>
+  )
+}

From 1015afa097c574606bb9af7f4faf639be62286a0 Mon Sep 17 00:00:00 2001
From: Pavel Fokin <pavel.fokin.dev@gmail.com>
Date: Mon, 16 Jun 2025 14:31:29 +0200
Subject: [PATCH 2/2] Fix styles to work with sign-in modal

---
 styles/components/signForm.scss | 2 +-
 styles/ui.scss                  | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/styles/components/signForm.scss b/styles/components/signForm.scss
index db52dc7f..0bd6a7aa 100644
--- a/styles/components/signForm.scss
+++ b/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;
diff --git a/styles/ui.scss b/styles/ui.scss
index e6ec9b1e..6d9025bd 100644
--- a/styles/ui.scss
+++ b/styles/ui.scss
@@ -99,7 +99,7 @@ body.dark {
   .content-text,
   .content-center,
   .content-profile {
-    z-index: 1;
+    // z-index: 1;
     position: relative;
   }