0xsequence · shunkakinoki · Mar 13, 2025 · Mar 16, 2025 · Mar 16, 2025 · Mar 16, 2025
@@ -0,0 +1,3 @@
+# Sequence Project Access Key (Required)
+VITE_ENV=
+VITE_PROJECT_ACCESS_KEY= 
@@ -0,0 +1,44 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+.yarn/install-state.gz
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# env files (can opt-in for commiting if needed)
+.env*
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
+
+# env files
+.env
+.env.local
+.env.development
+.env.production
+.env.test
+!.env.sample
@@ -0,0 +1,8 @@
+cors-anywhere:
+	docker run -d -p 8080:8080 --dns 8.8.4.4 --name cors-anywhere testcab/cors-anywhere
+
+cors-anywhere-stop:
+	docker stop cors-anywhere
+
+cors-anywhere-start:
+	docker start cors-anywhere
@@ -0,0 +1,28 @@
+# Anypay Demo App
+
+A simple application demonstrating Sequence Anypay intent configuration.
+
+## Setup
+
+1.  Clone the `sequence-core` repo if you haven't already.
+2.  Install dependencies and build the core packages:
+    ```bash
+    pnpm install
+    pnpm build
+    ```
+3.  Copy `.env.sample` to `.env` and add your Sequence Project Access Key:
+    ```bash
+    cp apps/demo-anypay/.env.sample apps/demo-anypay/.env
+    ```
+4.  Run the development server:
+    ```bash
+    pnpm --filter demo-anypay dev
+    ```
+
+## Usage
+
+1.  Open the app in your browser.
+2.  Connect your wallet (e.g., Metamask).
+3.  Select a token from your balance list.
+4.  Click "Pay" or "Mock Contract Interaction".
+5.  Observe the generated intent configuration details.
@@ -0,0 +1,4 @@
+import { nextJsConfig } from '@repo/eslint-config/next-js'
+
+/** @type {import("eslint").Linter.Config} */
+export default nextJsConfig
@@ -0,0 +1,31 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+
+    <title>Sequence Anypay Demo</title>
+
+    <meta
+      name="description"
+      content="Seamless and secure wallet for web3, NFTs, and crypto. Explore, play, own, and trade with Sequence, web3's most user-friendly wallet"
+    />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+
+    <link rel="icon" href="/favicon.ico" sizes="any" />
+    <link rel="icon" href="/icon.svg" type="image/svg+xml" />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link
+      rel="preconnect"
+      href="https://fonts.gstatic.com"
+      crossorigin="anonymous"
+    />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"
+      rel="stylesheet"
+    />
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/index.tsx"></script>
+  </body>
+</html>
@@ -0,0 +1,67 @@
+{
+  "name": "demo-anypay",
+  "version": "0.1.0",
+  "type": "module",
+  "private": true,
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "lint": "eslint .",
+    "lint:fix": "eslint --fix .",
+    "prettier": "prettier --list-different './src/**/*.{ts,tsx}'",
+    "prettier:fix": "prettier --list-different --write './src/**/*.{ts,tsx}'",
+    "format": "pnpm run lint:fix && pnpm run prettier:fix",
+    "preview": "vite preview",
+    "prepare": "husky",
+    "test": "echo tests are not implemented.",
+    "typecheck": "tsc --noEmit",
+    "reinstall": "rimraf -g ./node_modules && pnpm install"
+  },
+  "dependencies": {
+    "@0xsequence/api": "workspace:*",
+    "@0xsequence/design-system": "^2.1.6",
+    "@0xsequence/hooks": "^5.1.0",
+    "@0xsequence/indexer": "^2.3.9",
+    "@0xsequence/network": "^2.3.9",
+    "@0xsequence/wagmi-connector": "^4.0.1",
+    "@0xsequence/wallet-core": "workspace:*",
+    "@0xsequence/wallet-primitives": "workspace:*",
+    "@0xsequence/wallet-wdk": "workspace:*",
+    "@radix-ui/react-popover": "^1.1.6",
+    "@repo/eslint-config": "workspace:*",
+    "@repo/typescript-config": "workspace:*",
+    "@tanstack/react-query": "^5.69.0",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "copy-to-clipboard": "^3.3.3",
+    "jotai": "^2.12.2",
+    "lucide-react": "^0.493.0",
+    "motion": "^12.6.2",
+    "ox": "^0.6.10",
+    "qrcode.react": "^4.2.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "react-router": "^7.4.0",
+    "tailwindcss": "^4.0.15",
+    "viem": "^2.24.1",
+    "wagmi": "^2.14.16"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.21.0",
+    "@tailwindcss/vite": "^4.0.15",
+    "@types/react": "^19.0.10",
+    "@types/react-dom": "^19.0.4",
+    "@vitejs/plugin-react": "^4.3.4",
+    "eslint": "^9.21.0",
+    "eslint-plugin-react-hooks": "^5.1.0",
+    "eslint-plugin-react-refresh": "^0.4.19",
+    "globals": "^15.15.0",
+    "husky": "^9.1.7",
+    "prettier": "^3.5.3",
+    "rimraf": "^6.0.1",
+    "typescript": "~5.7.2",
+    "typescript-eslint": "^8.24.1",
+    "vite": "^6.2.0",
+    "zod": "^3.24.2"
+  }
+}
@@ -0,0 +1,50 @@
+import { SequenceAPIClient } from '@0xsequence/api'
+import { useMemo } from 'react'
+import { useConfig } from '@0xsequence/hooks'
+
+/**
+ * Hook to access the Sequence API client instance.
+ *
+ * This hook provides a memoized instance of the Sequence API client that can be used
+ * to interact with Sequence services. The client is configured with the project's
+ * access key and environment-specific API URL.
+ *
+ * The API client provides access to various Sequence services including:
+ * - Exchange rates and pricing
+ * - Token swaps and quotes
+ * - Wallet linking and management
+ * - Token metadata and balances
+ *
+ * The client instance is memoized based on the project access key, meaning a new
+ * instance is only created when the access key changes.
+ *
+ * @see {@link https://docs.sequence.xyz/sdk/web/hooks/useAPIClient} for more detailed documentation.
+ *
+ * @returns {SequenceAPIClient} A configured instance of the Sequence API client
+ *
+ * @example
+ * ```tsx
+ * const apiClient = useAPIClient()
+ *
+ * // Get exchange rates
+ * const rate = await apiClient.getExchangeRate({ toCurrency: 'EUR' })
+ *
+ * // Get swap quote
+ * const quote = await apiClient.getSwapQuote({
+ *   chainId: 1,
+ *   userAddress: '0x...',
+ *   sellCurrencyAddress: '0x...',
+ *   buyCurrencyAddress: '0x...',
+ *   sellAmount: '1000000000000000000'
+ * })
+ * ```
+ */
+export const useAPIClient = () => {
+  const { projectAccessKey, jwt, env } = useConfig()
+
+  const apiClient = useMemo(() => {
+    return new SequenceAPIClient(env.apiUrl, projectAccessKey, jwt)
+  }, [projectAccessKey, jwt])
+
+  return apiClient
+}