Integrates Login With Unstoppable using uauth

.env.sample

@@ -6,3 +6,6 @@ REACT_APP_APY_VISION_TOKEN=
 REACT_APP_INTOTHEBLOCK_KEY=
 REACT_APP_BANCOR_DEPLOYER=
 GENERATE_SOURCEMAP=false
+REACT_APP_UNSTOPPABLE_CLIENT_ID=
+REACT_APP_REDIRECT_URI=
+REACT_APP_POST_LOGOUT_REDIRECT_URI=

package.json

@@ -14,6 +14,8 @@
     "@types/react": "^17.0.0",
     "@types/react-dom": "^17.0.0",
     "@types/react-redux": "^7.1.20",
+    "@uauth/web3-react": "^2.2.0",
+    "@web3-react/abstract-connector": "^6.0.7",
     "@web3-react/core": "^6.1.9",
     "@web3-react/fortmatic-connector": "^6.1.6",
     "@web3-react/frame-connector": "^6.0.9",

src/elements/walletConnect/WalletConnectButton.tsx

@@ -2,6 +2,8 @@ import { UseWalletConnect } from './useWalletConnect';
 import { ReactComponent as IconDisconnect } from 'assets/icons/disconnect.svg';
 import { Button, ButtonVariant } from 'components/button/Button';
 import { PopoverV3 } from 'components/popover/PopoverV3';
+import { useState } from 'react';
+import { useUDName } from 'services/web3/wallet/hooks';
 import { ReactNode } from 'react';
 import { Image } from 'components/image/Image';
 import { shortenString } from 'utils/pureFunctions';
