Page MenuHomePhabricator
Files F3491803

D6570.id22069.diff
No OneTemporary
Actions

D6570.id22069.diff
View Options

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,16 @@
);
}
+function useENSName(username: string): string {
+ const usersObjArr = React.useMemo(() => [{ username }], [username]);
+ const [potentiallyENSUser] = useENSNames(usersObjArr);
+ invariant(
+ typeof potentiallyENSUser.username === 'string',
+ 'username returned from useENSNames will be of type string',
+ );
+ return potentiallyENSUser.username;
+}
+
function useStringForUser(
user: ?{ +username?: ?string, +isViewer?: ?boolean, ... },
): ?string {
@@ -125,4 +135,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 (
+ <div className={css.container}>
+ <p>{potentiallyENSName}</p>
+ </div>
+ );
+}
+
+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 @@
<div className={css.siweLoginFormContainer}>
<h4>Sign in with Ethereum</h4>
<HeaderSeparator />
+ <ConnectedWalletInfo />
+ <br />
<div className={css.connectButtonContainer}>
<ConnectButton />
</div>
- <p>{siweMessageSigningExplanationStatements}</p>
- <p>
- By signing up, you agree to our{' '}
- <a href="https://comm.app/terms">Terms of Use</a> &{' '}
- <a href="https://comm.app/privacy">Privacy Policy</a>.
- </p>
+ <div className={css.messageSigningStatements}>
+ <p>{siweMessageSigningExplanationStatements}</p>
+ <p>
+ By signing up, you agree to our{' '}
+ <a href="https://comm.app/terms">Terms of Use</a> &{' '}
+ <a href="https://comm.app/privacy">Privacy Policy</a>.
+ </p>
+ </div>
<Button variant="filled" onClick={onSignInButtonClick}>
Sign in using this wallet
</Button>
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;

File Metadata

Mime Type
text/plain
Expires
Thu, Dec 19, 8:44 PM (20 h, 48 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2678791
Default Alt Text
D6570.id22069.diff (3 KB)

Event Timeline