Merge pull request #162 from sei-protocol/feat/btns-quick-start

feat: incorporate user input components in quickstart guide

Author: seiyan-writer

components/AddressSearch/SeiTraceSearch.tsx

@@ -0,0 +1,55 @@
+import React, { useState } from 'react';
+import styles from '../../styles/SeiTraceSearch.module.css';
+
+const SeiTraceSearch = () => {
+  const [address, setAddress] = useState('');
+  const [error, setError] = useState('');
+
+  const isValidAddress = (addr: string) => {
+    // Accept addresses starting with 'sei' or '0x' and of reasonable length
+    const seiPattern = /^sei[a-z0-9]{8,}$/i;
+    const evmPattern = /^0x[a-fA-F0-9]{40}$/;
+    return seiPattern.test(addr) || evmPattern.test(addr);
+  };
+
+  const getSeiTraceUrl = (addr: string) => {
+    const chainParam = '?chain=pacific-1';
+    // For all addresses, use '/address/' path
+    return `https://seitrace.com/address/${addr}${chainParam}`;
+  };
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    const trimmedAddress = address.trim();
+    if (trimmedAddress) {
+      if (isValidAddress(trimmedAddress)) {
+        const url = getSeiTraceUrl(trimmedAddress);
+        window.open(url, '_blank');
+        setError('');
+      } else {
+        setError('Please enter a valid Sei or EVM address.');
+      }
+    }
+  };
+
+  return (
+    <form onSubmit={handleSubmit} className={styles.form}>
+      <div className={styles.inputContainer}>
+        <input
+          id="addressInput"
+          type="text"
+          placeholder="Enter address"
+          value={address}
+          onChange={(e) => setAddress(e.target.value)}
+          className={`${styles.input} ${error ? styles.error : ''}`}
+        />
+        <button type="submit" className={styles.button}>
+          View on SEITRACE
+        </button>
+      </div>
+      {error && <div className={styles.errorMessage}>{error}</div>}
+    </form>
+  );
+};
+
+export default SeiTraceSearch;

pages/start/user-quickstart.mdx

@@ -4,6 +4,9 @@ title: 'Connect to Sei'
 
 import { Callout } from 'nextra/components';
 import { ImageWithCaption } from "../../components";
+import CustomConnectButton from "../../components/EvmWalletConnect/CustomConnectButton";
+import EvmWalletConnect from "../../components/EvmWalletConnect/EvmWalletConnect";
+import SeiTraceSearch from "../../components/AddressSearch/SeiTraceSearch";
 import addressTranslationImage from "../../public/assets/address-derivation.png";
 import linkAddressesImage from "../../public/assets/link-addresses.png";
 import linkSuccessImage from "../../public/assets/link-success.png";
