From 4ae52dc4141dfe2c7ddc754e5766f5c353aa3516 Mon Sep 17 00:00:00 2001
From: pon024587-collab <pon024587-collab@users.noreply.github.com>
Date: Sat, 16 May 2026 07:44:07 +0900
Subject: [PATCH] feat: add Login with Unstoppable integration

---
 .../WalletConnect/ConnectModal/index.jsx      | 24 ++++++++++++++++++-
 components/WalletConnect/connectors.jsx       | 12 ++++++++++
 package.json                                  | 14 ++++++-----
 public/wallet-logos/unstoppable.svg           |  4 ++++
 4 files changed, 47 insertions(+), 7 deletions(-)
 create mode 100644 public/wallet-logos/unstoppable.svg

diff --git a/components/WalletConnect/ConnectModal/index.jsx b/components/WalletConnect/ConnectModal/index.jsx
index de0a7829f..96dfce50f 100755
--- a/components/WalletConnect/ConnectModal/index.jsx
+++ b/components/WalletConnect/ConnectModal/index.jsx
@@ -1,5 +1,5 @@
 import React, { useEffect, useContext } from 'react';
-import { metaMask, walletConnect, coinbaseWallet } from '../connectors';
+import { metaMask, walletConnect, coinbaseWallet, uauth } from '../connectors';
 import useWeb3 from '../../../hooks/useWeb3';
 import Image from 'next/image';
 import ModalLarge from '../../Utils/ModalLarge';
@@ -39,6 +39,18 @@ const ConnectModal = ({ closeModal, setShowModal }) => {
     }
   };
 
+  const handleUAuth = async () => {
+    try {
+      if (!uauth) return;
+      const authorization = await uauth.loginWithPopup();
+      if (authorization) {
+        closeModal();
+      }
+    } catch (err) {
+      appState.logger.info(err, accountData?.id, 'ConnectModal.js4');
+    }
+  };
+
   useEffect(() => {
     if (account) {
       closeModal();
@@ -91,6 +103,16 @@ const ConnectModal = ({ closeModal, setShowModal }) => {
           />
           <div className='leading-loose text-lg'>Coinbase</div>
         </button>
+        <button onClick={handleUAuth} className='flex py-4 pl-4 mb-8 w-full gap-8 btn-default'>
+          <Image
+            src={'/wallet-logos/unstoppable.svg'}
+            className='rounded-full'
+            height={40}
+            width={40}
+            alt={'unstoppable domains logo'}
+          />
+          <div className='leading-loose text-lg'>Login with Unstoppable</div>
+        </button>
       </div>
     </ModalLarge>
   );
diff --git a/components/WalletConnect/connectors.jsx b/components/WalletConnect/connectors.jsx
index 60de717ad..61746dd13 100755
--- a/components/WalletConnect/connectors.jsx
+++ b/components/WalletConnect/connectors.jsx
@@ -2,6 +2,8 @@ import { WalletConnect } from '@web3-react/walletconnect-v2';
 import { initializeConnector } from '@web3-react/core';
 import { MetaMask } from '@web3-react/metamask';
 import { CoinbaseWallet } from '@web3-react/coinbase-wallet';
+import UAuthWeb3Modal from '@uauth/web3modal';
+import UAuthSPA from '@uauth/js';
 
 export const [walletConnect, walletConnectHooks] = initializeConnector(
   (actions) =>
@@ -30,3 +32,13 @@ export const [coinbaseWallet, coinbaseHooks] = initializeConnector(
       },
     })
 );
+
+// Unstoppable Domains - Login with Unstoppable
+const uauthOptions = {
+  clientID: '68af7134-faf5-4dce-8535-563fe6c6741e',
+  redirectUri: 'http://localhost:3000',
+  scope: 'openid wallet',
+};
+
+export const uauth = new UAuthSPA(uauthOptions);
+export const uauthWeb3Modal = new UAuthWeb3Modal({ uauth });
diff --git a/package.json b/package.json
index 6c65652fd..eb4ff2323 100644
--- a/package.json
+++ b/package.json
@@ -41,19 +41,21 @@
 		"@metamask/jazzicon": "2.0.0",
 		"@next/eslint-plugin-next": "^13.4.12",
 		"@primer/octicons-react": "18.2.0",
-		"@typeform/embed-react": "^2.30.0",
 		"@prismicio/client": "^7.1.0",
 		"@prismicio/next": "^1.3.3",
 		"@prismicio/react": "^2.7.1",
 		"@react-pdf/renderer": "3.1.7",
-		"@svgr/webpack": "^8.0.1",
-		"@vitejs/plugin-react": "^3.1.0",
-		"@walletconnect/modal": "2.6.0",
 		"@superfluid-finance/sdk-core": "0.6.1",
+		"@svgr/webpack": "^8.0.1",
 		"@tailwindcss/container-queries": "0.1.0",
 		"@testing-library/user-event": "14.4.3",
+		"@typeform/embed-react": "^2.30.0",
 		"@types/uuid": "9.0.1",
+		"@uauth/js": "^3.0.1",
+		"@uauth/web3modal": "^3.0.1",
+		"@vitejs/plugin-react": "^3.1.0",
 		"@walletconnect/ethereum-provider": "2.4.7",
+		"@walletconnect/modal": "2.6.0",
 		"@walletconnect/utils": "1.8.0",
 		"@walletconnect/web3-provider": "1.8.0",
 		"@web3-react/coinbase-wallet": "^8.0.35-beta.0",
@@ -92,12 +94,12 @@
 		"styled-components": "^5.3.8"
 	},
 	"devDependencies": {
-		"@vitejs/plugin-react": "^3.1.0",
 		"@babel/eslint-parser": "7.19.1",
 		"@babel/preset-react": "7.18.6",
 		"@slicemachine/adapter-next": "^0.3.8",
 		"@testing-library/jest-dom": "5.16.5",
 		"@testing-library/react": "14.0.0",
+		"@vitejs/plugin-react": "^3.1.0",
 		"@vitest/ui": "^0.29.8",
 		"autoprefixer": "10.4.14",
 		"babel-jest": "29.5.0",
@@ -116,4 +118,4 @@
 	"jest-junit": {
 		"addFileAttribute": "true"
 	}
-}
\ No newline at end of file
+}
diff --git a/public/wallet-logos/unstoppable.svg b/public/wallet-logos/unstoppable.svg
new file mode 100644
index 000000000..395f0e167
--- /dev/null
+++ b/public/wallet-logos/unstoppable.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100">
+  <rect width="100" height="100" rx="20" fill="#2563EB"/>
+  <text x="50" y="68" font-size="60" text-anchor="middle" fill="white" font-family="Arial, sans-serif" font-weight="bold">U</text>
+</svg>