diff --git a/.env.sample b/.env.sample index 0db8a520..a68dd515 100644 --- a/.env.sample +++ b/.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= diff --git a/package.json b/package.json index 895d0672..6a3a41a1 100644 --- a/package.json +++ b/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", diff --git a/src/assets/logos/unstoppableDomainsLogo.svg b/src/assets/logos/unstoppableDomainsLogo.svg new file mode 100644 index 00000000..18f48def --- /dev/null +++ b/src/assets/logos/unstoppableDomainsLogo.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/elements/walletConnect/WalletConnectButton.tsx b/src/elements/walletConnect/WalletConnectButton.tsx index aad5d77b..286d6b3d 100644 --- a/src/elements/walletConnect/WalletConnectButton.tsx +++ b/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 ? ( diff --git a/src/services/web3/wallet/connectors.ts b/src/services/web3/wallet/connectors.ts index 04c1a402..801990a7 100644 --- a/src/services/web3/wallet/connectors.ts +++ b/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 }, +}); diff --git a/src/services/web3/wallet/hooks.ts b/src/services/web3/wallet/hooks.ts index 7004a428..6075e495 100644 --- a/src/services/web3/wallet/hooks.ts +++ b/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(''); + 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; +}; diff --git a/src/services/web3/wallet/utils.ts b/src/services/web3/wallet/utils.ts index afd8cd6c..2e5b6480 100644 --- a/src/services/web3/wallet/utils.ts +++ b/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', diff --git a/yarn.lock b/yarn.lock index c0688f49..45867318 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1331,7 +1331,7 @@ minimatch "^3.1.2" strip-json-comments "^3.1.1" -"@ethersproject/abi@5.6.4", "@ethersproject/abi@^5.6.3": +"@ethersproject/abi@5.6.4", "@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/common@2.2.0": + version "2.2.0" + resolved "https://registry.yarnpkg.com/@uauth/common/-/common-2.2.0.tgz#b4ee1cee0c2a5b9239f3564d455dfb0166312b3b" + integrity sha512-A4z808W1eCpVuW9tbiSkSO3oy/g3rLUBtVCUq3gnsp2CX/8ea13Y++mWxzpGby2OZX76HVKuZD14Etpj5wProg== + +"@uauth/js@2.2.0": + 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 @@ bn.js@4.11.8: 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== + js-sha3@0.8.0, js-sha3@^0.8.0: version "0.8.0" resolved "https://registry.yarnpkg.com/js-sha3/-/js-sha3-0.8.0.tgz#b9b7a5da73afad7dedd0f8c463954cbde6818840"