diff --git a/lib/hooks/ens-cache.js b/lib/hooks/ens-cache.js --- a/lib/hooks/ens-cache.js +++ b/lib/hooks/ens-cache.js @@ -104,6 +104,12 @@ ); } +function useENSName(username: string): ?string { + const usersObjArr = React.useMemo(() => [{ username }], [username]); + const [potentiallyENSUser] = useENSNames(usersObjArr); + return potentiallyENSUser.username; +} + function useStringForUser( user: ?{ +username?: ?string, +isViewer?: ?boolean, ... }, ): ?string { @@ -125,4 +131,4 @@ } } -export { useENSNames, useStringForUser }; +export { useENSNames, useENSName, useStringForUser }; diff --git a/web/account/connected-wallet-info.css b/web/account/connected-wallet-info.css new file mode 100644 --- /dev/null +++ b/web/account/connected-wallet-info.css @@ -0,0 +1,17 @@ +div.container { + display: flex; + background-color: #282537; + justify-content: center; + padding: 10px 20px; + border-radius: 8px; + outline: #302b42 solid 1px; +} + +div p { + padding-bottom: 0; +} + +div.container p { + padding-bottom: 0; + font-weight: bold; +} diff --git a/web/account/connected-wallet-info.react.js b/web/account/connected-wallet-info.react.js new file mode 100644 --- /dev/null +++ b/web/account/connected-wallet-info.react.js @@ -0,0 +1,21 @@ +// @flow + +import * as React from 'react'; +import { useAccount } from 'wagmi'; + +import { useENSName } from 'lib/hooks/ens-cache.js'; + +import css from './connected-wallet-info.css'; + +function ConnectedWalletInfo(): React.Node { + const { address } = useAccount(); + const potentiallyENSName = useENSName(address); + + return ( +
+

{potentiallyENSName ?? address}

+
+ ); +} + +export default ConnectedWalletInfo; diff --git a/web/account/siwe-login-form.react.js b/web/account/siwe-login-form.react.js --- a/web/account/siwe-login-form.react.js +++ b/web/account/siwe-login-form.react.js @@ -34,6 +34,7 @@ import { useSelector } from '../redux/redux-utils'; import { webLogInExtraInfoSelector } from '../selectors/account-selectors.js'; import SWMansionIcon from '../SWMansionIcon.react.js'; +import ConnectedWalletInfo from './connected-wallet-info.react.js'; import HeaderSeparator from './header-separator.react.js'; import css from './siwe.css'; @@ -145,15 +146,19 @@

Sign in with Ethereum

+ +
-

{siweMessageSigningExplanationStatements}

-

- By signing up, you agree to our{' '} - Terms of Use &{' '} - Privacy Policy. -

+
+

{siweMessageSigningExplanationStatements}

+

+ By signing up, you agree to our{' '} + Terms of Use &{' '} + Privacy Policy. +

+
diff --git a/web/account/siwe.css b/web/account/siwe.css --- a/web/account/siwe.css +++ b/web/account/siwe.css @@ -8,10 +8,13 @@ div.siweLoginFormContainer p { color: white; font-family: sans-serif; - padding-bottom: 20px; font-size: 15px; } +div.messageSigningStatements p { + padding-bottom: 20px; +} + div.siweLoginFormContainer { display: flex; flex-direction: column;