Page MenuHomePhorge
Files F33035671

D6618.1768408989.diff
No OneTemporary
Actions

Size
2 KB
Referenced Files
None
Subscribers
None

D6618.1768408989.diff
View Options

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 (
<div className={css.container}>
- <p>{potentiallyENSName}</p>
+ <div className={css.avatar} style={emojiAvatarStyle}>
+ <p>{emojiAvatar.emoji}</p>
+ </div>
+ <div className={css.address}>
+ <p>{potentiallyENSName}</p>
+ </div>
+ <div className={css.chevronDown}>
+ <SWMansionIcon icon="chevron-down" size={18} />
+ </div>
</div>
);
}

File Metadata

Mime Type
text/plain
Expires
Wed, Jan 14, 4:43 PM (6 h, 47 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
5932917
Default Alt Text
D6618.1768408989.diff (2 KB)

Event Timeline