**Motivation and Summary**
The purpose of this SPA (or MPA lol) is to effectively onboard users arriving from a Twitter ad into the Arweave/AO ecosystem by offering them an airdrop of $AGENT tokens. Recognizing that these users may or may not have an Arweave wallet, the design focuses on guiding them through the necessary steps swiftly and intuitively.
Key objectives of the design include:
1. **Immediate Value Proposition:** Emphasize that users can receive free $AGENT tokens (free money), which can be instantly traded on Botega DEX, and allow them to check the live price on Dexi directly from the landing page.
2. **Early Wallet Connection:** Begin with wallet creation and connection to "catch" the user early, enabling progress tracking and allowing them to resume the process if they return later.
3. **Quick Sybil Protection:** Prompt users to verify their identity as soon as possible to prevent fraudulent entries and ensure a fair distribution of tokens.
4. **Social Engagement Incentives:** Implement a three-layer incentivization program to encourage users to engage with your Twitter content, thereby increasing your project's visibility and community engagement.
5. **Promotion of AI Agents in the AO Ecosystem:** Introduce users to the concept of AI Agents within the AO Ecosystem, providing a link to your AI Agent Video to educate and intrigue them.
---
**Design Structure and Flow**:
---
### **1. Hero Section**
**Objective:** Immediately capture the user's attention by emphasizing the opportunity to receive free $AGENT tokens (free money), inform them that these tokens can be instantly traded on Botega DEX, allow them to check the live price on Dexi, and introduce AI Agents within the AO Ecosystem with a link to your AI Agent Video—all within the Hero section.
#### **Content:**
**Headline:**
**"Claim your $AGENT Allocation Today!"**
**Subheadline:**
"Claim your tokens now and start trading instantly on Botega DEX."
**Key Points:**
- **Immediate Reward:**
"Receive free $AGENT tokens upon joining."
- **Instant Trading:**
"Trade your tokens immediately on [Botega DEX](#)."
- **Live Pricing:**
"Either a price chart from Dexi or just a Number denominated in $AR."
- **Discover AI Agents in the AO Ecosystem:**
"Unlock the future of finance with AI Agents. [Watch our video](#) to learn more." (this is the video from our release)
#### **CTA Buttons:**
- **Primary CTA:**
**"Claim Your Free Tokens"** *(Anchors to the wallet setup section.)*
- **Secondary CTAs:**
- **"Trade on Botega DEX"** *(Direct link to Botega DEX.)*
- **"Watch AI Agent Video"** *(Opens or redirects to your AI Agent Video.)*
- **"View Live Price Chart"** *(Scrolls to or expands the embedded Dexi price chart.)*
#### **Design Elements:**
- **Visual Layout:**
- **Left Side (Textual Content):**
- **Headline and Subheadline:** Positioned prominently to catch the eye.
- **Key Points:** Presented as concise bullet points or icons.
- **CTA Buttons:** Arranged beneath the key points, with the primary CTA emphasized.
- **Right Side (Visual Content):**
- **Embedded Dexi Price Chart:** Live chart showing $AGENT token prices.
- **AI Agent Video Thumbnail:** Clickable image to play the video.
- **Graphics and Imagery:** Futuristic visuals representing AI Agents and autonomous finance.
- **Styling and Aesthetics:**
- **Color Scheme:** Vibrant, brand-aligned colors with contrasting CTAs.
- **Typography:** Bold fonts for headlines; legible fonts for body text.
- **Whitespace:** Effective use to enhance readability.
---
### **2. Wallet Setup and Connection**
**Objective:** Begin the user's journey by assisting them in creating a new Arweave wallet or connecting an existing one. This early step allows us to "catch" the user, track their progress, and enable them to resume where they left off if they return later.
**Content:**
- **For Users Without a Wallet:**
- Brief introduction to Arweave wallets.
- Simplified setup guide with key steps and visuals.
- Link to the detailed [ArConnect setup guide](https://www.arconnect.io/help/article/how-to-install-and-setup-arconnect).
- **For Users With an Existing Wallet:**
- Option to connect their wallet.
**Design Elements:**
- **Options:**
- **Button:** "Connect Wallet"
- Subbotton bellow says "Create an Arweave wallet"
- If the user dont have a wallet but still clocks connect, he will see this: 
which would also prompt him to a wallet creation
- **Visual Aids:**
- Icons or images representing wallet setup.
- Concise instructions to guide the user.
**User Return Scenario:**
- **Data Persistence:**
- Associate the user's progress with their wallet address upon connection.
- Store their progress to allow resumption upon return.
- **Returning Users:**
- Detect returning users by their wallet address.
- Display a welcome back message and their progress status. (Optional)
---
### **3. Immediate Sybil Protection Verification**
User will get a reward only if they verify themselves on twitter and do some actions like following, thats why we need to guide them through the verification.
**Objective:** Prompt users to verify their identity on twitter to prevent Sybilling
**Content:**
- **Instruction:** "Next, verify your Twitter account to receive your tokens."
- **Verification Options:**
- **Option A:** Authenticate with Twitter (OAuth).
- **Option B:** Enter your Twitter handle and verify via a specific tweet.
#### **Option A: Twitter Authentication (OAuth)**
- **Process:**
- User clicks "Authenticate with Twitter."
- Completes the OAuth flow to verify their identity.
- **Design Elements:**
- **Button:** "Authenticate with Twitter"
- **Security Assurance:** Note explaining data privacy.
- **Ease of Use:**
- Quick and seamless verification.
#### **Option B: Twitter Handle Submission and Tweet Verification**
**(Elaborated as per your request.)**
- **Objective:** Provide an alternative sybil protection method for users who prefer not to use OAuth for Twitter authentication.
- **Process:**
1. **Enter Twitter Handle:**
- User inputs their Twitter handle in a text field.
- **Design Element:** Input box labeled "Enter your Twitter handle."
2. **Generate Verification Tweet:**
- User clicks a button labeled "Generate Verification Tweet."
- The system generates a unique nonce (random code) in the backend and creates a pre-written tweet that includes this nonce.
- **Design Element:** Button "Generate Verification Tweet" that, when clicked, displays the pre-written tweet.
3. **Prompt to Tweet:**
- The pre-written tweet is displayed along with a "Tweet Now" button.
- Clicking "Tweet Now" opens Twitter in a new tab with the tweet pre-filled.
- **Design Element:** "Tweet Now" button.
4. **Submit Tweet Link:**
- After posting the tweet, the user returns to the SPA.
- An input box is provided for the user to paste the link to their tweet.
- **Design Element:** Input box labeled "Paste the link to your tweet."
5. **Verification:**
- User clicks "Verify Tweet" to initiate verification.
- The system retrieves the tweet using the provided link and checks if the content includes the correct nonce.
- If verified, the user's Twitter handle is marked as verified.
- **Design Element:** "Verify Tweet" button.
6. **Feedback to User:**
- Success message upon verification.
- If verification fails, an error message with guidance.
- **Design Considerations:**
- **User-Friendly Interface:**
- Clear, step-by-step instructions.
- Visual cues and progress indicators.
- **Ease of Use:**
- Automate steps where possible (e.g., pre-filled tweets).
- Prominent buttons and input fields.
- **Error Handling:**
- Helpful error messages.
- Option to retry verification.
- **Emphasis on Ease:**
- Reassure users that this method is straightforward and respects their privacy preferences.
---
### **4. Three-Layer Incentivization Program**
**Objective:** Encourage users to engage with your Twitter content to unlock additional token rewards.
**Content:**
- **Base Reward:** Received after sybil protection verification.
- **Additional Rewards:**
- **Follow us on Twitter:** +50% tokens.
- **Like our specific post:** +15% tokens.
- **Retweet our specific post:** +35% tokens.
- **Total Potential Reward:** 100% of the airdrop amount.
**Design Elements:**
- **Interactive Progress Bar:**
- Shows the percentage of tokens unlocked.
- **Checklist with Actions:**
- **Action Items:**
- Follow on Twitter.
- Like the specific post.
- Retweet the specific post.
- **Rewards Displayed:** Next to each action.
- **Action Buttons:**
- Direct links to perform each action.
- **Real-Time Updates:**
- Progress updates as actions are completed.
---
### **5. Issue the tokens**
**Objective:** Guide to trigger token distribution and than issue the tokens by.
**Content:**
- **Confirmation Message:** "You airdrop of $AGENT: $NUMBER_OF_TOKENS is ready to claim!"
- **Instruction:** "Click on the button to claim $AGENT."
**Design Elements:**
- **Wallet needs to be connected:**
- You see a button that only becomes visible if wallet is connected, if not its connect wallet. You click it, do a tx and there is where you get your tokens
- **Instruction:** "Use your $AGENT tokens on Botega DEX and explore the possibilities of autonomous finance.
- A confirmation that says here are you tokens (AMOUNT) and gives you an instant link to Botega where you can swap them against $AR
---
### **7. Post-Airdrop Engagement**
**Objective:** Foster ongoing community involvement and support.
**Content:**
- **Join Our Community:**
- Links to Discord, Website, etc.
- **Provide Feedback:**
- Invitation to share their experience.
**Design Elements:**
- **Social Media Icons:**
- Recognizable and easily accessible.
- **Clear CTAs:**
- Encourage further engagement.
---
### **8. Footer**
**Objective:** Offer additional resources and legal information.
**Content:**
- Links to website and doc.
- Contact details for support inquiries.
**Design Elements:**
- **Consistent Branding:**
- Aligns with the overall design.
- **Clean Layout:**
- Organized and unobtrusive.
---
**User Flow Summary**
1. **Landing from Twitter Ad:**
- User arrives on the SPA, immediately sees the offer of free $AGENT tokens, and is informed about trading and live prices.
2. **Wallet Setup/Connection:**
- User creates a new wallet or connects an existing one.
- Progress is associated with their wallet address.
3. **Immediate Sybil Protection:**
- User verifies their Twitter account via:
- **Option A:** Twitter Authentication (OAuth).
- **Option B:** Twitter handle submission and tweet verification.
4. **Engagement Incentives:**
- User engages with Twitter content to unlock additional tokens.
5. **Confirmation of Wallet Address:**
- User's connected wallet is confirmed for token distribution.
6. **Token Utilization Encouraged:**
- User is guided to swap tokens on Botega DEX.
- Live price chart is available directly on the page.
7. **Community Engagement:**
- User is invited to join community channels and watch the AI Agent Video.
**User Return Scenario:**
- **Data Persistence and Resumption:**
- Progress is saved and linked to the wallet address.
- Returning users can resume where they left off.
- Improves user experience and completion rates.
---
**Detailed Implementation of Key Elements**
#### **Option B: Twitter Handle Submission and Tweet Verification**
**Technical Implementation:**
- **Nonce Generation:**
- Backend generates a unique nonce when "Generate Verification Tweet" is clicked.
- **Pre-written Tweet:**
- Includes the nonce and a predefined message.
- Example: "Verifying my account to receive $AGENT tokens! Nonce: [ABC123] #AGENTAirdrop"
- **Tweet Submission:**
- "Tweet Now" button opens Twitter with the message pre-filled.
- **Verification Process:**
- User submits the tweet link.
- Backend fetches the tweet via Twitter API.
- Checks if:
- The tweet was posted by the provided handle.
- The tweet contains the correct nonce.
- **Security Measures:**
- Nonce is time-limited or one-time-use.
- Secure storage of nonce and user data.
**User Experience Enhancements:**
- **Clear Instructions:**
- Step-by-step guidance with visuals.
- **Feedback Mechanisms:**
- Real-time status updates.
- Success messages upon completion.
- **Error Handling:**
- Specific messages for issues.
- Guidance on how to resolve them.
---
**Adjustments in Other Sections Due to Flow Change**
- **Three-Layer Incentivization Program:**
- Progress and rewards are linked to the wallet address from the start.
- Allows for personalized user experience.
- **Confirmation of Wallet Address:**
- Reinforce that tokens will be sent to the connected wallet.
- Ensures user is aware and can make changes if needed.
---
**Technical and UX Considerations**
- **Mobile Responsiveness:**
- If user comes with mobile -- guide them to the web version with a message!
- Ensure Hero section displays correctly on small screens.
- **Error Handling and Support:**
- Provide helpful error messages.
- Offer support options (our Discord)
- **Accessibility:**
- Design for all users.
- Use alt text and sufficient color contrast.
---
Sign in with Wallet
Connect another wallet