Update App.tsx

[Dargon789]

Summary by Sourcery

Overhaul App.tsx to build a comprehensive Sequence Wallet demo application, replacing wagmi with Sequence SDK integration, adding environment/configuration management, rich wallet operations, and a structured UI with console output for interactive testing

New Features:

• Replace wagmi-based hooks with @0xsequence wallet initialization and integration
• Add environment selection and dynamic wallet URLs via query parameters
• Implement connect, disconnect, open/close wallet and customizable connection settings
• Provide extensive demo actions including chain/network switching, account/balance queries, message signing, typed data signing, and transaction sending
• Introduce a console component and logging for viewing function outputs
• Add email-based auto-login via modal with validation

Enhancements:

• Refactor UI to use design-system components and group actions thematically
• Initialize logger and configure default chain/network
• Memoize and listen to wallet events such as chain changes

[codesandbox]

Review or Edit in CodeSandbox

Open the branch in Web Editor • VS Code • Insiders

Open Preview

[bolt-new-by-stackblitz]

Run & review this pull request in StackBlitz Codeflow.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Updated (UTC)
sequence.js	Error		Nov 17, 2025 0:41am

[sourcery-ai]

Reviewer's Guide

This PR transforms App.tsx from a minimal wagmi-based component into a full-featured Sequence Wallet demo app: it sets up environment-aware configuration, initializes the Sequence Wallet SDK, implements a wide range of wallet operations (connect, sign, transact, etc.), overhauls the UI using @0xsequence/design-system (including modal and console components), and adds logging/state utilities and performance optimizations.

Sequence diagram for wallet connection and authentication flow

sequenceDiagram
  actor User
  participant App
  participant SequenceWalletSDK
  participant Modal
  User->>App: Clicks Connect/Connect & Auth/Email/Google
  App->>SequenceWalletSDK: Calls connect(connectOptions)
  alt Email modal
    App->>Modal: Opens email modal
    User->>Modal: Enters email and submits
    Modal->>App: Returns email
    App->>SequenceWalletSDK: Calls connect with email
  end
  SequenceWalletSDK-->>App: Returns connectDetails
  App->>App: Updates state, console, UI
  App-->>User: Shows connection status

Loading

Sequence diagram for sending a transaction (Send ETH/DAI/USDC)

sequenceDiagram
  actor User
  participant App
  participant SequenceWalletSDK
  participant Blockchain
  User->>App: Clicks Send funds/Send DAI/Send USDC
  App->>SequenceWalletSDK: Prepares transaction
  App->>SequenceWalletSDK: Calls sendTransaction()
  SequenceWalletSDK->>Blockchain: Submits transaction
  Blockchain-->>SequenceWalletSDK: Returns txn response
  SequenceWalletSDK-->>App: Returns txn response
  App->>App: Updates console with result
  App-->>User: Shows transaction result

Loading

Class diagram for new and updated types in App.tsx

classDiagram
  class App {
    - consoleMsg: string | null
    - email: string | null
    - consoleLoading: boolean
    - isWalletConnected: boolean
    - showChainId: number
    - isOpen: boolean
    - warning: boolean
    + connect(connectOptions: ConnectOptions): Promise<void>
    + disconnect(): void
    + openWallet(): void
    + openWalletWithSettings(): void
    + closeWallet(): void
    + isConnected(): Promise<void>
    + isOpened(): Promise<void>
    + getChainID(): Promise<void>
    + getAccounts(): Promise<void>
    + getBalance(): Promise<void>
    + getNetworks(): Promise<void>
    + signMessageString(): Promise<void>
    + signMessageHex(): Promise<void>
    + signMessageBytes(): Promise<void>
    + signTypedData(): Promise<void>
    + estimateUnwrapGas(): Promise<void>
    + sendETH(signer?): Promise<void>
    + sendSepoliaUSDC(signer?): Promise<void>
    + sendDAI(signer?): Promise<void>
    + sendETHSidechain(): Promise<void>
    + send1155Tokens(): Promise<void>
    + contractExample(signer?): Promise<void>
    + fetchTokenBalances(): Promise<void>
    + updateImplementation(signer?): Promise<void>
    + updateImageHash(signer?): Promise<void>
    + delegateCall(signer?): Promise<void>
    + addHook(signer?): Promise<void>
    + setExtraImageHash(signer?): Promise<void>
    + appendConsoleLine(message: string, clear?): void
    + resetConsole(): void
    + consoleWelcomeMessage(): void
    + consoleErrorMessage(): void
    + sanitizeEmail(email: string): boolean
  }
  class Environment {
    + name: string
    + walletUrl: string
    + projectAccessKey: string
  }
  App --> Environment
  App --> ConnectOptions
  App --> Settings
  App --> OpenWalletIntent
  App --> sequence

