Skip to content

Commit 3f26e74

Browse files
committed
Migrate demo-anypay v3
1 parent 3d9ea1e commit 3f26e74

25 files changed

Lines changed: 9242 additions & 2525 deletions

extras/demo-anypay/.env.sample

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
# Sequence Project Access Key (Required)
2+
VITE_ENV=
3+
VITE_PROJECT_ACCESS_KEY=

extras/demo-anypay/.gitignore

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2+
3+
# dependencies
4+
/node_modules
5+
/.pnp
6+
.pnp.js
7+
.yarn/install-state.gz
8+
9+
# testing
10+
/coverage
11+
12+
# next.js
13+
/.next/
14+
/out/
15+
16+
# production
17+
/build
18+
19+
# misc
20+
.DS_Store
21+
*.pem
22+
23+
# debug
24+
npm-debug.log*
25+
yarn-debug.log*
26+
yarn-error.log*
27+
28+
# env files (can opt-in for commiting if needed)
29+
.env*
30+
31+
# vercel
32+
.vercel
33+
34+
# typescript
35+
*.tsbuildinfo
36+
next-env.d.ts
37+
38+
# env files
39+
.env
40+
.env.local
41+
.env.development
42+
.env.production
43+
.env.test
44+
!.env.sample

extras/demo-anypay/Makefile

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
cors-anywhere:
2+
docker run -d -p 8080:8080 --dns 8.8.4.4 --name cors-anywhere testcab/cors-anywhere
3+
4+
cors-anywhere-stop:
5+
docker stop cors-anywhere
6+
7+
cors-anywhere-start:
8+
docker start cors-anywhere

extras/demo-anypay/README.md

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
# Anypay Demo App
2+
3+
A simple application demonstrating Sequence Anypay intent configuration.
4+
5+
## Setup
6+
7+
1. Clone the `sequence-core` repo if you haven't already.
8+
2. Install dependencies and build the core packages:
9+
```bash
10+
pnpm install
11+
pnpm build
12+
```
13+
3. Copy `.env.sample` to `.env` and add your Sequence Project Access Key:
14+
```bash
15+
cp apps/demo-anypay/.env.sample apps/demo-anypay/.env
16+
```
17+
4. Run the development server:
18+
```bash
19+
pnpm --filter demo-anypay dev
20+
```
21+
22+
## Usage
23+
24+
1. Open the app in your browser.
25+
2. Connect your wallet (e.g., Metamask).
26+
3. Select a token from your balance list.
27+
4. Click "Pay" or "Mock Contract Interaction".
28+
5. Observe the generated intent configuration details.
Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
import { nextJsConfig } from '@repo/eslint-config/next-js'
2+
3+
/** @type {import("eslint").Linter.Config} */
4+
export default nextJsConfig

extras/demo-anypay/index.html

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
6+
<title>Sequence Anypay Demo</title>
7+
8+
<meta
9+
name="description"
10+
content="Seamless and secure wallet for web3, NFTs, and crypto. Explore, play, own, and trade with Sequence, web3's most user-friendly wallet"
11+
/>
12+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
13+
14+
<link rel="icon" href="/favicon.ico" sizes="any" />
15+
<link rel="icon" href="/icon.svg" type="image/svg+xml" />
16+
<link rel="preconnect" href="https://fonts.googleapis.com" />
17+
<link
18+
rel="preconnect"
19+
href="https://fonts.gstatic.com"
20+
crossorigin="anonymous"
21+
/>
22+
<link
23+
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"
24+
rel="stylesheet"
25+
/>
26+
</head>
27+
<body>
28+
<div id="root"></div>
29+
<script type="module" src="/src/index.tsx"></script>
30+
</body>
31+
</html>

