Page MenuHomePhabricator

D6570.id21997.diff
No OneTemporary

D6570.id21997.diff

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,18 @@
+// @flow
+
+import * as React from 'react';
+import { useAccount, useEnsName } from 'wagmi';
+
+import css from './connected-wallet-info.css';
+
+function ConnectedWalletInfo(): React.Node {
+ const { address } = useAccount();
+ const { data } = useEnsName({ address });
+ return (
+ <div className={css.container}>
+ <p>{data ?? address}</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, 9:14 PM (21 h, 24 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2678881
Default Alt Text
D6570.id21997.diff (2 KB)

Event Timeline