Loading

File-Level Changes

Change	Details	Files
Replace wagmi hooks with Sequence Wallet integration and environment configuration	Swap wagmi imports for sequence, ethers, design-system, ethauth, utils, provider, network Define environments array and parse URL parameters for env, walletAppURL, projectAccessKey Initialize Sequence wallet with sequence.initWallet using selected network and transport settings	src/App.tsx
Implement comprehensive wallet operation methods	Add connect/disconnect/open/close wallet methods with optional authorization settings Implement state queries: isConnected, isOpened, getChainID, getAccounts, getBalance, getNetworks Add signing flows: message strings, hex, bytes, typed data Add gas simulation and a suite of transaction examples: sendETH, sendDAI, sendUSDC, L2 transfers, ERC-1155 placeholder Include contract interaction demos: ERC-20 balance/symbol, token balances indexer, module updates, delegateCall, hooks	src/App.tsx
UI overhaul using @0xsequence/design-system and modal flows	Replace plain HTML markup with Box, Card, Text, Button, Select, TokenImage, Divider components Group related actions via custom Group component and AnimatePresence modal for email login Add environment & network selectors with dynamic URL updates Import and display logo and banner assets	src/App.tsx
Add console logging component and utility functions	Import and render Console component for output Implement appendConsoleLine, resetConsole, welcome/error helpers to manage log messages and loading state Use useState hooks to track console messages and loading flag	src/App.tsx
Miscellaneous refactors and performance optimizations	Import helper functions (getDefaultChainId, toHexString) and constants (ERC_20_ABI) Configure logger via configureLogger({ logLevel: 'DEBUG' }) Add sanitizeEmail validation logic for modal login Wrap and export App with React.memo for memoization	src/App.tsx

---

Tips and commands

Interacting with Sourcery

• Trigger a new review: Comment @sourcery-ai review on the pull request.
• Continue discussions: Reply directly to Sourcery's review comments.
• Generate a GitHub issue from a review comment: Ask Sourcery to create an
  issue from a review comment by replying to it. You can also reply to a
  review comment with @sourcery-ai issue to create an issue from it.
• Generate a pull request title: Write @sourcery-ai anywhere in the pull
  request title to generate a title at any time. You can also comment
  @sourcery-ai title on the pull request to (re-)generate the title at any time.
• Generate a pull request summary: Write @sourcery-ai summary anywhere in
  the pull request body to generate a PR summary at any time exactly where you
  want it. You can also comment @sourcery-ai summary on the pull request to
  (re-)generate the summary at any time.
• Generate reviewer's guide: Comment @sourcery-ai guide on the pull
  request to (re-)generate the reviewer's guide at any time.
• Resolve all Sourcery comments: Comment @sourcery-ai resolve on the
  pull request to resolve all Sourcery comments. Useful if you've already
  addressed all the comments and don't want to see them anymore.
• Dismiss all Sourcery reviews: Comment @sourcery-ai dismiss on the pull
  request to dismiss all existing Sourcery reviews. Especially useful if you
  want to start fresh with a new review - don't forget to comment
  @sourcery-ai review to trigger a new review!

Customizing Your Experience

Access your dashboard to:

• Enable or disable review features such as the Sourcery-generated pull request
  summary, the reviewer's guide, and others.
