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}
+{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. +
+