@@ -27,13 +30,14 @@ For additional help with wallet apps, see our [Setting up a Wallet](/users/walle
 
 ## Connecting Your Wallet
 
-When you connect your wallet to an application on Sei, you'll automatically be prompted to join 
-the correct network within your wallet interface.
+For a quick setup, simply click the "Connect Wallet" button below to connect directly from this guide.
 
-To test this, simply click the "Connect Wallet" button on the Sei App at [app.sei.io](https://app.sei.io/).
-If you'd like to jump right in, the demo below walks you through how to connect to the Sei network.
-> Please follow the instructions shared by your chosen wallet provider to add a new network manually.
-> If your wallet does not prompt you to join the Sei Network, you can find network details [here](/user-guides/wallet-setup) to manually add Sei network.
+<EvmWalletConnect />
+
+After connecting, your wallet will automatically prompt you to join the correct Sei network.
+
+To try connecting within the Sei App itself, visit [app.sei.io](https://app.sei.io) and click the "Connect Wallet" button. If you're ready to dive in, the demo below walks you through connecting to the Sei network step-by-step.
+> If your wallet doesn’t automatically prompt you to join the Sei Network, please add it manually by following the network details [here](/user-guides/wallet-setup).
 
 <br/>
 
@@ -44,7 +48,7 @@ If you'd like to jump right in, the demo below walks you through how to connect
   </video>
 </div>
 
-### Dual Address Support
+## Dual Address Support
 
 Sei supports two wallet address types:
 
@@ -56,27 +60,25 @@ You can find your corresponding wallet addresses directly in the Sei app.
 
 For more details on interoperability, explore our article [here](https://blog.sei.io/sei-v2-interoperability/).
 
-## Linking Wallet Addresses
+### How to Link Your Addresses
 
 <Callout emoji="💡">
-    Many Sei apps require linked addresses for cross-VM functionality. It’s recommended for all users.
+    Linking addresses is recommended for all users to enable cross-VM functionality in many Sei apps.
 </Callout>
 
-To use Sei apps that leverage interoperability, you must link your Sei and EVM (0x) addresses. Each Sei address has a corresponding EVM address, and vice versa. This link is required the first time you use Sei.
+To use interoperability features in Sei apps, you’ll need to link your Sei and EVM (0x) addresses. Each Sei address has a corresponding EVM address, derived from the same public key, and this link is required on your first use.
 
 <Callout type="warning">
-  You cannot choose which addresses are linked.
-  Each Sei account has one specific Sei address and one specific EVM address, derived from the same public key.
+  Address linking is automatic—each Sei account is tied to a single Sei address and a single EVM address, both derived from the same public key.
 </Callout>
 
-### How to Link Your Addresses
+Follow these steps to link your Sei and EVM addresses:
 
-1. Navigate to [app.sei.io](https://app.sei.io) using your web browser.
-2. On the Dashboard, look for the "Addresses" box.
-3. Complete captcha, if required.
-3. Click the "Link Addresses" button. This will prompt you to sign a message with your wallet - it's not a transaction,
-and will not charge you any gas fees.
-4. Once you have signed that message, your accounts will be linked.
+1. Go to [app.sei.io](https://app.sei.io) in your browser.
+2. In the Dashboard, locate the "Addresses" box.
+3. Complete any required captcha.
+4. Click "Link Addresses" to start the process. You’ll be prompted to sign a message with your wallet—this is not a transaction and incurs no gas fees.
+5. Once signed, your Sei and EVM addresses will be linked.
 
 <br/>
 
@@ -87,7 +89,15 @@ and will not charge you any gas fees.
   </video>
 </div>
 
-For more details, check the [Linking Addresses guide](/user-guides/linking-addresses).
+For more details, check the [Linking Addresses guide](/users/linking-addresses).
+
+### How to View Your Address Pair
+
+You can view your wallet address on any Sei blockchain explorer to see your transactions and balances.
+
+Enter your Sei or EVM address below to view it on SEITRACE:
+
+<SeiTraceSearch />
 
 ## Onboarding from Centralized Exchanges
 

styles/SeiTraceSearch.module.css

@@ -0,0 +1,61 @@
+.form {
+    margin-top: 1rem;
+  }
+  
+  .label {
+    color: #ddd;
+    font-size: 1rem;
+  }
+  
+  .inputContainer {
+    display: flex;
+    margin-top: 0.5rem;
+  }
+  
+  .input {
+    flex: 1;
+    padding: 0.75rem 1rem;
+    font-size: 1rem;
+    border: none;
+    border-radius: 25px 0 0 25px;
+    background-color: #1a1a1a;
+    color: #fff;
+    outline: none;
+    transition: background-color 0.3s;
+  }
+  
+  .input::placeholder {
+    color: #666;
+  }
+  
+  .input.error {
+    background-color: #2a1a1a;
+    box-shadow: inset 0 0 0 2px #e74c3c;
+  }
+  
+  .input:not(.error) {
+    box-shadow: inset 0 0 0 2px #333;
+  }
+  
+  .button {
+    padding: 0 1.5rem;
+    font-size: 1rem;
+    border: none;
+    border-radius: 0 25px 25px 0;
+    background-color: #1a1a1a;
+    color: #fff;
+    cursor: pointer;
+    transition: background-color 0.3s;
+    box-shadow: inset 0 0 0 2px #333;
+  }
+  
+  .button:hover {
+    background-color: #333;
+  }
+  
+  .errorMessage {
+    color: #e74c3c;
+    margin-top: 0.5rem;
+    font-size: 0.9rem;
+  }
+