• Change the review language.
• Add, remove or edit custom review instructions.
• Adjust other review settings.

Getting Help

• Contact our support team for questions or feedback.
• Visit our documentation for detailed guides and information.
• Keep in touch with the Sourcery team by following us on X/Twitter, LinkedIn or GitHub.

[snyk-io]

✅ Snyk checks have passed. No issues have been found so far.

Status	Scanner	Critical	High	Medium	Low	Total (0)
✅	Open Source Security	0	0	0	0	0 issues

💻 Catch issues earlier using the plugins for VS Code, JetBrains IDEs, Visual Studio, and Eclipse.

[gemini-code-assist]

Summary of Changes

Hello @Dargon789, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

This pull request transforms a rudimentary wagmi-based wallet connection example into a robust and interactive demo application for the Sequence Wallet SDK. The refactored App.tsx now provides an extensive interface for users to explore and interact with a broad spectrum of Sequence Wallet features, ranging from fundamental connection and disconnection to sophisticated operations such as multi-chain transactions, various message signing protocols, and detailed token balance retrieval, all presented through an improved user experience powered by the Sequence Design System.

Highlights

• Framework Transition: The application has been completely refactored from using wagmi hooks to a comprehensive implementation utilizing the @0xsequence SDK for all wallet interactions.
• Comprehensive Sequence Wallet Demo: The App.tsx now functions as a full-featured demo application, showcasing a wide array of Sequence Wallet capabilities including connection, authentication, state retrieval, various message signing methods (string, hex, bytes, typed data), diverse transaction sending (ETH, ERC-20 tokens, cross-chain), contract interaction, and token balance fetching.
• Enhanced User Interface: The user interface has been significantly upgraded using @0xsequence/design-system components, providing a structured and interactive experience with categorized action groups, environment/network selectors, a console for output, and a modal for email-based login.
• Configurable Environments and Networks: The application now supports configurable environments (production, development, local, custom) and allows users to dynamically select different networks, highlighting the Sequence Wallet's multi-chain capabilities.
• Advanced Actions Section: A dedicated section for 'Prohibited Actions' has been added, clearly marked for testing purposes only, to demonstrate advanced and potentially sensitive wallet functionalities like updateImplementation and delegateCall.

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature	Command	Description
Code Review	/gemini review	Performs a code review for the current pull request in its current state.
Pull Request Summary	/gemini summary	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help	/gemini help	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Footnotes

1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

[sourcery-ai]

Hey there - I've reviewed your changes - here's some feedback:

• This component is very large and handles a lot of wallet logic – consider breaking it into smaller components and custom hooks/services to improve readability and maintainability.
• You’re registering wallet event listeners in useEffect/useMemo without cleanup – add cleanup functions to remove listeners on unmount and prevent memory leaks.
• Environment URLs and the projectAccessKey are hard-coded in the file; consider pulling these values from environment variables or a separate config to avoid embedding secrets in code.

Prompt for AI Agents

Please address the comments from this code review:

## Overall Comments
- This component is very large and handles a lot of wallet logic – consider breaking it into smaller components and custom hooks/services to improve readability and maintainability.
- You’re registering wallet event listeners in useEffect/useMemo without cleanup – add cleanup functions to remove listeners on unmount and prevent memory leaks.
- Environment URLs and the projectAccessKey are hard-coded in the file; consider pulling these values from environment variables or a separate config to avoid embedding secrets in code.

## Individual Comments

### Comment 1
<location> `wagmi-project/src/App.tsx:112-113` </location>
<code_context>
+  const [isOpen, toggleModal] = useState(false)
+  const [warning, setWarning] = useState(false)
+
+  useMemo(() => {
+    wallet.on('chainChanged', (chainId: string) => {
+      setShowChainId(Number(BigInt(chainId)))
+    })
</code_context>

<issue_to_address>
**issue:** useMemo is used for a side effect instead of useEffect.

Registering event listeners is a side effect and should be handled in useEffect to ensure correct lifecycle management and cleanup.
</issue_to_address>

### Comment 2
<location> `wagmi-project/src/App.tsx:901-902` </location>
<code_context>
+      return setConsoleMsg(message)
+    }
+
+    return setConsoleMsg(prevState => {
+      return `${prevState}\n\n${message}`
+    })
+  }
</code_context>

