diff --git a/web/account/connected-wallet-info.css b/web/account/connected-wallet-info.css --- a/web/account/connected-wallet-info.css +++ b/web/account/connected-wallet-info.css @@ -1,12 +1,35 @@ div.container { display: flex; - background-color: #282537; - justify-content: center; + flex-direction: row; + align-items: center; + justify-content: space-between; padding: 10px 20px; border-radius: 8px; + background-color: #282537; outline: #302b42 solid 1px; } +div.avatar { + display: flex; + align-items: center; + justify-content: center; + height: 16px; + width: 16px; + padding: 8px; + border-radius: 16px; +} + +div.address p { + font-size: 18px; +} + +div.chevronDown { + display: flex; + align-content: center; + justify-content: center; + color: white; +} + div p { padding-bottom: 0; } diff --git a/web/account/connected-wallet-info.react.js b/web/account/connected-wallet-info.react.js --- a/web/account/connected-wallet-info.react.js +++ b/web/account/connected-wallet-info.react.js @@ -1,19 +1,44 @@ // @flow +import { emojiAvatarForAddress } from '@rainbow-me/rainbowkit'; import * as React from 'react'; import { useAccount } from 'wagmi'; import { useENSName } from 'lib/hooks/ens-cache.js'; +import SWMansionIcon from '../SWMansionIcon.react.js'; import css from './connected-wallet-info.css'; +type RainbowKitEmojiAvatar = { + +color: string, + +emoji: string, +}; + function ConnectedWalletInfo(): React.Node { const { address } = useAccount(); const potentiallyENSName = useENSName(address); + const emojiAvatar: RainbowKitEmojiAvatar = React.useMemo( + () => emojiAvatarForAddress(address), + [address], + ); + + const emojiAvatarStyle = React.useMemo( + () => ({ backgroundColor: emojiAvatar.color }), + [emojiAvatar.color], + ); + return (
-

{potentiallyENSName}

+
+

{emojiAvatar.emoji}

+
+
+

{potentiallyENSName}

+
+
+ +
); }