Page Menu
Home
Phorge
Search
Configure Global Search
Log In
Files
F33047915
D6637.1768421007.diff
No One
Temporary
Actions
View File
Edit File
Delete File
View Transforms
Subscribe
Flag For Later
Award Token
Size
2 KB
Referenced Files
None
Subscribers
None
D6637.1768421007.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
@@ -6,18 +6,16 @@
padding: 10px 20px;
border-radius: 8px;
background-color: #282537;
- outline: #302b42 solid 1px;
- transition: background-color 0.25s ease, outline-color 0.25s ease,
- box-shadow 0.25s ease;
+ border: #302b42 solid 1px;
+ transition: background-color 0.2s ease, border 0.2s ease, box-shadow 0.2s ease;
}
div.container:hover {
cursor: pointer;
background-color: #302b42;
- outline: #6a20e3 solid 1px;
+ border: #6a20e3 solid 1px;
box-shadow: 2px 4px 20px #6a20e333;
- transition: background-color 0.25s, outline-color 0.25s ease,
- box-shadow 0.25s ease;
+ transition: background-color 0.2s ease, border 0.2s ease, box-shadow 0.2s ease;
}
div.avatar {
@@ -30,6 +28,10 @@
border-radius: 16px;
}
+div.avatar img {
+ border-radius: 18px;
+}
+
div.address p {
font-size: 18px;
}
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
@@ -2,7 +2,7 @@
import { emojiAvatarForAddress, useAccountModal } from '@rainbow-me/rainbowkit';
import * as React from 'react';
-import { useAccount } from 'wagmi';
+import { useAccount, useEnsAvatar } from 'wagmi';
import { useENSName } from 'lib/hooks/ens-cache.js';
@@ -36,6 +36,18 @@
[emojiAvatar.color],
);
+ const emojiAvatarView = React.useMemo(() => <p>{emojiAvatar.emoji}</p>, [
+ emojiAvatar.emoji,
+ ]);
+
+ const { data: ensAvatarURI } = useEnsAvatar({
+ addressOrName: potentiallyENSName,
+ });
+ const potentiallyENSAvatar = React.useMemo(
+ () => <img src={ensAvatarURI} height="34px" width="34px" />,
+ [ensAvatarURI],
+ );
+
const onClick = React.useCallback(() => {
openAccountModal && openAccountModal();
}, [openAccountModal]);
@@ -43,7 +55,7 @@
return (
<div className={css.container} onClick={onClick} title={potentiallyENSName}>
<div className={css.avatar} style={emojiAvatarStyle}>
- <p>{emojiAvatar.emoji}</p>
+ {ensAvatarURI ? potentiallyENSAvatar : emojiAvatarView}
</div>
<div className={css.address}>
<p>{shortenAddressToFitWidth(potentiallyENSName)}</p>
diff --git a/web/account/log-in-form.css b/web/account/log-in-form.css
--- a/web/account/log-in-form.css
+++ b/web/account/log-in-form.css
@@ -7,7 +7,7 @@
padding: 20px 20px;
border-radius: 16px;
background-color: #191723;
- outline: #282537 solid 1px;
+ border: #282537 solid 1px;
}
div.modal_body h4 {
File Metadata
Details
Attached
Mime Type
text/plain
Expires
Wed, Jan 14, 8:03 PM (11 h, 27 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
5933717
Default Alt Text
D6637.1768421007.diff (2 KB)
Attached To
Mode
D6637: [web] Add ENSAvatar to `ConnectedWalletInfo` if set
Attached
Detach File
Event Timeline
Log In to Comment