Master ceb95d4

.circleci/config.yml

@@ -0,0 +1,22 @@
+version: 2.1
+
+jobs:
+  test:
+    docker:
+      - image: ghcr.io/foundry-rs/foundry:latest
+    steps:
+      - checkout
+      - run:
+          name: Install submodules
+          command: git submodule update --init --recursive
+      - run:
+          name: Build
+          command: forge build
+      - run:
+          name: Test
+          command: forge test -vvv
+
+workflows:
+  main:
+    jobs:
+      - test

.codesandbox/.github/workflows/build.yml

@@ -1,4 +1,4 @@
-name: build app
+name: build dapp
 
 on:
   push:

.codesandbox/README.md

@@ -1,4 +1,5 @@
-# Demo Dapp
+Demo Dapp
+=========
 
 Dapp example on how to use Sequence Wallet. Covers how to connect, sign messages and send transctions.
 
@@ -15,7 +16,7 @@ For complete documentation on Sequence, please see: [https://docs.sequence.build
 
 ## Development
 
-See [src/App.tsx](./src/App.tsx) for the source
+See https://github.com/0xsequence/demo-dapp/blob/master/src/App.tsx for the source
 usage for a variety of functions. Be sure to open your browser's dev inspector to see output.
 Think of these functions as a "cookbook" for how you can perform these functions in your dapps.
 
@@ -27,6 +28,7 @@ Also note, sequence.js is built on top of ethers.js, and is API-compatible.
 
 ![Open Sequence Wallet From Dapp](./screenshots/screen-open.png)
 
+
 **Send transaction from dapp:**
 
 Sequence Wallet is an Ethereum wallet supporting Ethereum mainnet, Polygon and more. Sequence will work
@@ -40,6 +42,8 @@ Notice how you can pay gas fees for a transaction in either MATIC token or USDC
 
 ![Transfer ERC-20 token on Polygon](./screenshots/screen-txn.png)
 
+
+
 ## LICENSE
 
 Apache 2.0 or MIT (your choice)

.codesandbox/package.json

@@ -7,16 +7,16 @@
   "scripts": {
     "dev": "BROWSER=none pnpm start",
     "start": "vite",
-    "build": "tsc && vite build",
+    "build": "BUILD_PATH='./dist' tsc && vite build",
     "typecheck": "tsc --noEmit",
-    "serve": "Vite preview",
+    "serve": "vite preview",
     "dist": "pnpm build",
     "link-sequence": "pnpm run clear:vite:cache && ../sequence.js/scripts/pnpm-link.sh link",
     "unlink-sequence": "pnpm run clear:vite:cache && ../sequence.js/scripts/pnpm-link.sh unlink",
-    "clear:vite:cache": "rimraf node_modules/.vite/"
+    "clear:vite:cache": "rm -rf node_modules/.vite/"
   },
   "dependencies": {
-    "0xsequence": "2.2.13",
+    "0xsequence": "2.2.3",
     "@0xsequence/abi": "2.2.13",
     "@0xsequence/design-system": "^1.8.1",
     "@0xsequence/ethauth": "^1.0.0",
@@ -36,7 +36,7 @@
   "devDependencies": {
     "@vanilla-extract/vite-plugin": "^4.0.6",
     "@vitejs/plugin-react": "^4.2.1",
-    "vite": "^5.2.6",
+    "vite": "^6.4.2",
     "vite-plugin-svgr": "^4.2.0",
     "vite-tsconfig-paths": "^4.3.2"
   },
@@ -45,7 +45,7 @@
       "react-app"
     ]
   },
