diff --git a/landing/reset.css b/landing/reset.css --- a/landing/reset.css +++ b/landing/reset.css @@ -1,21 +1,13 @@ /* https://www.joshwcomeau.com/css/custom-css-reset/ */ /* - 1. Use a more-intuitive box-sizing model. -*/ -*, -*::before, -*::after { - box-sizing: border-box; -} -/* - 2. Remove default margin + 1. Remove default margin */ * { margin: 0; } /* - 3. Allow percentage-based heights in the application + 2. Allow percentage-based heights in the application */ html, body { @@ -23,15 +15,15 @@ } /* Typographic tweaks! - 4. Add accessible line-height - 5. Improve text rendering + 3. Add accessible line-height + 4. Improve text rendering */ body { line-height: 1.5; -webkit-font-smoothing: antialiased; } /* - 6. Improve media defaults + 5. Improve media defaults */ img, picture, @@ -42,7 +34,7 @@ max-width: 100%; } /* - 7. Remove built-in form typography styles + 6. Remove built-in form typography styles */ input, button, @@ -51,7 +43,7 @@ font: inherit; } /* - 8. Avoid text overflows + 7. Avoid text overflows */ p, h1, @@ -63,7 +55,7 @@ overflow-wrap: break-word; } /* - 9. Create a root stacking context + 8. Create a root stacking context */ #react-root { isolation: isolate; diff --git a/landing/siwe.css b/landing/siwe.css --- a/landing/siwe.css +++ b/landing/siwe.css @@ -14,16 +14,22 @@ font-family: sans-serif; padding: 20px; } -.walletDisplay { + +div.connectedWalletInfo { + width: 100%; display: flex; - flex-direction: column; - align-items: center; - padding: 20px; + flex-direction: row; } + +div.connectedWalletInfo > div { + width: 100%; +} + .walletDisplayText { font-size: 24px; padding: 5px; } + .wrapper > p { text-align: center; padding: 5px; diff --git a/landing/siwe.react.js b/landing/siwe.react.js --- a/landing/siwe.react.js +++ b/landing/siwe.react.js @@ -6,7 +6,6 @@ RainbowKitProvider, darkTheme, useModalState, - ConnectButton, connectorsForWallets, } from '@rainbow-me/rainbowkit'; import invariant from 'invariant'; @@ -15,6 +14,7 @@ import '@rainbow-me/rainbowkit/dist/index.css'; import { useAccount, useSigner, WagmiConfig } from 'wagmi'; +import ConnectedWalletInfo from 'lib/components/connected-wallet-info.react.js'; import type { SIWEWebViewMessage } from 'lib/types/siwe-types'; import { getSIWEStatementForPublicKey, @@ -140,9 +140,9 @@ } else { return (
-
- Wallet Connected: - + Wallet Connected: +
+

{siweMessageSigningExplanationStatements}