@@ -34,6 +36,10 @@ export const WalletConnectButton = ({
   account,
   selectedWallet,
 }: UseWalletConnect) => {
+
+  const udName = useUDName();
+  const buttonText = account ? udName || shortenString(account) : 'Connect';
+  const [isOpen, setIsOpen] = useState(false);
   const loggedIn = !!selectedWallet && !!account;
 
   return loggedIn ? (

src/services/web3/wallet/connectors.ts

@@ -6,6 +6,7 @@ import { WalletLinkConnector } from '@web3-react/walletlink-connector';
 import { WalletConnectConnector } from '@web3-react/walletconnect-connector';
 import { TorusConnector } from '@web3-react/torus-connector';
 import { SafeAppConnector } from '@gnosis.pm/safe-apps-web3-react';
+import { UAuthConnector } from '@uauth/web3-react';
 
 export const ALCHEMY_URL = `https://eth-mainnet.alchemyapi.io/v2/${
   process.env.REACT_APP_ALCHEMY_MAINNET as string
@@ -44,3 +45,11 @@ export const portis = new PortisConnector({
 export const torus = new TorusConnector({
   chainId: 1,
 });
+
+export const uauth = new UAuthConnector({
+  clientID: process.env.REACT_APP_UNSTOPPABLE_CLIENT_ID!,
+  redirectUri: process.env.REACT_APP_REDIRECT_URI!,
+  // postLogoutRedirectUri: process.env.REACT_APP_POST_LOGOUT_REDIRECT_URI!,
+  scope: 'openid wallet',
+  connectors: { injected, walletconnect },
+});

src/services/web3/wallet/hooks.ts

@@ -3,6 +3,9 @@ import { useWeb3React } from '@web3-react/core';
 import { gnosisSafe, injected } from 'services/web3/wallet/connectors';
 import { getAutoLoginLS, setAutoLoginLS } from 'utils/localStorage';
 import { IS_IN_IFRAME } from 'utils/helperFunctions';
+import { find } from 'lodash';
+import { uauth } from './connectors';
+import { SUPPORTED_WALLETS } from './utils';
 
 export const useAutoConnect = () => {
   const { activate, active } = useWeb3React();
@@ -41,3 +44,30 @@ export const useAutoConnect = () => {
 
   return triedAutoLogin;
 };
+
+export const useUDName = (): string => {
+  const { connector } = useWeb3React();
+  const [udUserName, setUdUserName] = useState<string>('');
+  const connectorName = find(SUPPORTED_WALLETS, ['connector', connector])?.name;
+
+  useEffect(() => {
+    const checkUDName = async () => {
+      if (connectorName === 'Unstoppable Domains') {
+        try {
+          const udUser = await uauth.uauth.user();
+          setUdUserName(udUser.sub);
+        } catch (e) {
+          console.error(e);
+          setUdUserName('');
+        }
+      }
+    };
+    void checkUDName();
+
+    return () => {
+      setUdUserName('');
+    };
+  }, [connectorName]);
+
+  return udUserName;
+};

src/services/web3/wallet/utils.ts

@@ -9,6 +9,7 @@ import {
   portis,
   gnosisSafe,
   torus,
+  uauth,
 } from 'services/web3/wallet/connectors';
 
 import metamaskLogo from 'assets/logos/metamask.png';
@@ -22,6 +23,7 @@ import frameLogo from 'assets/logos/frame.png';
 import gnosisSafeLogo from 'assets/logos/gnosisSafe.svg';
 import torusLogo from 'assets/logos/torus.svg';
 import imposterLogo from 'assets/logos/imposter.svg';
+import unstoppableDomains from 'assets/logos/unstoppableDomainsLogo.svg';
 import { isForkAvailable } from '../config';
 import { isMobile } from 'react-device-detect';
 
@@ -114,6 +116,11 @@ export const SUPPORTED_WALLETS: WalletInfo[] = [
     name: 'GnosisSafe',
     icon: gnosisSafeLogo,
   },
+  {
+    connector: uauth,
+    name: 'Unstoppable Domains',
+    icon: unstoppableDomains,
+  },
   {
     connector: frame,
     name: 'Frame',

yarn.lock

@@ -1331,7 +1331,7 @@
     minimatch "^3.1.2"
     strip-json-comments "^3.1.1"
 
-"@ethersproject/[email protected]", "@ethersproject/abi@^5.6.3":
+"@ethersproject/[email protected]", "@ethersproject/abi@^5.0.1", "@ethersproject/abi@^5.6.3":
   version "5.6.4"
   resolved "https://registry.yarnpkg.com/@ethersproject/abi/-/abi-5.6.4.tgz#f6e01b6ed391a505932698ecc0d9e7a99ee60362"
   integrity sha512-TTeZUlCeIHG6527/2goZA6gW5F8Emoc7MrZDC7hhP84aRGvW3TEdTnZR08Ls88YXM1m2SuK42Osw/jSi3uO8gg==
@@ -4102,6 +4102,42 @@
     "@typescript-eslint/types" "5.31.0"
     eslint-visitor-keys "^3.3.0"
 
+"@uauth/[email protected]":
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/@uauth/common/-/common-2.2.0.tgz#b4ee1cee0c2a5b9239f3564d455dfb0166312b3b"
+  integrity sha512-A4z808W1eCpVuW9tbiSkSO3oy/g3rLUBtVCUq3gnsp2CX/8ea13Y++mWxzpGby2OZX76HVKuZD14Etpj5wProg==
+
+"@uauth/[email protected]":
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/@uauth/js/-/js-2.2.0.tgz#f8ec6abd18001a57ac576f8741501fc19ef6c2e8"
+  integrity sha512-j31tF5QxRhj3bF2HfzlfH0dgaEOjxBFoCqZPe2M1i9DPgHgZEm6xS4D66rdYGQNuCsjqPfWo6aUG2xSbM0mQRg==
+  dependencies:
+    "@uauth/common" "2.2.0"
+    "@unstoppabledomains/resolution" "^7.0"
+    global "^4.4.0"
+    jose "^4.5.0"
+
+"@uauth/web3-react@^2.2.0":
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/@uauth/web3-react/-/web3-react-2.2.0.tgz#4b53dd8c770d5134297a35760a18abc8061d5e90"
+  integrity sha512-8WNVPx8mWIqhqYH0alfrbDzCMwWsiNH/q+pUqT3p7a88knrPo7mfEYmlCHlnEE4HItvWS2PqcZ9+Ev2ak5xDyA==
+  dependencies:
+    "@uauth/js" "2.2.0"
+    "@web3-react/abstract-connector" "^6.0.7"
+    "@web3-react/types" "^6.0.7"
+
+"@unstoppabledomains/resolution@^7.0":
+  version "7.1.4"
+  resolved "https://registry.yarnpkg.com/@unstoppabledomains/resolution/-/resolution-7.1.4.tgz#f3f0f9d2f36b88bf0a3af92c26731a01e5dba94b"
+  integrity sha512-GdXLpP+oRk4lLWMISo7g7gPyKoCONyLoQtYH6GVhXtyY9t+CeHJW2kZ/btcbXg0lmEO6PSr5yYOlDz4wRCq2RA==
+  dependencies:
+    "@ethersproject/abi" "^5.0.1"
+    bn.js "^4.4.0"
+    cross-fetch "^3.1.4"
+    elliptic "^6.5.4"
+    js-sha256 "^0.9.0"
+    js-sha3 "^0.8.0"
+
 "@walletconnect/browser-utils@^1.7.8":
   version "1.7.8"
   resolved "https://registry.yarnpkg.com/@walletconnect/browser-utils/-/browser-utils-1.7.8.tgz#c9e27f69d838442d69ccf53cb38ffc3c554baee2"
@@ -5620,7 +5656,7 @@ [email protected]:
   resolved "https://registry.yarnpkg.com/bn.js/-/bn.js-4.11.8.tgz#2cde09eb5ee341f484746bb0309b3253b1b1442f"
   integrity sha512-ItfYfPLkWHUjckQCk8xC+LwxgK8NYcXywGigJgSwOP8Y2iyWT4f2vsZnoOXTTbo+o5yXmIUJ4gn5538SO5S3gA==
 
-bn.js@^4.0.0, bn.js@^4.1.0, bn.js@^4.11.0, bn.js@^4.11.8, bn.js@^4.11.9:
+bn.js@^4.0.0, bn.js@^4.1.0, bn.js@^4.11.0, bn.js@^4.11.8, bn.js@^4.11.9, bn.js@^4.4.0:
   version "4.12.0"
   resolved "https://registry.yarnpkg.com/bn.js/-/bn.js-4.12.0.tgz#775b3f278efbb9718eec7361f483fb36fbbfea88"
   integrity sha512-c98Bf3tPniI+scsdk237ku1Dc3ujXQTSgyiPUDEOe7tRkhrqridvh8klBv0HCEso1OLOYcHuCv/cS6DNxKH+ZA==
@@ -10970,6 +11006,16 @@ jest@^27.4.3:
     import-local "^3.0.2"
     jest-cli "^27.5.1"
 
+jose@^4.5.0:
+  version "4.8.3"
+  resolved "https://registry.yarnpkg.com/jose/-/jose-4.8.3.tgz#5a754fb4aa5f2806608d083f438e6916b11087da"
+  integrity sha512-7rySkpW78d8LBp4YU70Wb7+OTgE3OwAALNVZxhoIhp4Kscp+p/fBkdpxGAMKxvCAMV4QfXBU9m6l9nX/vGwd2g==
+
+js-sha256@^0.9.0:
+  version "0.9.0"
+  resolved "https://registry.yarnpkg.com/js-sha256/-/js-sha256-0.9.0.tgz#0b89ac166583e91ef9123644bd3c5334ce9d0966"
+  integrity sha512-sga3MHh9sgQN2+pJ9VYZ+1LPwXOxuBJBA5nrR5/ofPfuiJBE2hnjsaN8se8JznOmGLN2p49Pe5U/ttafcs/apA==
+
 [email protected], js-sha3@^0.8.0:
   version "0.8.0"
   resolved "https://registry.yarnpkg.com/js-sha3/-/js-sha3-0.8.0.tgz#b9b7a5da73afad7dedd0f8c463954cbde6818840"