feat: add Login with Unstoppable Domains integration

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>
   );

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 });

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"
 	}
-}
+}