-  "browsers list": {
+  "browserslist": {
     "production": [
       ">0.2%",
       "not dead",

.codesandbox/src/App.tsx

@@ -17,7 +17,7 @@ import {
   TextInput,
   Modal
 } from '@0xsequence/design-system'
-import { ETHAuth } from '@0xsequence/ethane'
+import { ETHAuth } from '@0xsequence/ethauth'
 import { configureLogger } from '@0xsequence/utils'
 import { ConnectOptions, OpenWalletIntent, Settings } from '@0xsequence/provider'
 import { ChainId, NetworkType } from '@0xsequence/network'
@@ -27,8 +27,8 @@ import { Console } from './components/Console'
 import { Group } from './components/Group'
 import { getDefaultChainId, toHexString } from './helpers'
 import logoUrl from './images/logo.svg'
-import skyweaverBannerUrl from './images/sky weaver-banner.png'
-import skyweaverBannerLargeUrl from './images/sky weaver-banner-large.png'
+import skyweaverBannerUrl from './images/skyweaver-banner.png'
+import skyweaverBannerLargeUrl from './images/skyweaver-banner-large.png'
 
 configureLogger({ logLevel: 'DEBUG' })
 
@@ -69,7 +69,7 @@ const DEFAULT_API_URL = 'https://api.sequence.app'
 // chain is required.
 const defaultChainId = getDefaultChainId() || ChainId.MAINNET
 // const defaultChainId = ChainId.POLYGON
-// const defaultChainId = ChainId.GURLI
+// const defaultChainId = ChainId.GOERLI
 // const defaultChainId = ChainId.ARBITRUM
 // const defaultChainId = ChainId.AVALANCHE
 // etc.. see the full list here: https://docs.sequence.xyz/multi-chain-support
@@ -109,11 +109,15 @@ const App = () => {
   const [isOpen, toggleModal] = useState(false)
   const [warning, setWarning] = useState(false)
 
-  useMemo(() => {
-    wallet.on('chainChanged', (chainId: string) => {
+  useEffect(() => {
+    const listener = (chainId: string) => {
       setShowChainId(Number(BigInt(chainId)))
-    })
-  }, [])
+    }
+    wallet.on('chainChanged', listener)
+    return () => {
+      wallet.removeListener('chainChanged', listener)
+    }
+  }, [wallet])
 
   useEffect(() => {
     setIsWalletConnected(wallet.isConnected())
@@ -125,14 +129,20 @@ const App = () => {
   }, [isWalletConnected])
 
   useEffect(() => {
-    // Wallet events
-    wallet.client.onOpen(() => {
+    const onOpen = () => {
       console.log('wallet window opened')
-    })
-
-    wallet.client.onClose(() => {
+    }
+    const onClose = () => {
       console.log('wallet window closed')
-    })
+    }
+
+    wallet.client.onOpen(onOpen)
+    wallet.client.onClose(onClose)
+
+    return () => {
+      wallet.client.removeListener('open', onOpen)
+      wallet.client.removeListener('close', onClose)
+    }
   }, [wallet])
 
   const defaultConnectOptions: ConnectOptions = {
@@ -281,7 +291,7 @@ const App = () => {
       const topChainId = wallet.getChainId()
       appendConsoleLine(`top chainId: ${topChainId}`)
 
-      const provider = wallet.getProvider()
+      const provider = wallet
       const providerChainId = provider!.getChainId()
       appendConsoleLine(`provider.getChainId(): ${providerChainId}`)
 
@@ -958,18 +968,9 @@ And that has made all the difference.
     }
   }, [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
-    }
-
-    return false
-  }
+  const sanitizeEmail = (email: string | null) => {
+    if (!email) return false
+    const trimmedEmail = email.trim()
 
   return (
     <Box marginY="0" marginX="auto" paddingX="6" style={{ maxWidth: '720px', marginTop: '80px', marginBottom: '80px' }}>
@@ -1088,7 +1089,7 @@ And that has made all the difference.
           name="chainId"
           label={'Network'}
           labelLocation="top"
-          onValueChange={value => wallet.setDefaultChainId(Number(value))}
+          onValueChange={value => sequence.getWallet().setDefaultChainId(Number(value))}
           value={String(showChainId)}
           options={[
             ...Object.values(networks).map(network => ({

.codesandbox/src/README.md

@@ -1,85 +1,49 @@
-<!-- > [!IMPORTANT] -->
-<!-- > Wagmi is participating in Gitcoin Grants round 21. Consider <a href="https://explorer.gitcoin.co/#/round/42161/389/74">supporting the project</a>. Thank you. 🙏 -->
-
-<br>
-
-<p align="center">
-  <a href="https://wagmi.sh">
-    <picture>
-      <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/wevm/wagmi/main/.github/logo-dark.svg">
-      <img alt="wagmi logo" src="https://raw.githubusercontent.com/wevm/wagmi/main/.github/logo-light.svg" width="auto" height="60">
-    </picture>
-  </a>
-</p>
-
-<p align="center">
-  Reactive primitives for Ethereum apps
-</p>
-
-<p align="center">
-  <a href="https://www.npmjs.com/package/wagmi">
-    <picture>
-      <source media="(prefers-color-scheme: dark)" srcset="https://img.shields.io/npm/v/wagmi?colorA=21262d&colorB=21262d">
-      <img src="https://img.shields.io/npm/v/wagmi?colorA=f6f8fa&colorB=f6f8fa" alt="Version">
-    </picture>
-  </a>
-  <a href="https://github.com/wevm/wagmi/blob/main/LICENSE">
-    <picture>
-      <source media="(prefers-color-scheme: dark)" srcset="https://img.shields.io/npm/l/wagmi?colorA=21262d&colorB=21262d">
-      <img src="https://img.shields.io/npm/l/wagmi?colorA=f6f8fa&colorB=f6f8fa" alt="MIT License">
-    </picture>
-  </a>
-  <a href="https://www.npmjs.com/package/wagmi">
-    <picture>
-      <source media="(prefers-color-scheme: dark)" srcset="https://img.shields.io/npm/dm/@wagmi/core?colorA=21262d&colorB=21262d">
-      <img src="https://img.shields.io/npm/dm/@wagmi/core?colorA=f6f8fa&colorB=f6f8fa" alt="Downloads per month">
-    </picture>
-  </a>
-  <a href="https://bestofjs.org/projects/wagmi">
-    <picture>
-      <source media="(prefers-color-scheme: dark)" srcset="https://img.shields.io/endpoint?colorA=21262d&colorB=21262d&url=https://bestofjs-serverless.now.sh/api/project-badge?fullName=wevm%2Fwagmi%26since=daily">
-      <img src="https://img.shields.io/endpoint?colorA=f6f8fa&colorB=f6f8fa&url=https://bestofjs-serverless.now.sh/api/project-badge?fullName=wevm%2Fwagmi%26since=daily" alt="Best of JS">
-    </picture>
-  </a>
-  <a href="https://app.codecov.io/gh/wevm/wagmi">
-    <picture>
-      <source media="(prefers-color-scheme: dark)" srcset="https://img.shields.io/codecov/c/github/wevm/wagmi?colorA=21262d&colorB=21262d">
-      <img src="https://img.shields.io/codecov/c/github/wevm/wagmi?colorA=f6f8fa&colorB=f6f8fa" alt="Code coverage">
-    </picture>
-  </a>
-</p>
-
----
-
-  </a>
-  <p align="center">
-  <a href="https://sequence.xyz">
-    <picture>
-      <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/wevm/.github/main/content/sponsors/sequence-dark.svg">
-      <img alt="sequence logo" src="https://raw.githubusercontent.com/wevm/.github/main/content/sponsors/sequence-light.svg" width="auto" height="50">
-    </picture>
-  </a>
-</p>
-
-## Documentation
-
-For documentation and guides, visit [wagmi.sh](https://wagmi.sh).
-
-## Community
-
-For help, discussion about best practices, or any other conversation that would benefit from being searchable:
-
-[Discuss Wagmi on GitHub](https://github.com/wevm/wagmi/discussions)
-
-For casual chit-chat with others using the framework:
-
-[Join the Wagmi Discord](https://discord.gg/SghfWBKexF)
-
-## Contributing
-
-Contributions to Wagmi are greatly appreciated! If you're interested in contributing to Wagmi, please read the [Contributing Guide](https://wagmi.sh/dev/contributing) **before submitting a pull request**.
-
-## Sponsors
-
-If you find Wagmi useful or use it for work, please consider [sponsoring Wagmi](https://github.com/sponsors/wevm?metadata_campaign=gh_readme_support). Thank you 🙏  [Sponsor Wagmi](https://github.com/sponsors/wevm?metadata_campaign=gh_readme_support_bottom)
+Demo Dapp
+=========
 
+Dapp example on how to use Sequence Wallet. Covers how to connect, sign messages and send transctions.
+
+Try this dapp at: [https://0xsequence.github.io/demo-dapp](https://0xsequence.github.io/demo-dapp)
+
+For complete documentation on Sequence, please see: [https://docs.sequence.build](https://docs.sequence.build)
+
+## Usage
+
+1. pnpm install
+2. pnpm dev
+3. Open browser to http://localhost:4000 to access the demo dapp
+4. Open browser inspector to see responses from the remote Sequence Wallet
+
+## Development
+
+See https://github.com/0xsequence/demo-dapp/blob/master/src/routes/HomeRoute.tsx for the source
+usage for a variety of functions. be sure t open your browser's dev inspector to see output.
+Think of these functions as a "cookbook" for how you can perform these functions in your dapps.
+
+Also note, sequence.js is built on top of ethers.js, and is API-compatible.
+
+## Screenshots
+
+**Opening wallet from dapp:**
+
+![Open Sequence Wallet From Dapp](./screenshots/screen-open.png)
+
+
+**Send transaction from dapp:**
+
+Sequence Wallet is an Ethereum wallet supporting Ethereum mainnet, Polygon and more. Sequence will work
+with any blockchain which is EVM compatible and supports Ethereum's node JSON-RPC interface.
+
+Here you can see in this screenshot the call to "Send DAI" from demo-dapp
+(https://github.com/0xsequence/demo-dapp/blob/master/src/routes/HomeRoute.tsx#L420). This function demonstrates
+how you can transfer an ERC-20 token like DAI on any Ethereum network.
+
+Notice how you can pay gas fees for a transaction in either MATIC token or USDC for price of $0.01.
+
+![Transfer ERC-20 token on Polygon](./screenshots/screen-txn.png)
+
+
+
+## LICENSE
+
+Apache 2.0 or MIT (your choice)

.codesandbox/src/components/Console/styles.css.ts

@@ -3,9 +3,9 @@ import { style, keyframes } from '@vanilla-extract/css'
 export const blink = keyframes({
   '0%': { visibility: 'hidden' },
   '50%': { visibility: 'hidden' },
-  '100%': { visibility: 'visible' }
+  '100%': {visibility: 'visible' }
 })
 
 export const cursor = style({
-  animation: `${blink} 2s infinite`
-})
+  animation: `${blink} 2s infinite`,
+})

.codesandbox/tasks.json

@@ -1,13 +1,13 @@
 {
-
+  // These tasks will run in order when initializing your CodeSandbox project.
   "setupTasks": [
     {
       "name": "Install Dependencies",
       "command": "pnpm install"
     }
   ],
 
-
+  // These tasks can be run from CodeSandbox. Running one will open a log in the app.
   "tasks": {
     "build": {
       "name": "build",

.codesandbox/tsconfig.json

@@ -10,7 +10,7 @@
     "skipLibCheck": true,
     "esModuleInterop": true,
     "allowSyntheticDefaultImports": true,
-    "strict": true,
+    "strict": false,
     "forceConsistentCasingInFileNames": true,
     "noFallthroughCasesInSwitch": true,
     "module": "esnext",