<issue_to_address>
**suggestion (bug_risk):** Appending to consoleMsg may result in 'null\n\nmessage' on first use.

Initialize consoleMsg as an empty string or handle the null case in appendConsoleLine to avoid this issue.

Suggested implementation:

```typescript
const [consoleMsg, setConsoleMsg] = useState<string>('');

```

```typescript
    return setConsoleMsg(prevState => {
      const safePrevState = prevState ?? '';
      return `${safePrevState}\n\n${message}`;
    })

```
</issue_to_address>

### Comment 3
<location> `wagmi-project/src/App.tsx:961-966` </location>
<code_context>
+    }
+  }, [email, isOpen])
+
+  const sanitizeEmail = (email: string) => {
+    // Trim unnecessary spaces
+    email = email.trim()
+
+    // Check if the email matches the pattern of a typical email
+    const emailRegex = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/
+    if (emailRegex.test(email)) {
+      return true
</code_context>

<issue_to_address>
**suggestion:** Email regex is overly restrictive and may reject valid emails.

The current regex limits TLDs to 6 characters, which excludes valid domains. Please update the regex or use a dedicated email validation library.

Suggested implementation:

```typescript
  import validator from 'validator';

  const sanitizeEmail = (email: string) => {
    // Trim unnecessary spaces
    email = email.trim()

    // Use validator.js for robust email validation
    if (validator.isEmail(email)) {
      return true
    }

    return false
  }

```

You will need to install `validator` if it is not already present in your project:
```
npm install validator
```
If you prefer not to use a library, you can replace the regex with a more permissive one, such as:
```js
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
```
But using a library is recommended for best practice and future-proofing.
</issue_to_address>

### Comment 4
<location> `wagmi-project/src/App.tsx:1348` </location>
<code_context>
 }

-export default App
+export default React.memo(App)
</code_context>

<issue_to_address>
**suggestion (performance):** React.memo may be unnecessary due to frequent state changes.

Given the frequent state updates in App, memoization is unlikely to improve performance and may complicate the code. Evaluate whether React.memo is truly beneficial in this context.
</issue_to_address>

### Comment 5
<location> `wagmi-project/src/App.tsx:100` </location>
<code_context>
+}
+
+// App component
+const App = () => {
+  const [consoleMsg, setConsoleMsg] = useState<null | string>(null)
+  const [email, setEmail] = useState<null | string>(null)
</code_context>

<issue_to_address>
**issue (complexity):** Consider refactoring App.tsx by extracting wallet logic into a custom hook, wrapping async actions with a helper, and driving UI from configuration arrays.

```markdown
You can dramatically reduce the size-and-complexity of `App.tsx` by

 1. extracting **all wallet logic** (state, handlers, console wrapper, etc.) into a `useSequenceWallet` hook  
 2. using a small **helper** to wrap every async action in `resetConsole/try…catch/consoleError`  
 3. driving your `<Group>` + `<Button>`s from a **configuration array** instead of hand-copying 40+ handlers

---

### 1) `hooks/useSequenceWallet.ts`

```ts
import { useState, useEffect, useCallback } from 'react'
import { sequence } from '0xsequence'
import type { ConnectOptions } from '@0xsequence/provider'

export function useSequenceWallet() {
  const wallet = sequence.getWallet()
  const [isConnected, setIsConnected] = useState(wallet.isConnected())
  const [consoleMsg, setConsoleMsg]     = useState<string>('')
  const [loading,    setLoading]        = useState(false)

  // console wrapper
  const run = <T extends any[]>(fn: (...args: T) => Promise<void>) =>
    async (...args: T) => {
      setLoading(true)
      setConsoleMsg('')
      try {
        await fn(...args)
      } catch (err) {
        console.error(err)
        setConsoleMsg('An error occurred')
      } finally {
        setLoading(false)
      }
    }

  // handlers
  const connect = useCallback(run(async (opts: ConnectOptions = { app: 'Demo Dapp' }) => {
    const { connected, error } = await wallet.connect(opts)
    setConsoleMsg(connected
      ? '✓ Wallet connected'
      : `✗ Failed to connect: ${error}`)
    setIsConnected(connected)
  }), [wallet])

  const disconnect = useCallback(() => {
    wallet.disconnect()
    setIsConnected(false)
    setConsoleMsg('Wallet disconnected')
  }, [wallet])

  const getChainId = useCallback(run(async () => {
    const id = wallet.getProvider().getChainId()
    setConsoleMsg(`Chain ID: ${id}`)
  }), [wallet])

  // … define other actions exactly the same way …

  return {
    isConnected,
    consoleMsg,
    loading,
    connect,
    disconnect,
    getChainId,
    // … export the rest of your wrapped actions …
  }
}
```

---

### 2) `App.tsx`

```tsx
import React from 'react'
import { Box } from '@0xsequence/design-system'
import { Group } from './components/Group'
import { Console } from './components/Console'
import { useSequenceWallet } from './hooks/useSequenceWallet'

export const App = () => {
  const {
    isConnected, consoleMsg, loading,
    connect, disconnect, getChainId /*, …other actions… */
  } = useSequenceWallet()

  const ACTION_GROUPS = [
    {
      label: 'Connection',
      items: [
        { label: 'Connect',       onClick: connect },
        { label: 'Disconnect',    onClick: disconnect, disabled: !isConnected },
      ]
    },
    {
      label: 'State',
      items: [
        { label: 'Get Chain ID',  onClick: getChainId, disabled: !isConnected },
        // … more items …
      ]
    },
    // … other groups …
  ]

  return (
    <Box padding="6" maxWidth="720px" mx="auto">
      {ACTION_GROUPS.map(g => (
        <Group key={g.label} label={g.label}>
          {g.items.map(item => (
            <Button
              key={item.label}
              label={item.label}
              onClick={item.onClick}
              disabled={item.disabled}
              loading={item.onClick === loading}
              width="full"
            />
          ))}
        </Group>
      ))}
      <Console message={consoleMsg} loading={loading} />
    </Box>
  )
}
```

**Benefits**  
- all wallet logic (hooks, console state, event listeners) lives in one small file  
- no more 40 nearly-identical `try/reset/append/…` blocks  
- UI is data-driven, so adding or reordering buttons is just editing a tiny config  
- `App.tsx` shrinks from ~1300 lines to ~150, keeping all functionality intact  
```
</issue_to_address>

### Comment 6
<location> `wagmi-project/src/App.tsx:585` </location>
<code_context>
      const provider = signer.provider

</code_context>

<issue_to_address>
**suggestion (code-quality):** Prefer object destructuring when accessing and using properties. ([`use-object-destructuring`](https://docs.sourcery.ai/Reference/Rules-and-In-Line-Suggestions/TypeScript/Default-Rules/use-object-destructuring))

```suggestion
      const {provider} = signer
```

<br/><details><summary>Explanation</summary>Object destructuring can often remove an unnecessary temporary reference, as well as making your code more succinct.

From the [Airbnb Javascript Style Guide](https://airbnb.io/javascript/#destructuring--object)
</details>
</issue_to_address>

---

Sourcery is free for open source - if you like our reviews please consider sharing them ✨

• X
• Mastodon
• LinkedIn
• Facebook

_{Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.}

[gemini-code-assist]

Code Review

This pull request is a major overhaul of the application, replacing wagmi with the Sequence SDK to create a comprehensive demo. The changes are extensive and introduce a lot of new functionality. Overall, the implementation is a great showcase of the Sequence SDK's capabilities. However, there are a few critical issues related to React hook usage and inconsistent handling of Sequence wallet/provider instances that could lead to runtime errors and memory leaks. I've provided detailed comments and suggestions to address these problems, improve code quality, and ensure the application is robust.