feat: secret key input discord flow

cardano-foundation · Aug 28, 2023 · ac354ee · ac354ee
1 parent f84e02e
commit ac354ee
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 3 deletions.
diff --git a/ui/summit-2023/src/components/VerifyWallet/VerifyWallet.scss b/ui/summit-2023/src/components/VerifyWallet/VerifyWallet.scss
@@ -115,4 +115,12 @@
   span {
     font-weight: 600 !important;
   }
+}
+.secret-key-input {
+  width: 100%;
+}
+.secret-key-input > .MuiInputBase-root {
+  border-radius: 8px;
+  border: 1px solid var(--color-light-blue);
+  background: var(--color-ultra-light-grey);
 }
diff --git a/ui/summit-2023/src/components/VerifyWallet/VerifyWallet.tsx b/ui/summit-2023/src/components/VerifyWallet/VerifyWallet.tsx
@@ -6,7 +6,7 @@ import {
     FormControlLabel, Grid,
     List,
     ListItem,
-    ListItemAvatar,
+    ListItemAvatar, TextField,
     Typography
 } from '@mui/material';
 import CallIcon from '@mui/icons-material/Call';
@@ -245,11 +245,44 @@ const VerifyWallet = (props:VerifyWalletProps) => {
     const renderVerifyDiscord = () => {
         return <>
             <Typography
-                className='connect-wallet-modal-description'
+                className='verify-wallet-modal-description'
                 gutterBottom
                 style={{ wordWrap: 'break-word' }}
             >
-                To verify your address you need to sign a secret message. You will get the secret from our friendly Discord bot.            </Typography>
+                To verify your address you need to sign a secret message. You will get the secret from our friendly Discord bot.
+            </Typography>
+            <Typography
+                className='verify-wallet-modal-description'
+                gutterBottom
+                style={{ wordWrap: 'break-word', marginTop: '16px' }}
+            >
+                1. Join our Discord Server and accept our terms and conditions by reacting with a 🚀 to the message in the verification channel.
+            </Typography>
+            <Typography
+                className='verify-wallet-modal-description'
+                gutterBottom
+                style={{ wordWrap: 'break-word', marginTop: '16px' }}
+            >
+                2. Copy your Stake Address.
+            </Typography>
+            <Typography
+                className='verify-wallet-modal-description'
+                gutterBottom
+                style={{ wordWrap: 'break-word', marginTop: '16px' }}
+            >
+                3. Send your Stake Address as a private message to our WalletVerificationBot.
+            </Typography>
+            <Typography
+                className='verify-wallet-modal-description'
+                gutterBottom
+                style={{ wordWrap: 'break-word', marginTop: '16px' }}
+            >
+                4. Get the secret key from the chat with our WalletVerificationBot.
+            </Typography>
+            <TextField
+                className='secret-key-input'
+                label='Enter Secret Key'
+            />
         </>
     }