extras/demo-anypay/package.json

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
{
2+
"name": "demo-anypay",
3+
"version": "0.1.0",
4+
"type": "module",
5+
"private": true,
6+
"scripts": {
7+
"dev": "vite",
8+
"build": "tsc -b && vite build",
9+
"lint": "eslint .",
10+
"lint:fix": "eslint --fix .",
11+
"prettier": "prettier --list-different './src/**/*.{ts,tsx}'",
12+
"prettier:fix": "prettier --list-different --write './src/**/*.{ts,tsx}'",
13+
"format": "pnpm run lint:fix && pnpm run prettier:fix",
14+
"preview": "vite preview",
15+
"prepare": "husky",
16+
"test": "echo tests are not implemented.",
17+
"typecheck": "tsc --noEmit",
18+
"reinstall": "rimraf -g ./node_modules && pnpm install"
19+
},
20+
"dependencies": {
21+
"@0xsequence/api": "workspace:*",
22+
"@0xsequence/design-system": "^2.1.4",
23+
"@0xsequence/hooks": "^5.1.0",
24+
"@0xsequence/indexer": "^2.3.4",
25+
"@0xsequence/network": "^2.3.4",
26+
"@0xsequence/wallet-core": "workspace:*",
27+
"@0xsequence/wallet-primitives": "workspace:*",
28+
"@0xsequence/wallet-wdk": "workspace:*",
29+
"@0xsequence/wagmi-connector": "^4.0.1",
30+
"@radix-ui/react-popover": "^1.1.6",
31+
"@repo/eslint-config": "workspace:*",
32+
"@repo/typescript-config": "workspace:*",
33+
"@tanstack/react-query": "^5.69.0",
34+
"class-variance-authority": "^0.7.1",
35+
"clsx": "^2.1.1",
36+
"copy-to-clipboard": "^3.3.3",
37+
"jotai": "^2.12.2",
38+
"motion": "^12.6.2",
39+
"ox": "^0.6.10",
40+
"qrcode.react": "^4.2.0",
41+
"react": "^19.0.0",
42+
"react-dom": "^19.0.0",
43+
"react-router": "^7.4.0",
44+
"tailwindcss": "^4.0.15",
45+
"viem": "^2.24.1",
46+
"wagmi": "^2.14.16"
47+
},
48+
"devDependencies": {
49+
"@eslint/js": "^9.21.0",
50+
"@tailwindcss/vite": "^4.0.15",
51+
"@types/react": "^19.0.10",
52+
"@types/react-dom": "^19.0.4",
53+
"@vitejs/plugin-react": "^4.3.4",
54+
"eslint": "^9.21.0",
55+
"eslint-plugin-react-hooks": "^5.1.0",
56+
"eslint-plugin-react-refresh": "^0.4.19",
57+
"globals": "^15.15.0",
58+
"husky": "^9.1.7",
59+
"prettier": "^3.5.3",
60+
"rimraf": "^6.0.1",
61+
"typescript": "~5.7.2",
62+
"typescript-eslint": "^8.24.1",
63+
"vite": "^6.2.0",
64+
"zod": "^3.24.2"
65+
}
66+
}
1.04 KB
Binary file not shown.

extras/demo-anypay/public/icon.svg

Lines changed: 65 additions & 0 deletions
Loading
Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
import { SequenceAPIClient } from '@0xsequence/api'
2+
import { useMemo } from 'react'
3+
import { useConfig } from '@0xsequence/hooks'
4+
5+
/**
6+
* Hook to access the Sequence API client instance.
7+
*
8+
* This hook provides a memoized instance of the Sequence API client that can be used
9+
* to interact with Sequence services. The client is configured with the project's
10+
* access key and environment-specific API URL.
11+
*
12+
* The API client provides access to various Sequence services including:
13+
* - Exchange rates and pricing
14+
* - Token swaps and quotes
15+
* - Wallet linking and management
16+
* - Token metadata and balances
17+
*
18+
* The client instance is memoized based on the project access key, meaning a new
19+
* instance is only created when the access key changes.
20+
*
21+
* @see {@link https://docs.sequence.xyz/sdk/web/hooks/useAPIClient} for more detailed documentation.
22+
*
23+
* @returns {SequenceAPIClient} A configured instance of the Sequence API client
24+
*
25+
* @example
26+
* ```tsx
27+
* const apiClient = useAPIClient()
28+
*
29+
* // Get exchange rates
30+
* const rate = await apiClient.getExchangeRate({ toCurrency: 'EUR' })
31+
*
32+
* // Get swap quote
33+
* const quote = await apiClient.getSwapQuote({
34+
* chainId: 1,
35+
* userAddress: '0x...',
36+
* sellCurrencyAddress: '0x...',
37+
* buyCurrencyAddress: '0x...',
38+
* sellAmount: '1000000000000000000'
39+
* })
40+
* ```
41+
*/
42+
export const useAPIClient = () => {
43+
const { projectAccessKey, jwt, env } = useConfig()
44+
45+
const apiClient = useMemo(() => {
46+
return new SequenceAPIClient(env.apiUrl, projectAccessKey, jwt)
47+
}, [projectAccessKey, jwt])
48+
49+
return apiClient
50+
}

0 commit comments

Comments
 (0)