Page MenuHomePhorge
Files F33306361

D6003.1768794391.diff
No OneTemporary
Actions

Size
2 KB
Referenced Files
None
Subscribers
None

D6003.1768794391.diff
View Options

diff --git a/landing/siwe.css b/landing/siwe.css
--- a/landing/siwe.css
+++ b/landing/siwe.css
@@ -1,17 +1,6 @@
-.wrapper {
- display: flex;
- flex-wrap: wrap;
- flex-direction: column;
- justify-content: center;
- align-items: center;
- align-content: center;
- padding-top: 20px;
- padding-bottom: 50px;
-}
-
-.spacer {
- height: 10px;
- width: 10px;
+html,
+body {
+ background: #242529 !important;
}
.button {
@@ -35,7 +24,9 @@
}
}
-.h1 {
- text-align: center;
- margin-bottom: 20px;
+body > div > :global(div.iekbcc0) > div {
+ bottom: initial !important;
+}
+body > div > :global(div.iekbcc0) > div > div > div > div {
+ border: 0 !important;
}
diff --git a/landing/siwe.react.js b/landing/siwe.react.js
--- a/landing/siwe.react.js
+++ b/landing/siwe.react.js
@@ -1,11 +1,13 @@
// @flow
import {
- ConnectButton,
+ useConnectModal,
getDefaultWallets,
RainbowKitProvider,
+ darkTheme,
} from '@rainbow-me/rainbowkit';
import invariant from 'invariant';
+import _merge from 'lodash/fp/merge';
import * as React from 'react';
import { SiweMessage } from 'siwe';
import '@rainbow-me/rainbowkit/dist/index.css';
@@ -77,33 +79,47 @@
signInWithEthereum(address, signer, siweNonce);
}, [address, signer, siweNonce]);
- if (siweNonce === null || siweNonce === undefined) {
+ const { openConnectModal } = useConnectModal();
+ const hasNonce = siweNonce !== null && siweNonce !== undefined;
+ React.useEffect(() => {
+ if (hasNonce) {
+ openConnectModal();
+ }
+ }, [hasNonce, openConnectModal]);
+
+ if (!hasNonce) {
return (
<div className={css.wrapper}>
<h1 className={css.h1}>Unable to proceed: nonce not found.</h1>
</div>
);
+ } else if (!signer) {
+ return null;
+ } else {
+ return (
+ <div className={css.button} onClick={onClick}>
+ <img src="images/ethereum_icon.svg" style={ethIconStyle} />
+ sign in
+ </div>
+ );
}
-
- const SignInButton = !signer ? null : (
- <div className={css.button} onClick={onClick}>
- <img src="images/ethereum_icon.svg" style={ethIconStyle} />
- sign in
- </div>
- );
- return (
- <div className={css.wrapper}>
- <h1 className={css.h1}>SIWE</h1>
- <ConnectButton />
- <div className={css.spacer} />
- {SignInButton}
- </div>
- );
}
+
function SIWEWrapper(): React.Node {
+ const theme = React.useMemo(() => {
+ return _merge(darkTheme())({
+ radii: {
+ modal: 0,
+ modalMobile: 0,
+ },
+ colors: {
+ modalBackdrop: '#242529',
+ },
+ });
+ }, []);
return (
<WagmiConfig client={wagmiClient}>
- <RainbowKitProvider chains={chains}>
+ <RainbowKitProvider theme={theme} modalSize="compact" chains={chains}>
<SIWE />
</RainbowKitProvider>
</WagmiConfig>

File Metadata

Mime Type
text/plain
Expires
Mon, Jan 19, 3:46 AM (6 h, 11 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
5954191
Default Alt Text
D6003.1768794391.diff (2 KB)

Event Timeline