├── .gitignore ├── .vscode └── settings.json ├── pnpm-workspace.yaml ├── examples ├── dynamic-vite │ ├── src │ │ ├── vite-env.d.ts │ │ ├── main.tsx │ │ ├── App.tsx │ │ ├── index.css │ │ └── assets │ │ │ └── react.svg │ ├── tsconfig.json │ ├── .gitignore │ ├── vite.config.ts │ ├── index.html │ ├── tsconfig.node.json │ ├── tsconfig.app.json │ ├── eslint.config.js │ ├── package.json │ ├── public │ │ └── vite.svg │ └── README.md ├── privy-vite │ ├── src │ │ ├── vite-env.d.ts │ │ ├── App.tsx │ │ ├── main.tsx │ │ ├── index.css │ │ └── assets │ │ │ └── react.svg │ ├── tsconfig.json │ ├── vite.config.ts │ ├── .gitignore │ ├── index.html │ ├── tsconfig.node.json │ ├── tsconfig.app.json │ ├── eslint.config.js │ ├── package.json │ ├── public │ │ └── vite.svg │ └── README.md ├── connectkit-vite │ ├── src │ │ ├── vite-env.d.ts │ │ ├── index.css │ │ ├── main.tsx │ │ └── assets │ │ │ └── react.svg │ ├── tsconfig.json │ ├── vite.config.ts │ ├── .gitignore │ ├── index.html │ ├── tsconfig.node.json │ ├── tsconfig.app.json │ ├── eslint.config.js │ ├── package.json │ ├── public │ │ └── vite.svg │ └── README.md ├── rainbowkit-vite │ ├── src │ │ ├── vite-env.d.ts │ │ ├── main.tsx │ │ ├── index.css │ │ └── assets │ │ │ └── react.svg │ ├── tsconfig.json │ ├── vite.config.ts │ ├── .gitignore │ ├── index.html │ ├── tsconfig.node.json │ ├── tsconfig.app.json │ ├── eslint.config.js │ ├── package.json │ ├── public │ │ └── vite.svg │ └── README.md └── dynamic-nextjs │ ├── app │ ├── favicon.ico │ ├── layout.tsx │ ├── globals.css │ ├── components │ │ ├── Methods.css │ │ └── Methods.js │ ├── page.tsx │ ├── page.css │ └── page.module.css │ ├── public │ ├── image-dark.png │ ├── logo-dark.png │ ├── logo-light.png │ ├── image-light.png │ ├── vercel.svg │ ├── window.svg │ ├── file.svg │ ├── globe.svg │ └── next.svg │ ├── lib │ ├── dynamic.ts │ └── providers.tsx │ ├── next.config.ts │ ├── eslint.config.mjs │ ├── .gitignore │ ├── next.config.js │ ├── tsconfig.json │ ├── package.json │ └── README.md ├── packages └── dynamic-global-wallet │ ├── .gitignore │ ├── .vscode │ └── settings.json │ ├── src │ ├── eip6963.ts │ ├── solana-standard.ts │ ├── index.ts │ └── lib │ │ ├── wallet.ts │ │ ├── registerSolanaStandard.ts │ │ ├── EIP6963Emitter.ts │ │ └── config.ts │ ├── tsconfig.json │ ├── package.json │ └── README.md ├── package.json └── README.md /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "editor.formatOnSave": true 3 | } 4 | -------------------------------------------------------------------------------- /pnpm-workspace.yaml: -------------------------------------------------------------------------------- 1 | packages: 2 | - "examples/*" 3 | - "packages/*" 4 | -------------------------------------------------------------------------------- /examples/dynamic-vite/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /examples/privy-vite/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /examples/connectkit-vite/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /examples/rainbowkit-vite/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /packages/dynamic-global-wallet/.gitignore: -------------------------------------------------------------------------------- 1 | package-lock.json 2 | node_modules 3 | dist 4 | -------------------------------------------------------------------------------- /packages/dynamic-global-wallet/.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "cSpell.words": ["rdns"], 3 | "editor.formatOnSave": true 4 | } 5 | -------------------------------------------------------------------------------- /packages/dynamic-global-wallet/src/eip6963.ts: -------------------------------------------------------------------------------- 1 | import { EIP6963Emitter } from "./lib/EIP6963Emitter"; 2 | 3 | EIP6963Emitter(); 4 | -------------------------------------------------------------------------------- /examples/dynamic-nextjs/app/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/greenDream1218917/dynamic_wallet/HEAD/examples/dynamic-nextjs/app/favicon.ico -------------------------------------------------------------------------------- /examples/dynamic-nextjs/public/image-dark.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/greenDream1218917/dynamic_wallet/HEAD/examples/dynamic-nextjs/public/image-dark.png -------------------------------------------------------------------------------- /examples/dynamic-nextjs/public/logo-dark.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/greenDream1218917/dynamic_wallet/HEAD/examples/dynamic-nextjs/public/logo-dark.png -------------------------------------------------------------------------------- /examples/dynamic-nextjs/public/logo-light.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/greenDream1218917/dynamic_wallet/HEAD/examples/dynamic-nextjs/public/logo-light.png -------------------------------------------------------------------------------- /examples/dynamic-nextjs/public/image-light.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/greenDream1218917/dynamic_wallet/HEAD/examples/dynamic-nextjs/public/image-light.png -------------------------------------------------------------------------------- /packages/dynamic-global-wallet/src/solana-standard.ts: -------------------------------------------------------------------------------- 1 | import { registerSolanaStandard } from "./lib/registerSolanaStandard"; 2 | 3 | registerSolanaStandard(); 4 | -------------------------------------------------------------------------------- /examples/dynamic-nextjs/public/vercel.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /examples/dynamic-nextjs/lib/dynamic.ts: -------------------------------------------------------------------------------- 1 | export * from "@dynamic-labs/sdk-react-core"; 2 | export * from "@dynamic-labs/ethereum"; 3 | export * from "@dynamic-labs/solana"; 4 | -------------------------------------------------------------------------------- /packages/dynamic-global-wallet/src/index.ts: -------------------------------------------------------------------------------- 1 | export { registerSolanaStandard } from "./lib/registerSolanaStandard"; 2 | export { EIP6963Emitter } from "./lib/EIP6963Emitter"; 3 | -------------------------------------------------------------------------------- /examples/dynamic-vite/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "files": [], 3 | "references": [ 4 | { "path": "./tsconfig.app.json" }, 5 | { "path": "./tsconfig.node.json" } 6 | ] 7 | } 8 | -------------------------------------------------------------------------------- /examples/privy-vite/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "files": [], 3 | "references": [ 4 | { "path": "./tsconfig.app.json" }, 5 | { "path": "./tsconfig.node.json" } 6 | ] 7 | } 8 | -------------------------------------------------------------------------------- /examples/connectkit-vite/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "files": [], 3 | "references": [ 4 | { "path": "./tsconfig.app.json" }, 5 | { "path": "./tsconfig.node.json" } 6 | ] 7 | } 8 | -------------------------------------------------------------------------------- /examples/rainbowkit-vite/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "files": [], 3 | "references": [ 4 | { "path": "./tsconfig.app.json" }, 5 | { "path": "./tsconfig.node.json" } 6 | ] 7 | } 8 | -------------------------------------------------------------------------------- /examples/dynamic-nextjs/next.config.ts: -------------------------------------------------------------------------------- 1 | import type { NextConfig } from "next"; 2 | 3 | const nextConfig: NextConfig = { 4 | /* config options here */ 5 | }; 6 | 7 | export default nextConfig; 8 | -------------------------------------------------------------------------------- /examples/privy-vite/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from "vite"; 2 | import react from "@vitejs/plugin-react"; 3 | 4 | // https://vite.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | server: { 8 | port: 3003, 9 | }, 10 | }); 11 | -------------------------------------------------------------------------------- /examples/rainbowkit-vite/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from "vite"; 2 | import react from "@vitejs/plugin-react"; 3 | 4 | // https://vite.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | server: { 8 | port: 3004, 9 | }, 10 | }); 11 | -------------------------------------------------------------------------------- /examples/dynamic-vite/src/main.tsx: -------------------------------------------------------------------------------- 1 | import { StrictMode } from 'react' 2 | import { createRoot } from 'react-dom/client' 3 | import './index.css' 4 | import App from './App.tsx' 5 | 6 | createRoot(document.getElementById('root')!).render( 7 | 8 | 9 | , 10 | ) 11 | -------------------------------------------------------------------------------- /examples/connectkit-vite/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from "vite"; 2 | import react from "@vitejs/plugin-react"; 3 | 4 | // https://vite.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | server: { 8 | port: 3001, 9 | }, 10 | define: { 11 | "process.env": process.env, 12 | }, 13 | }); 14 | -------------------------------------------------------------------------------- /examples/dynamic-vite/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /examples/privy-vite/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /examples/connectkit-vite/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /examples/rainbowkit-vite/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /examples/dynamic-nextjs/public/window.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /examples/dynamic-nextjs/public/file.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /examples/dynamic-vite/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from "vite"; 2 | import react from "@vitejs/plugin-react"; 3 | import { polyfillNode } from "esbuild-plugin-polyfill-node"; 4 | 5 | // https://vite.dev/config/ 6 | export default defineConfig({ 7 | plugins: [react(), polyfillNode()], 8 | server: { 9 | port: 3002, 10 | }, 11 | define: { 12 | "process.env": process.env, 13 | }, 14 | }); 15 | -------------------------------------------------------------------------------- /packages/dynamic-global-wallet/src/lib/wallet.ts: -------------------------------------------------------------------------------- 1 | import { 2 | createGlobalWalletClient, 3 | GlobalWalletClient, 4 | } from "@dynamic-labs/global-wallet-client"; 5 | import { config } from "./config"; 6 | 7 | const Wallet: GlobalWalletClient = createGlobalWalletClient({ 8 | environmentId: config.environmentId, 9 | popup: { 10 | url: config.walletUrl, 11 | }, 12 | }); 13 | 14 | export default Wallet; 15 | -------------------------------------------------------------------------------- /examples/privy-vite/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite + React + TS 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /examples/connectkit-vite/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite + React + TS 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /examples/dynamic-vite/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite + React + TS 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /examples/rainbowkit-vite/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite + React + TS 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /examples/dynamic-nextjs/eslint.config.mjs: -------------------------------------------------------------------------------- 1 | import { dirname } from "path"; 2 | import { fileURLToPath } from "url"; 3 | import { FlatCompat } from "@eslint/eslintrc"; 4 | 5 | const __filename = fileURLToPath(import.meta.url); 6 | const __dirname = dirname(__filename); 7 | 8 | const compat = new FlatCompat({ 9 | baseDirectory: __dirname, 10 | }); 11 | 12 | const eslintConfig = [ 13 | ...compat.extends("next/core-web-vitals", "next/typescript"), 14 | ]; 15 | 16 | export default eslintConfig; 17 | -------------------------------------------------------------------------------- /packages/dynamic-global-wallet/src/lib/registerSolanaStandard.ts: -------------------------------------------------------------------------------- 1 | import Wallet from "./wallet"; 2 | import { 3 | createSolanaWallet, 4 | registerWallet, 5 | } from "@dynamic-labs/global-wallet-client/solana"; 6 | import { config } from "./config"; 7 | 8 | export const registerSolanaStandard = () => { 9 | registerWallet( 10 | createSolanaWallet( 11 | { 12 | icon: config.walletIcon as any, 13 | name: config.walletName, 14 | }, 15 | Wallet 16 | ) 17 | ); 18 | }; 19 | -------------------------------------------------------------------------------- /packages/dynamic-global-wallet/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "moduleResolution": "bundler", 4 | "module": "esnext", 5 | "target": "ES6", 6 | "rootDir": "./src", 7 | "strict": true, 8 | "exactOptionalPropertyTypes": true, 9 | "esModuleInterop": false, 10 | "skipLibCheck": true, 11 | "forceConsistentCasingInFileNames": true, 12 | "sourceMap": true 13 | }, 14 | "include": ["src/**/*"], 15 | "exclude": ["node_modules", "dist"], 16 | "tsc-alias": { 17 | "verbose": false, 18 | "resolveFullPaths": true 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /packages/dynamic-global-wallet/src/lib/EIP6963Emitter.ts: -------------------------------------------------------------------------------- 1 | import { 2 | announceEip6963Provider, 3 | createEIP1193Provider, 4 | } from "@dynamic-labs/global-wallet-client/ethereum"; 5 | import Wallet from "./wallet"; 6 | import { config } from "./config"; 7 | 8 | export const EIP6963Emitter = () => { 9 | announceEip6963Provider({ 10 | info: { 11 | icon: config.walletIcon as any, 12 | name: config.walletName, 13 | rdns: config.eip6963.rdns, 14 | uuid: config.environmentId, 15 | }, 16 | provider: createEIP1193Provider(Wallet), 17 | }); 18 | }; 19 | -------------------------------------------------------------------------------- /examples/dynamic-nextjs/app/layout.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import "./globals.css"; 4 | 5 | import { Inter } from "next/font/google"; 6 | import Providers from "@/lib/providers"; 7 | 8 | const inter = Inter({ subsets: ["latin"] }); 9 | 10 | import "dynamic-global-wallet/eip6963"; 11 | import "dynamic-global-wallet/solana-standard"; 12 | 13 | export default function RootLayout({ 14 | children, 15 | }: { 16 | children: React.ReactNode; 17 | }) { 18 | return ( 19 | 20 | 21 | {children} 22 | 23 | 24 | ); 25 | } 26 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "dynamic-global-wallet-example", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "directories": { 7 | "example": "examples" 8 | }, 9 | "scripts": { 10 | "dynamic-nextjs": "pnpm -F dynamic-nextjs dev", 11 | "dynamic-vite": "pnpm -F dynamic-vite dev", 12 | "privy-vite": "pnpm -F privy-vite dev", 13 | "rainbowkit-vite": "pnpm -F rainbowkit-vite dev", 14 | "connectkit-vite": "pnpm -F connectkit-vite dev", 15 | "build-dynamic-global-wallet": "pnpm -F dynamic-global-wallet build" 16 | }, 17 | "keywords": [], 18 | "author": "", 19 | "license": "ISC" 20 | } 21 | -------------------------------------------------------------------------------- /examples/dynamic-nextjs/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.* 7 | .yarn/* 8 | !.yarn/patches 9 | !.yarn/plugins 10 | !.yarn/releases 11 | !.yarn/versions 12 | 13 | # testing 14 | /coverage 15 | 16 | # next.js 17 | /.next/ 18 | /out/ 19 | 20 | # production 21 | /build 22 | 23 | # misc 24 | .DS_Store 25 | *.pem 26 | 27 | # debug 28 | npm-debug.log* 29 | yarn-debug.log* 30 | yarn-error.log* 31 | .pnpm-debug.log* 32 | 33 | # env files (can opt-in for committing if needed) 34 | .env* 35 | 36 | # vercel 37 | .vercel 38 | 39 | # typescript 40 | *.tsbuildinfo 41 | next-env.d.ts 42 | -------------------------------------------------------------------------------- /examples/dynamic-nextjs/lib/providers.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import { DynamicContextProvider } from "@dynamic-labs/sdk-react-core"; 4 | import { EthereumWalletConnectors } from "@dynamic-labs/ethereum"; 5 | import { SolanaWalletConnectors } from "@dynamic-labs/solana"; 6 | 7 | export default function Providers({ children }: { children: React.ReactNode }) { 8 | return ( 9 | 16 | {children} 17 | 18 | ); 19 | } 20 | -------------------------------------------------------------------------------- /examples/dynamic-nextjs/next.config.js: -------------------------------------------------------------------------------- 1 | 2 | const webpack = require('webpack'); 3 | 4 | module.exports = { 5 | webpack: (config, { buildId, dev, isServer, defaultLoaders, webpack }) => { 6 | config.resolve.fallback = { 7 | ...config.resolve.fallback, 8 | crypto: require.resolve('crypto-browserify'), 9 | stream: require.resolve('stream-browserify'), 10 | assert: require.resolve('assert'), 11 | process: require.resolve('process/browser.js'), 12 | }; 13 | config.plugins.push( 14 | new webpack.ProvidePlugin({ 15 | Buffer: ['buffer', 'Buffer'], 16 | process: 'process/browser.js', 17 | }) 18 | ); 19 | 20 | return config; 21 | }, 22 | }; 23 | -------------------------------------------------------------------------------- /examples/privy-vite/tsconfig.node.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo", 4 | "target": "ES2022", 5 | "lib": ["ES2023"], 6 | "module": "ESNext", 7 | "skipLibCheck": true, 8 | 9 | /* Bundler mode */ 10 | "moduleResolution": "bundler", 11 | "allowImportingTsExtensions": true, 12 | "isolatedModules": true, 13 | "moduleDetection": "force", 14 | "noEmit": true, 15 | 16 | /* Linting */ 17 | "strict": true, 18 | "noUnusedLocals": true, 19 | "noUnusedParameters": true, 20 | "noFallthroughCasesInSwitch": true, 21 | "noUncheckedSideEffectImports": true 22 | }, 23 | "include": ["vite.config.ts"] 24 | } 25 | -------------------------------------------------------------------------------- /examples/connectkit-vite/tsconfig.node.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo", 4 | "target": "ES2022", 5 | "lib": ["ES2023"], 6 | "module": "ESNext", 7 | "skipLibCheck": true, 8 | 9 | /* Bundler mode */ 10 | "moduleResolution": "bundler", 11 | "allowImportingTsExtensions": true, 12 | "isolatedModules": true, 13 | "moduleDetection": "force", 14 | "noEmit": true, 15 | 16 | /* Linting */ 17 | "strict": true, 18 | "noUnusedLocals": true, 19 | "noUnusedParameters": true, 20 | "noFallthroughCasesInSwitch": true, 21 | "noUncheckedSideEffectImports": true 22 | }, 23 | "include": ["vite.config.ts"] 24 | } 25 | -------------------------------------------------------------------------------- /examples/dynamic-vite/tsconfig.node.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo", 4 | "target": "ES2022", 5 | "lib": ["ES2023"], 6 | "module": "ESNext", 7 | "skipLibCheck": true, 8 | 9 | /* Bundler mode */ 10 | "moduleResolution": "bundler", 11 | "allowImportingTsExtensions": true, 12 | "isolatedModules": true, 13 | "moduleDetection": "force", 14 | "noEmit": true, 15 | 16 | /* Linting */ 17 | "strict": true, 18 | "noUnusedLocals": true, 19 | "noUnusedParameters": true, 20 | "noFallthroughCasesInSwitch": true, 21 | "noUncheckedSideEffectImports": true 22 | }, 23 | "include": ["vite.config.ts"] 24 | } 25 | -------------------------------------------------------------------------------- /examples/rainbowkit-vite/tsconfig.node.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo", 4 | "target": "ES2022", 5 | "lib": ["ES2023"], 6 | "module": "ESNext", 7 | "skipLibCheck": true, 8 | 9 | /* Bundler mode */ 10 | "moduleResolution": "bundler", 11 | "allowImportingTsExtensions": true, 12 | "isolatedModules": true, 13 | "moduleDetection": "force", 14 | "noEmit": true, 15 | 16 | /* Linting */ 17 | "strict": true, 18 | "noUnusedLocals": true, 19 | "noUnusedParameters": true, 20 | "noFallthroughCasesInSwitch": true, 21 | "noUncheckedSideEffectImports": true 22 | }, 23 | "include": ["vite.config.ts"] 24 | } 25 | -------------------------------------------------------------------------------- /examples/dynamic-nextjs/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ES2017", 4 | "lib": ["dom", "dom.iterable", "esnext"], 5 | "allowJs": true, 6 | "skipLibCheck": true, 7 | "strict": true, 8 | "noEmit": true, 9 | "esModuleInterop": true, 10 | "module": "esnext", 11 | "moduleResolution": "bundler", 12 | "resolveJsonModule": true, 13 | "isolatedModules": true, 14 | "jsx": "preserve", 15 | "incremental": true, 16 | "plugins": [ 17 | { 18 | "name": "next" 19 | } 20 | ], 21 | "paths": { 22 | "@/*": ["./*"] 23 | } 24 | }, 25 | "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"], 26 | "exclude": ["node_modules"] 27 | } 28 | -------------------------------------------------------------------------------- /examples/privy-vite/src/App.tsx: -------------------------------------------------------------------------------- 1 | import { usePrivy } from "@privy-io/react-auth"; 2 | 3 | function App() { 4 | const { ready, authenticated, user, login, logout } = usePrivy(); 5 | 6 | return ( 7 |
8 | {!ready ? ( 9 |
Loading...
10 | ) : authenticated ? ( 11 |
12 |

Welcome!

13 |

Wallet address: {user?.wallet?.address || "no wallet"}

14 | 15 |
16 | ) : ( 17 |
18 |

Please Login

19 | 20 |
21 | )} 22 |
23 | ); 24 | } 25 | 26 | export default App; 27 | -------------------------------------------------------------------------------- /examples/privy-vite/src/main.tsx: -------------------------------------------------------------------------------- 1 | import { StrictMode } from "react"; 2 | import { createRoot } from "react-dom/client"; 3 | import "./index.css"; 4 | import App from "./App.tsx"; 5 | import { PrivyProvider } from "@privy-io/react-auth"; 6 | 7 | import "dynamic-global-wallet/eip6963"; 8 | import "dynamic-global-wallet/solana-standard"; 9 | 10 | createRoot(document.getElementById("root")!).render( 11 | 12 | 22 | 23 | 24 | 25 | ); 26 | -------------------------------------------------------------------------------- /examples/dynamic-vite/src/App.tsx: -------------------------------------------------------------------------------- 1 | import { EthereumWalletConnectors } from "@dynamic-labs/ethereum"; 2 | import { 3 | DynamicContextProvider, 4 | DynamicWidget, 5 | } from "@dynamic-labs/sdk-react-core"; 6 | import { SolanaWalletConnectors } from "@dynamic-labs/solana"; 7 | 8 | import "dynamic-global-wallet/eip6963"; 9 | import "dynamic-global-wallet/solana-standard"; 10 | 11 | function App() { 12 | return ( 13 | 20 | 21 | 22 | ); 23 | } 24 | 25 | export default App; 26 | -------------------------------------------------------------------------------- /examples/privy-vite/tsconfig.app.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo", 4 | "target": "ES2020", 5 | "useDefineForClassFields": true, 6 | "lib": ["ES2020", "DOM", "DOM.Iterable"], 7 | "module": "ESNext", 8 | "skipLibCheck": true, 9 | 10 | /* Bundler mode */ 11 | "moduleResolution": "bundler", 12 | "allowImportingTsExtensions": true, 13 | "isolatedModules": true, 14 | "moduleDetection": "force", 15 | "noEmit": true, 16 | "jsx": "react-jsx", 17 | 18 | /* Linting */ 19 | "strict": true, 20 | "noUnusedLocals": true, 21 | "noUnusedParameters": true, 22 | "noFallthroughCasesInSwitch": true, 23 | "noUncheckedSideEffectImports": true 24 | }, 25 | "include": ["src"] 26 | } 27 | -------------------------------------------------------------------------------- /examples/connectkit-vite/tsconfig.app.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo", 4 | "target": "ES2020", 5 | "useDefineForClassFields": true, 6 | "lib": ["ES2020", "DOM", "DOM.Iterable"], 7 | "module": "ESNext", 8 | "skipLibCheck": true, 9 | 10 | /* Bundler mode */ 11 | "moduleResolution": "bundler", 12 | "allowImportingTsExtensions": true, 13 | "isolatedModules": true, 14 | "moduleDetection": "force", 15 | "noEmit": true, 16 | "jsx": "react-jsx", 17 | 18 | /* Linting */ 19 | "strict": true, 20 | "noUnusedLocals": true, 21 | "noUnusedParameters": true, 22 | "noFallthroughCasesInSwitch": true, 23 | "noUncheckedSideEffectImports": true 24 | }, 25 | "include": ["src"] 26 | } 27 | -------------------------------------------------------------------------------- /examples/dynamic-vite/tsconfig.app.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo", 4 | "target": "ES2020", 5 | "useDefineForClassFields": true, 6 | "lib": ["ES2020", "DOM", "DOM.Iterable"], 7 | "module": "ESNext", 8 | "skipLibCheck": true, 9 | 10 | /* Bundler mode */ 11 | "moduleResolution": "bundler", 12 | "allowImportingTsExtensions": true, 13 | "isolatedModules": true, 14 | "moduleDetection": "force", 15 | "noEmit": true, 16 | "jsx": "react-jsx", 17 | 18 | /* Linting */ 19 | "strict": true, 20 | "noUnusedLocals": true, 21 | "noUnusedParameters": true, 22 | "noFallthroughCasesInSwitch": true, 23 | "noUncheckedSideEffectImports": true 24 | }, 25 | "include": ["src"] 26 | } 27 | -------------------------------------------------------------------------------- /examples/rainbowkit-vite/tsconfig.app.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo", 4 | "target": "ES2020", 5 | "useDefineForClassFields": true, 6 | "lib": ["ES2020", "DOM", "DOM.Iterable"], 7 | "module": "ESNext", 8 | "skipLibCheck": true, 9 | 10 | /* Bundler mode */ 11 | "moduleResolution": "bundler", 12 | "allowImportingTsExtensions": true, 13 | "isolatedModules": true, 14 | "moduleDetection": "force", 15 | "noEmit": true, 16 | "jsx": "react-jsx", 17 | 18 | /* Linting */ 19 | "strict": true, 20 | "noUnusedLocals": true, 21 | "noUnusedParameters": true, 22 | "noFallthroughCasesInSwitch": true, 23 | "noUncheckedSideEffectImports": true 24 | }, 25 | "include": ["src"] 26 | } 27 | -------------------------------------------------------------------------------- /examples/dynamic-nextjs/app/globals.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --background: #ffffff; 3 | --foreground: #171717; 4 | } 5 | 6 | @media (prefers-color-scheme: dark) { 7 | :root { 8 | --background: #0a0a0a; 9 | --foreground: #ededed; 10 | } 11 | } 12 | 13 | html, 14 | body { 15 | max-width: 100vw; 16 | overflow-x: hidden; 17 | } 18 | 19 | body { 20 | color: var(--foreground); 21 | background: var(--background); 22 | font-family: Arial, Helvetica, sans-serif; 23 | -webkit-font-smoothing: antialiased; 24 | -moz-osx-font-smoothing: grayscale; 25 | } 26 | 27 | * { 28 | box-sizing: border-box; 29 | padding: 0; 30 | margin: 0; 31 | } 32 | 33 | a { 34 | color: inherit; 35 | text-decoration: none; 36 | } 37 | 38 | @media (prefers-color-scheme: dark) { 39 | html { 40 | color-scheme: dark; 41 | } 42 | } 43 | -------------------------------------------------------------------------------- /examples/dynamic-vite/eslint.config.js: -------------------------------------------------------------------------------- 1 | import js from '@eslint/js' 2 | import globals from 'globals' 3 | import reactHooks from 'eslint-plugin-react-hooks' 4 | import reactRefresh from 'eslint-plugin-react-refresh' 5 | import tseslint from 'typescript-eslint' 6 | 7 | export default tseslint.config( 8 | { ignores: ['dist'] }, 9 | { 10 | extends: [js.configs.recommended, ...tseslint.configs.recommended], 11 | files: ['**/*.{ts,tsx}'], 12 | languageOptions: { 13 | ecmaVersion: 2020, 14 | globals: globals.browser, 15 | }, 16 | plugins: { 17 | 'react-hooks': reactHooks, 18 | 'react-refresh': reactRefresh, 19 | }, 20 | rules: { 21 | ...reactHooks.configs.recommended.rules, 22 | 'react-refresh/only-export-components': [ 23 | 'warn', 24 | { allowConstantExport: true }, 25 | ], 26 | }, 27 | }, 28 | ) 29 | -------------------------------------------------------------------------------- /examples/privy-vite/eslint.config.js: -------------------------------------------------------------------------------- 1 | import js from '@eslint/js' 2 | import globals from 'globals' 3 | import reactHooks from 'eslint-plugin-react-hooks' 4 | import reactRefresh from 'eslint-plugin-react-refresh' 5 | import tseslint from 'typescript-eslint' 6 | 7 | export default tseslint.config( 8 | { ignores: ['dist'] }, 9 | { 10 | extends: [js.configs.recommended, ...tseslint.configs.recommended], 11 | files: ['**/*.{ts,tsx}'], 12 | languageOptions: { 13 | ecmaVersion: 2020, 14 | globals: globals.browser, 15 | }, 16 | plugins: { 17 | 'react-hooks': reactHooks, 18 | 'react-refresh': reactRefresh, 19 | }, 20 | rules: { 21 | ...reactHooks.configs.recommended.rules, 22 | 'react-refresh/only-export-components': [ 23 | 'warn', 24 | { allowConstantExport: true }, 25 | ], 26 | }, 27 | }, 28 | ) 29 | -------------------------------------------------------------------------------- /examples/connectkit-vite/eslint.config.js: -------------------------------------------------------------------------------- 1 | import js from '@eslint/js' 2 | import globals from 'globals' 3 | import reactHooks from 'eslint-plugin-react-hooks' 4 | import reactRefresh from 'eslint-plugin-react-refresh' 5 | import tseslint from 'typescript-eslint' 6 | 7 | export default tseslint.config( 8 | { ignores: ['dist'] }, 9 | { 10 | extends: [js.configs.recommended, ...tseslint.configs.recommended], 11 | files: ['**/*.{ts,tsx}'], 12 | languageOptions: { 13 | ecmaVersion: 2020, 14 | globals: globals.browser, 15 | }, 16 | plugins: { 17 | 'react-hooks': reactHooks, 18 | 'react-refresh': reactRefresh, 19 | }, 20 | rules: { 21 | ...reactHooks.configs.recommended.rules, 22 | 'react-refresh/only-export-components': [ 23 | 'warn', 24 | { allowConstantExport: true }, 25 | ], 26 | }, 27 | }, 28 | ) 29 | -------------------------------------------------------------------------------- /examples/rainbowkit-vite/eslint.config.js: -------------------------------------------------------------------------------- 1 | import js from '@eslint/js' 2 | import globals from 'globals' 3 | import reactHooks from 'eslint-plugin-react-hooks' 4 | import reactRefresh from 'eslint-plugin-react-refresh' 5 | import tseslint from 'typescript-eslint' 6 | 7 | export default tseslint.config( 8 | { ignores: ['dist'] }, 9 | { 10 | extends: [js.configs.recommended, ...tseslint.configs.recommended], 11 | files: ['**/*.{ts,tsx}'], 12 | languageOptions: { 13 | ecmaVersion: 2020, 14 | globals: globals.browser, 15 | }, 16 | plugins: { 17 | 'react-hooks': reactHooks, 18 | 'react-refresh': reactRefresh, 19 | }, 20 | rules: { 21 | ...reactHooks.configs.recommended.rules, 22 | 'react-refresh/only-export-components': [ 23 | 'warn', 24 | { allowConstantExport: true }, 25 | ], 26 | }, 27 | }, 28 | ) 29 | -------------------------------------------------------------------------------- /examples/privy-vite/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "privy-vite", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "tsc -b && vite build", 9 | "lint": "eslint .", 10 | "preview": "vite preview" 11 | }, 12 | "dependencies": { 13 | "@privy-io/react-auth": "^2.2.0", 14 | "react": "^18.3.1", 15 | "react-dom": "^18.3.1", 16 | "dynamic-global-wallet": "workspace:*" 17 | }, 18 | "devDependencies": { 19 | "@eslint/js": "^9.17.0", 20 | "@types/react": "^18.3.18", 21 | "@types/react-dom": "^18.3.5", 22 | "@vitejs/plugin-react": "^4.3.4", 23 | "eslint": "^9.17.0", 24 | "eslint-plugin-react-hooks": "^5.0.0", 25 | "eslint-plugin-react-refresh": "^0.4.16", 26 | "globals": "^15.14.0", 27 | "typescript": "~5.6.2", 28 | "typescript-eslint": "^8.18.2", 29 | "vite": "^6.0.5" 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /examples/connectkit-vite/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "connectkit-vite", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "tsc -b && vite build", 9 | "lint": "eslint .", 10 | "preview": "vite preview" 11 | }, 12 | "dependencies": { 13 | "@tanstack/react-query": "^5.65.1", 14 | "connectkit": "^1.8.2", 15 | "react": "^18.3.1", 16 | "react-dom": "^18.3.1", 17 | "viem": "2.x", 18 | "wagmi": "^2.14.9", 19 | "dynamic-global-wallet": "workspace:*" 20 | }, 21 | "devDependencies": { 22 | "@eslint/js": "^9.17.0", 23 | "@types/react": "^18.3.18", 24 | "@types/react-dom": "^18.3.5", 25 | "@vitejs/plugin-react": "^4.3.4", 26 | "eslint": "^9.17.0", 27 | "eslint-plugin-react-hooks": "^5.0.0", 28 | "eslint-plugin-react-refresh": "^0.4.16", 29 | "globals": "^15.14.0", 30 | "typescript": "~5.6.2", 31 | "typescript-eslint": "^8.18.2", 32 | "vite": "^6.0.5" 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /examples/rainbowkit-vite/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "rainbowkit-vite", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "tsc -b && vite build", 9 | "lint": "eslint .", 10 | "preview": "vite preview" 11 | }, 12 | "dependencies": { 13 | "@rainbow-me/rainbowkit": "^2.2.3", 14 | "@tanstack/react-query": "^5.65.1", 15 | "react": "^18.3.1", 16 | "react-dom": "^18.3.1", 17 | "viem": "2.x", 18 | "wagmi": "^2.14.9", 19 | "dynamic-global-wallet": "workspace:*" 20 | }, 21 | "devDependencies": { 22 | "@eslint/js": "^9.17.0", 23 | "@types/react": "^18.3.18", 24 | "@types/react-dom": "^18.3.5", 25 | "@vitejs/plugin-react": "^4.3.4", 26 | "eslint": "^9.17.0", 27 | "eslint-plugin-react-hooks": "^5.0.0", 28 | "eslint-plugin-react-refresh": "^0.4.16", 29 | "globals": "^15.14.0", 30 | "typescript": "~5.6.2", 31 | "typescript-eslint": "^8.18.2", 32 | "vite": "^6.0.5" 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /examples/dynamic-nextjs/public/globe.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /examples/dynamic-nextjs/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "dynamic-nextjs", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "dev": "next dev", 7 | "build": "next build", 8 | "start": "next start", 9 | "lint": "next lint" 10 | }, 11 | "dependencies": { 12 | "react": "^18.3.1", 13 | "react-dom": "^18.3.1", 14 | "next": "15.1.6", 15 | "@dynamic-labs/sdk-react-core": "*", 16 | "viem": "*", 17 | "@dynamic-labs/ethereum": "*", 18 | "@dynamic-labs/solana": "*", 19 | "crypto-browserify": "^3.12.0", 20 | "stream-browserify": "^3.0.0", 21 | "process": "^0.11.10", 22 | "dynamic-global-wallet": "workspace:*" 23 | }, 24 | "devDependencies": { 25 | "typescript": "^5", 26 | "@types/node": "^20", 27 | "@types/react": "^18", 28 | "@types/react-dom": "^18", 29 | "eslint": "^9", 30 | "eslint-config-next": "15.1.6", 31 | "@eslint/eslintrc": "^3" 32 | }, 33 | "browser": { 34 | "crypto": false 35 | }, 36 | "overrides": { 37 | "rpc-websockets": "7.10.0", 38 | "@solana/web3.js": "1.91.6" 39 | } 40 | } 41 | -------------------------------------------------------------------------------- /examples/dynamic-vite/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "dynamic-vite", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "tsc -b && vite build", 9 | "lint": "eslint .", 10 | "preview": "vite preview" 11 | }, 12 | "dependencies": { 13 | "@dynamic-labs/ethereum": "*", 14 | "@dynamic-labs/sdk-react-core": "*", 15 | "@dynamic-labs/solana": "*", 16 | "dynamic-global-wallet": "workspace:*", 17 | "react": "^18.3.1", 18 | "react-dom": "^18.3.1", 19 | "viem": "*" 20 | }, 21 | "devDependencies": { 22 | "@eslint/js": "^9.17.0", 23 | "@types/react": "^18.3.18", 24 | "@types/react-dom": "^18.3.5", 25 | "@vitejs/plugin-react": "^4.3.4", 26 | "esbuild-plugin-polyfill-node": "^0.3.0", 27 | "eslint": "^9.17.0", 28 | "eslint-plugin-react-hooks": "^5.0.0", 29 | "eslint-plugin-react-refresh": "^0.4.16", 30 | "globals": "^15.14.0", 31 | "typescript": "~5.6.2", 32 | "typescript-eslint": "^8.18.2", 33 | "vite": "^6.0.5" 34 | }, 35 | "overrides": { 36 | "@solana/web3.js": "1.91.6" 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /examples/rainbowkit-vite/src/main.tsx: -------------------------------------------------------------------------------- 1 | import { StrictMode } from "react"; 2 | import { createRoot } from "react-dom/client"; 3 | import "./index.css"; 4 | 5 | import "@rainbow-me/rainbowkit/styles.css"; 6 | import { 7 | ConnectButton, 8 | getDefaultConfig, 9 | RainbowKitProvider, 10 | } from "@rainbow-me/rainbowkit"; 11 | import { WagmiProvider } from "wagmi"; 12 | import { mainnet, polygon, optimism, arbitrum, base } from "wagmi/chains"; 13 | import { QueryClientProvider, QueryClient } from "@tanstack/react-query"; 14 | 15 | import "dynamic-global-wallet/eip6963"; 16 | import "dynamic-global-wallet/solana-standard"; 17 | 18 | const queryClient = new QueryClient(); 19 | 20 | const config = getDefaultConfig({ 21 | appName: "My RainbowKit App", 22 | projectId: "YOUR_PROJECT_ID", 23 | chains: [mainnet, polygon, optimism, arbitrum, base], 24 | ssr: true, // If your dApp uses server side rendering (SSR) 25 | }); 26 | 27 | createRoot(document.getElementById("root")!).render( 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | ); 38 | -------------------------------------------------------------------------------- /examples/dynamic-nextjs/public/next.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /examples/privy-vite/public/vite.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /examples/connectkit-vite/public/vite.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /examples/dynamic-vite/public/vite.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /examples/dynamic-vite/src/index.css: -------------------------------------------------------------------------------- 1 | :root { 2 | font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif; 3 | line-height: 1.5; 4 | font-weight: 400; 5 | 6 | color-scheme: light dark; 7 | color: rgba(255, 255, 255, 0.87); 8 | background-color: #242424; 9 | 10 | font-synthesis: none; 11 | text-rendering: optimizeLegibility; 12 | -webkit-font-smoothing: antialiased; 13 | -moz-osx-font-smoothing: grayscale; 14 | } 15 | 16 | a { 17 | font-weight: 500; 18 | color: #646cff; 19 | text-decoration: inherit; 20 | } 21 | a:hover { 22 | color: #535bf2; 23 | } 24 | 25 | body { 26 | margin: 0; 27 | display: flex; 28 | place-items: center; 29 | min-width: 320px; 30 | min-height: 100vh; 31 | } 32 | 33 | h1 { 34 | font-size: 3.2em; 35 | line-height: 1.1; 36 | } 37 | 38 | button { 39 | border-radius: 8px; 40 | border: 1px solid transparent; 41 | padding: 0.6em 1.2em; 42 | font-size: 1em; 43 | font-weight: 500; 44 | font-family: inherit; 45 | background-color: #1a1a1a; 46 | cursor: pointer; 47 | transition: border-color 0.25s; 48 | } 49 | button:hover { 50 | border-color: #646cff; 51 | } 52 | button:focus, 53 | button:focus-visible { 54 | outline: 4px auto -webkit-focus-ring-color; 55 | } 56 | 57 | @media (prefers-color-scheme: light) { 58 | :root { 59 | color: #213547; 60 | background-color: #ffffff; 61 | } 62 | a:hover { 63 | color: #747bff; 64 | } 65 | button { 66 | background-color: #f9f9f9; 67 | } 68 | } 69 | -------------------------------------------------------------------------------- /examples/privy-vite/src/index.css: -------------------------------------------------------------------------------- 1 | :root { 2 | font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif; 3 | line-height: 1.5; 4 | font-weight: 400; 5 | 6 | color-scheme: light dark; 7 | color: rgba(255, 255, 255, 0.87); 8 | background-color: #242424; 9 | 10 | font-synthesis: none; 11 | text-rendering: optimizeLegibility; 12 | -webkit-font-smoothing: antialiased; 13 | -moz-osx-font-smoothing: grayscale; 14 | } 15 | 16 | a { 17 | font-weight: 500; 18 | color: #646cff; 19 | text-decoration: inherit; 20 | } 21 | a:hover { 22 | color: #535bf2; 23 | } 24 | 25 | body { 26 | margin: 0; 27 | display: flex; 28 | place-items: center; 29 | min-width: 320px; 30 | min-height: 100vh; 31 | } 32 | 33 | h1 { 34 | font-size: 3.2em; 35 | line-height: 1.1; 36 | } 37 | 38 | button { 39 | border-radius: 8px; 40 | border: 1px solid transparent; 41 | padding: 0.6em 1.2em; 42 | font-size: 1em; 43 | font-weight: 500; 44 | font-family: inherit; 45 | background-color: #1a1a1a; 46 | cursor: pointer; 47 | transition: border-color 0.25s; 48 | } 49 | button:hover { 50 | border-color: #646cff; 51 | } 52 | button:focus, 53 | button:focus-visible { 54 | outline: 4px auto -webkit-focus-ring-color; 55 | } 56 | 57 | @media (prefers-color-scheme: light) { 58 | :root { 59 | color: #213547; 60 | background-color: #ffffff; 61 | } 62 | a:hover { 63 | color: #747bff; 64 | } 65 | button { 66 | background-color: #f9f9f9; 67 | } 68 | } 69 | -------------------------------------------------------------------------------- /examples/rainbowkit-vite/public/vite.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /examples/connectkit-vite/src/index.css: -------------------------------------------------------------------------------- 1 | :root { 2 | font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif; 3 | line-height: 1.5; 4 | font-weight: 400; 5 | 6 | color-scheme: light dark; 7 | color: rgba(255, 255, 255, 0.87); 8 | background-color: #242424; 9 | 10 | font-synthesis: none; 11 | text-rendering: optimizeLegibility; 12 | -webkit-font-smoothing: antialiased; 13 | -moz-osx-font-smoothing: grayscale; 14 | } 15 | 16 | a { 17 | font-weight: 500; 18 | color: #646cff; 19 | text-decoration: inherit; 20 | } 21 | a:hover { 22 | color: #535bf2; 23 | } 24 | 25 | body { 26 | margin: 0; 27 | display: flex; 28 | place-items: center; 29 | min-width: 320px; 30 | min-height: 100vh; 31 | } 32 | 33 | h1 { 34 | font-size: 3.2em; 35 | line-height: 1.1; 36 | } 37 | 38 | button { 39 | border-radius: 8px; 40 | border: 1px solid transparent; 41 | padding: 0.6em 1.2em; 42 | font-size: 1em; 43 | font-weight: 500; 44 | font-family: inherit; 45 | background-color: #1a1a1a; 46 | cursor: pointer; 47 | transition: border-color 0.25s; 48 | } 49 | button:hover { 50 | border-color: #646cff; 51 | } 52 | button:focus, 53 | button:focus-visible { 54 | outline: 4px auto -webkit-focus-ring-color; 55 | } 56 | 57 | @media (prefers-color-scheme: light) { 58 | :root { 59 | color: #213547; 60 | background-color: #ffffff; 61 | } 62 | a:hover { 63 | color: #747bff; 64 | } 65 | button { 66 | background-color: #f9f9f9; 67 | } 68 | } 69 | -------------------------------------------------------------------------------- /examples/rainbowkit-vite/src/index.css: -------------------------------------------------------------------------------- 1 | :root { 2 | font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif; 3 | line-height: 1.5; 4 | font-weight: 400; 5 | 6 | color-scheme: light dark; 7 | color: rgba(255, 255, 255, 0.87); 8 | background-color: #242424; 9 | 10 | font-synthesis: none; 11 | text-rendering: optimizeLegibility; 12 | -webkit-font-smoothing: antialiased; 13 | -moz-osx-font-smoothing: grayscale; 14 | } 15 | 16 | a { 17 | font-weight: 500; 18 | color: #646cff; 19 | text-decoration: inherit; 20 | } 21 | a:hover { 22 | color: #535bf2; 23 | } 24 | 25 | body { 26 | margin: 0; 27 | display: flex; 28 | place-items: center; 29 | min-width: 320px; 30 | min-height: 100vh; 31 | } 32 | 33 | h1 { 34 | font-size: 3.2em; 35 | line-height: 1.1; 36 | } 37 | 38 | button { 39 | border-radius: 8px; 40 | border: 1px solid transparent; 41 | padding: 0.6em 1.2em; 42 | font-size: 1em; 43 | font-weight: 500; 44 | font-family: inherit; 45 | background-color: #1a1a1a; 46 | cursor: pointer; 47 | transition: border-color 0.25s; 48 | } 49 | button:hover { 50 | border-color: #646cff; 51 | } 52 | button:focus, 53 | button:focus-visible { 54 | outline: 4px auto -webkit-focus-ring-color; 55 | } 56 | 57 | @media (prefers-color-scheme: light) { 58 | :root { 59 | color: #213547; 60 | background-color: #ffffff; 61 | } 62 | a:hover { 63 | color: #747bff; 64 | } 65 | button { 66 | background-color: #f9f9f9; 67 | } 68 | } 69 | -------------------------------------------------------------------------------- /examples/dynamic-nextjs/app/components/Methods.css: -------------------------------------------------------------------------------- 1 | 2 | .dynamic-methods { 3 | padding: 20px; 4 | transition: background-color 0.3s ease, color 0.3s ease; 5 | display: flex; 6 | flex-direction: column; 7 | align-items: center; 8 | } 9 | 10 | .methods-container { 11 | display: flex; 12 | flex-wrap: wrap; 13 | justify-content: center; 14 | } 15 | 16 | .btn { 17 | padding: 10px 15px; 18 | margin: 5px; 19 | border: none; 20 | border-radius: 5px; 21 | cursor: pointer; 22 | font-weight: bold; 23 | transition: background-color 0.3s ease, color 0.3s ease; 24 | } 25 | 26 | .btn-primary { 27 | background-color: #4779fe; 28 | color: white; 29 | } 30 | 31 | .results-container { 32 | justify-content: center; 33 | width: 100%; 34 | max-width: 800px; 35 | padding: 15px; 36 | border-radius: 5px; 37 | background-color: rgba(0, 0, 0, 0.1); 38 | word-wrap: break-word; 39 | overflow-x: auto; 40 | } 41 | 42 | .results-text { 43 | white-space: pre-wrap; 44 | word-break: break-word; 45 | max-width: 100%; 46 | } 47 | 48 | .clear-container { 49 | display: flex; 50 | justify-content: center; 51 | margin-top: 10px; 52 | } 53 | 54 | .dynamic-methods[data-theme='light'] { 55 | background-color: #f0f0f0; 56 | color: #333; 57 | } 58 | 59 | .dynamic-methods[data-theme='dark'] { 60 | background-color: #333; 61 | color: #f0f0f0; 62 | } 63 | 64 | /* Hover effects */ 65 | .btn:hover { 66 | opacity: 0.8; 67 | } 68 | 69 | -------------------------------------------------------------------------------- /examples/dynamic-nextjs/README.md: -------------------------------------------------------------------------------- 1 | This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app). 2 | 3 | ## Getting Started 4 | 5 | First, run the development server: 6 | 7 | ```bash 8 | npm run dev 9 | # or 10 | yarn dev 11 | # or 12 | pnpm dev 13 | # or 14 | bun dev 15 | ``` 16 | 17 | Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. 18 | 19 | You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file. 20 | 21 | This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel. 22 | 23 | ## Learn More 24 | 25 | To learn more about Next.js, take a look at the following resources: 26 | 27 | - [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API. 28 | - [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial. 29 | 30 | You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome! 31 | 32 | ## Deploy on Vercel 33 | 34 | The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js. 35 | 36 | Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details. 37 | -------------------------------------------------------------------------------- /examples/privy-vite/README.md: -------------------------------------------------------------------------------- 1 | # React + TypeScript + Vite 2 | 3 | This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules. 4 | 5 | Currently, two official plugins are available: 6 | 7 | - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh 8 | - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh 9 | 10 | ## Expanding the ESLint configuration 11 | 12 | If you are developing a production application, we recommend updating the configuration to enable type aware lint rules: 13 | 14 | - Configure the top-level `parserOptions` property like this: 15 | 16 | ```js 17 | export default tseslint.config({ 18 | languageOptions: { 19 | // other options... 20 | parserOptions: { 21 | project: ['./tsconfig.node.json', './tsconfig.app.json'], 22 | tsconfigRootDir: import.meta.dirname, 23 | }, 24 | }, 25 | }) 26 | ``` 27 | 28 | - Replace `tseslint.configs.recommended` to `tseslint.configs.recommendedTypeChecked` or `tseslint.configs.strictTypeChecked` 29 | - Optionally add `...tseslint.configs.stylisticTypeChecked` 30 | - Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and update the config: 31 | 32 | ```js 33 | // eslint.config.js 34 | import react from 'eslint-plugin-react' 35 | 36 | export default tseslint.config({ 37 | // Set the react version 38 | settings: { react: { version: '18.3' } }, 39 | plugins: { 40 | // Add the react plugin 41 | react, 42 | }, 43 | rules: { 44 | // other rules... 45 | // Enable its recommended rules 46 | ...react.configs.recommended.rules, 47 | ...react.configs['jsx-runtime'].rules, 48 | }, 49 | }) 50 | ``` 51 | -------------------------------------------------------------------------------- /examples/connectkit-vite/README.md: -------------------------------------------------------------------------------- 1 | # React + TypeScript + Vite 2 | 3 | This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules. 4 | 5 | Currently, two official plugins are available: 6 | 7 | - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh 8 | - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh 9 | 10 | ## Expanding the ESLint configuration 11 | 12 | If you are developing a production application, we recommend updating the configuration to enable type aware lint rules: 13 | 14 | - Configure the top-level `parserOptions` property like this: 15 | 16 | ```js 17 | export default tseslint.config({ 18 | languageOptions: { 19 | // other options... 20 | parserOptions: { 21 | project: ['./tsconfig.node.json', './tsconfig.app.json'], 22 | tsconfigRootDir: import.meta.dirname, 23 | }, 24 | }, 25 | }) 26 | ``` 27 | 28 | - Replace `tseslint.configs.recommended` to `tseslint.configs.recommendedTypeChecked` or `tseslint.configs.strictTypeChecked` 29 | - Optionally add `...tseslint.configs.stylisticTypeChecked` 30 | - Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and update the config: 31 | 32 | ```js 33 | // eslint.config.js 34 | import react from 'eslint-plugin-react' 35 | 36 | export default tseslint.config({ 37 | // Set the react version 38 | settings: { react: { version: '18.3' } }, 39 | plugins: { 40 | // Add the react plugin 41 | react, 42 | }, 43 | rules: { 44 | // other rules... 45 | // Enable its recommended rules 46 | ...react.configs.recommended.rules, 47 | ...react.configs['jsx-runtime'].rules, 48 | }, 49 | }) 50 | ``` 51 | -------------------------------------------------------------------------------- /examples/dynamic-vite/README.md: -------------------------------------------------------------------------------- 1 | # React + TypeScript + Vite 2 | 3 | This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules. 4 | 5 | Currently, two official plugins are available: 6 | 7 | - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh 8 | - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh 9 | 10 | ## Expanding the ESLint configuration 11 | 12 | If you are developing a production application, we recommend updating the configuration to enable type aware lint rules: 13 | 14 | - Configure the top-level `parserOptions` property like this: 15 | 16 | ```js 17 | export default tseslint.config({ 18 | languageOptions: { 19 | // other options... 20 | parserOptions: { 21 | project: ['./tsconfig.node.json', './tsconfig.app.json'], 22 | tsconfigRootDir: import.meta.dirname, 23 | }, 24 | }, 25 | }) 26 | ``` 27 | 28 | - Replace `tseslint.configs.recommended` to `tseslint.configs.recommendedTypeChecked` or `tseslint.configs.strictTypeChecked` 29 | - Optionally add `...tseslint.configs.stylisticTypeChecked` 30 | - Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and update the config: 31 | 32 | ```js 33 | // eslint.config.js 34 | import react from 'eslint-plugin-react' 35 | 36 | export default tseslint.config({ 37 | // Set the react version 38 | settings: { react: { version: '18.3' } }, 39 | plugins: { 40 | // Add the react plugin 41 | react, 42 | }, 43 | rules: { 44 | // other rules... 45 | // Enable its recommended rules 46 | ...react.configs.recommended.rules, 47 | ...react.configs['jsx-runtime'].rules, 48 | }, 49 | }) 50 | ``` 51 | -------------------------------------------------------------------------------- /examples/rainbowkit-vite/README.md: -------------------------------------------------------------------------------- 1 | # React + TypeScript + Vite 2 | 3 | This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules. 4 | 5 | Currently, two official plugins are available: 6 | 7 | - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh 8 | - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh 9 | 10 | ## Expanding the ESLint configuration 11 | 12 | If you are developing a production application, we recommend updating the configuration to enable type aware lint rules: 13 | 14 | - Configure the top-level `parserOptions` property like this: 15 | 16 | ```js 17 | export default tseslint.config({ 18 | languageOptions: { 19 | // other options... 20 | parserOptions: { 21 | project: ['./tsconfig.node.json', './tsconfig.app.json'], 22 | tsconfigRootDir: import.meta.dirname, 23 | }, 24 | }, 25 | }) 26 | ``` 27 | 28 | - Replace `tseslint.configs.recommended` to `tseslint.configs.recommendedTypeChecked` or `tseslint.configs.strictTypeChecked` 29 | - Optionally add `...tseslint.configs.stylisticTypeChecked` 30 | - Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and update the config: 31 | 32 | ```js 33 | // eslint.config.js 34 | import react from 'eslint-plugin-react' 35 | 36 | export default tseslint.config({ 37 | // Set the react version 38 | settings: { react: { version: '18.3' } }, 39 | plugins: { 40 | // Add the react plugin 41 | react, 42 | }, 43 | rules: { 44 | // other rules... 45 | // Enable its recommended rules 46 | ...react.configs.recommended.rules, 47 | ...react.configs['jsx-runtime'].rules, 48 | }, 49 | }) 50 | ``` 51 | -------------------------------------------------------------------------------- /examples/connectkit-vite/src/main.tsx: -------------------------------------------------------------------------------- 1 | import { FC, PropsWithChildren, StrictMode } from "react"; 2 | import { createRoot } from "react-dom/client"; 3 | import "./index.css"; 4 | import { WagmiProvider, createConfig, http } from "wagmi"; 5 | import { mainnet } from "wagmi/chains"; 6 | import { QueryClient, QueryClientProvider } from "@tanstack/react-query"; 7 | import { 8 | ConnectKitButton, 9 | ConnectKitProvider, 10 | getDefaultConfig, 11 | } from "connectkit"; 12 | 13 | import "dynamic-global-wallet/eip6963"; 14 | import "dynamic-global-wallet/solana-standard"; 15 | 16 | const config = createConfig( 17 | getDefaultConfig({ 18 | // Your dApps chains 19 | chains: [mainnet], 20 | transports: { 21 | // RPC URL for each chain 22 | [mainnet.id]: http( 23 | `https://eth-mainnet.g.alchemy.com/v2/${process.env.NEXT_PUBLIC_ALCHEMY_ID}` 24 | ), 25 | }, 26 | 27 | // Required API Keys 28 | walletConnectProjectId: "9e559740664b49ec6bdaec33fdb7232c", 29 | 30 | // Required App Info 31 | appName: "Your App Name", 32 | 33 | // Optional App Info 34 | appDescription: "Your App Description", 35 | appUrl: "https://family.co", // your app's url 36 | appIcon: "https://family.co/logo.png", // your app's icon, no bigger than 1024x1024px (max. 1MB) 37 | }) 38 | ); 39 | 40 | const queryClient = new QueryClient(); 41 | 42 | export const Web3Provider: FC = ({ children }) => { 43 | return ( 44 | 45 | 46 | {children} 47 | 48 | 49 | ); 50 | }; 51 | 52 | createRoot(document.getElementById("root")!).render( 53 | 54 | 55 | 56 | 57 | 58 | ); 59 | -------------------------------------------------------------------------------- /examples/dynamic-nextjs/app/page.tsx: -------------------------------------------------------------------------------- 1 | 2 | 'use client'; 3 | 4 | import { DynamicWidget } from "@/lib/dynamic"; 5 | import { useState, useEffect } from 'react'; 6 | import DynamicMethods from "@/app/components/Methods"; 7 | import './page.css'; 8 | 9 | const checkIsDarkSchemePreferred = () => { 10 | if (typeof window !== 'undefined') { 11 | return window.matchMedia?.('(prefers-color-scheme:dark)')?.matches ?? false; 12 | } 13 | return false; 14 | }; 15 | 16 | export default function Main() { 17 | const [isDarkMode, setIsDarkMode] = useState(checkIsDarkSchemePreferred); 18 | 19 | useEffect(() => { 20 | const darkModeMediaQuery = window.matchMedia('(prefers-color-scheme: dark)'); 21 | const handleChange = () => setIsDarkMode(checkIsDarkSchemePreferred()); 22 | 23 | darkModeMediaQuery.addEventListener('change', handleChange); 24 | return () => darkModeMediaQuery.removeEventListener('change', handleChange); 25 | }, []); 26 | 27 | return ( 28 |
29 |
30 | dynamic 31 |
32 | 33 | 34 |
35 |
36 |
37 | 38 | 39 |
40 |
41 |
Made with ❤️ by dynamic
42 | dynamic 43 |
44 |
45 | ); 46 | } 47 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Dynamic Global Wallet Examples 2 | 3 | A collection of example implementations showcasing Dynamic Global Wallet integration across different frameworks and platforms. 4 | 5 | ## 🌟 Overview 6 | 7 | This repository demonstrates how to integrate Dynamic Global Wallet in various dApp environments. It contains: 8 | 9 | - A core Dynamic Global Wallet package (`packages/dynamic-global-wallet`) 10 | - Multiple example dApps showcasing different integration approaches (`examples/`) 11 | 12 | > 📘 **Looking to create your own Dynamic Global Wallet package?** 13 | > Check out the official [Dynamic documentation](https://docs.dynamic.xyz/). 14 | 15 | ## 🏗️ Project Structure 16 | 17 | ### Core Package 18 | 19 | The main Dynamic Global Wallet configuration is located at: 20 | 21 | ``` 22 | packages/dynamic-global-wallet/package.json 23 | 24 | packages/dynamic-global-wallet/src/lib/config.ts 25 | ``` 26 | 27 | ### Integration 28 | 29 | To integrate the Dynamic Global Wallet in your project, simply add these two lines to your `main.ts`: 30 | 31 | ```typescript 32 | import "/eip6963"; 33 | import "/solana-standard"; 34 | ``` 35 | 36 | ## 🚀 Getting Started 37 | 38 | ### Prerequisites 39 | 40 | - Node.js v18 or higher 41 | - pnpm package manager 42 | 43 | ### Installation 44 | 45 | 1. Install dependencies: 46 | 47 | ```bash 48 | pnpm install 49 | ``` 50 | 51 | 2. Build the Dynamic Global Wallet package: 52 | 53 | ```bash 54 | pnpm build-dynamic-global-wallet 55 | ``` 56 | 57 | ## 🔍 Example Applications 58 | 59 | Run any of the following examples to see Dynamic Global Wallet in action: 60 | 61 | ### Next.js Implementation 62 | 63 | ```bash 64 | pnpm dynamic-nextjs 65 | ``` 66 | 67 | ### Vite Implementation 68 | 69 | ```bash 70 | pnpm dynamic-vite 71 | ``` 72 | 73 | ### SDK-specific Examples 74 | 75 | - **RainbowKit:** 76 | 77 | ```bash 78 | pnpm rainbowkit-vite 79 | ``` 80 | 81 | - **Privy:** 82 | 83 | ```bash 84 | pnpm privy-vite 85 | ``` 86 | 87 | - **ConnectKit:** 88 | ```bash 89 | pnpm connectkit-vite 90 | ``` 91 | -------------------------------------------------------------------------------- /examples/dynamic-nextjs/app/page.css: -------------------------------------------------------------------------------- 1 | 2 | .container { 3 | min-height: 100vh; 4 | display: flex; 5 | flex-direction: column; 6 | align-items: center; 7 | justify-content: center; 8 | background: #f1f1f3; 9 | color: #333; 10 | transition: background-color 0.3s, color 0.3s; 11 | } 12 | 13 | .container.dark { 14 | background: #0c0e14; 15 | color: #fff; 16 | } 17 | 18 | .header { 19 | position: absolute; 20 | top: 0; 21 | display: flex; 22 | align-items: center; 23 | justify-content: space-between; 24 | width: 100%; 25 | padding: 10px 0; 26 | } 27 | 28 | .container.dark .header { 29 | border-bottom: 1px solid #2f3035; 30 | } 31 | 32 | .logo { 33 | padding-left: 1rem; 34 | height: 30px; 35 | } 36 | 37 | .header-buttons { 38 | display: flex; 39 | gap: 10px; 40 | padding-right: 1rem; 41 | } 42 | 43 | .docs-button, .get-started { 44 | padding: 10px 20px; 45 | border-radius: 12px; 46 | border: none; 47 | cursor: pointer; 48 | transition: background-color 0.3s; 49 | font-weight: bold; 50 | } 51 | 52 | .docs-button { 53 | background-color: transparent; 54 | border: 1px solid #333; 55 | color: #333; 56 | } 57 | 58 | .container.dark .docs-button { 59 | border-color: #fff; 60 | color: #fff; 61 | } 62 | 63 | .get-started { 64 | background-color: #007bff; 65 | color: #fff; 66 | } 67 | 68 | .modal { 69 | display: flex; 70 | flex-direction: column; 71 | align-items: center; 72 | justify-content: center; 73 | gap: 20px; 74 | } 75 | 76 | .footer-image { 77 | position: absolute; 78 | bottom: 0px; 79 | right: 20px; 80 | height: 15rem; 81 | width: auto; 82 | margin-left: 8px; 83 | } 84 | 85 | .footer-text { 86 | position: absolute; 87 | bottom: 6px; 88 | right: 20px; 89 | color: #666; 90 | font-size: 14px; 91 | font-weight: 500; 92 | z-index: 3; 93 | } 94 | 95 | .container.dark .footer { 96 | background-color: rgba(42, 42, 42, 0.8); 97 | } 98 | 99 | .container.dark .footer-text { 100 | color: #ccc; 101 | } 102 | 103 | .footer-image.light { 104 | display: inline; 105 | } 106 | 107 | .footer-image.dark { 108 | display: none; 109 | } 110 | 111 | .container.dark .footer-image.light { 112 | display: none; 113 | } 114 | 115 | .container.dark .footer-image.dark { 116 | display: inline; 117 | } 118 | -------------------------------------------------------------------------------- /packages/dynamic-global-wallet/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "dynamic-global-wallet", 3 | "author": "Dynamic Labs", 4 | "description": "Dynamic Global Wallet", 5 | "version": "0.0.0", 6 | "type": "module", 7 | "main": "dist/cjs/index.js", 8 | "module": "dist/esm/index.js", 9 | "types": "dist/types/index.d.ts", 10 | "typings": "./dist/types/index.d.ts", 11 | "license": "ISC", 12 | "scripts": { 13 | "build": "rm -rf dist && npm run build:esm && npm run build:cjs && npm run build:types", 14 | "build:esm": "tsc --project tsconfig.json --outDir dist/esm && tsc-alias --project tsconfig.json --outDir dist/esm", 15 | "build:types": "tsc --project ./tsconfig.json --declarationDir ./dist/types --emitDeclarationOnly --declaration --declarationMap", 16 | "build:cjs": "tsc --project ./tsconfig.json --module commonjs --moduleResolution node --outDir ./dist/cjs --removeComments --verbatimModuleSyntax false" 17 | }, 18 | "dependencies": { 19 | "@dynamic-labs/global-wallet-client": "^4.9.11", 20 | "@wallet-standard/wallet": "^1.1.0" 21 | }, 22 | "devDependencies": { 23 | "tsc-alias": "^1.8.10", 24 | "typescript": "^5.7.3" 25 | }, 26 | "peerDependencies": { 27 | "@solana/wallet-standard-features": "^1.2.0", 28 | "@solana/web3.js": "^1.92.1", 29 | "@wallet-standard/base": "^1.0.1", 30 | "@wallet-standard/features": "^1.0.3", 31 | "@wallet-standard/wallet": "^1.1.0", 32 | "viem": "^2.7.12" 33 | }, 34 | "peerDependenciesMeta": { 35 | "viem": { 36 | "optional": true 37 | }, 38 | "@solana/web3.js": { 39 | "optional": true 40 | }, 41 | "@solana/wallet-standard-features": { 42 | "optional": true 43 | }, 44 | "@wallet-standard/features": { 45 | "optional": true 46 | }, 47 | "@wallet-standard/base": { 48 | "optional": true 49 | }, 50 | "@wallet-standard/wallet": { 51 | "optional": true 52 | } 53 | }, 54 | "typesVersions": { 55 | "*": { 56 | "eip6963": [ 57 | "./dist/types/eip6963.d.ts" 58 | ], 59 | "solana-standard": [ 60 | "./dist/types/solana-standard.d.ts" 61 | ] 62 | } 63 | }, 64 | "exports": { 65 | ".": { 66 | "types": "./dist/types/index.d.ts", 67 | "import": "./dist/esm/index.js", 68 | "default": "./dist/cjs/index.js" 69 | }, 70 | "./eip6963": { 71 | "types": "./dist/types/eip6963.d.ts", 72 | "import": "./dist/esm/eip6963.js", 73 | "default": "./dist/cjs/eip6963.js" 74 | }, 75 | "./solana-standard": { 76 | "types": "./dist/types/solana-standard.d.ts", 77 | "import": "./dist/esm/solana-standard.js", 78 | "default": "./dist/cjs/solana-standard.js" 79 | } 80 | } 81 | } 82 | -------------------------------------------------------------------------------- /packages/dynamic-global-wallet/src/lib/config.ts: -------------------------------------------------------------------------------- 1 | import type { DataURIImage } from "@dynamic-labs/global-wallet-client"; 2 | 3 | type Config = { 4 | walletName: string; 5 | walletIcon: DataURIImage; 6 | walletUrl: string; 7 | environmentId: string; 8 | eip6963: { 9 | rdns: string; 10 | }; 11 | }; 12 | 13 | export const config: Config = { 14 | // Wallet name will be seen as the Wallet name 15 | walletName: "Dynamic Global Wallet", 16 | // Wallet icon will be seen as the Wallet icon 17 | walletIcon: 18 | "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEwLjM1MjQgMy40MjIxM0M5LjkxMDQ3IDMuODM0MDEgOS40NzYxNCA0LjIzODI2IDkuMDQxODEgNC42NDA2MUM3LjAyNDQ3IDYuNTEzMTMgNS4wMDcxMyA4LjM4NzU2IDIuOTg3ODkgMTAuMjU2M0MyLjUyNDk4IDEwLjY4NTMgMi4wNDQ5NCAxMS4wOTcyIDEuNDYzOTMgMTEuMzQ4OUMwLjc3MjQzMSAxMS42NDgzIDAuMzc2MjAxIDExLjQ2MTQgMC4xNTMzMjIgMTAuNzE1OEMtMC4xNTcxODUgOS42NzI3NyAwLjAwODU0NTY3IDguNzAwMjggMC42MDg2MDQgNy44MDQwNkMxLjExOTEzIDcuMDQxMzIgMS43NjMgNi40MDYzNCAyLjQyNDAyIDUuNzg4NTNDMy40Nzc0NiA0LjgwNDU5IDQuNTM4NTEgMy44MzAyIDUuNjEyOTEgMi44NzI5NkM2LjA4MzQzIDIuNDUzNDUgNi41OTc3NiAyLjA3MDE4IDcuMjI2NCAxLjk0MjQyQzkuMTA4NDkgMS41NjI5NiAxMC4zMDg2IDMuMzY2ODMgMTAuMzU0MyAzLjQyMDIyTDEwLjM1MjQgMy40MjIxM1oiIGZpbGw9IiM0Nzc5RkYiLz4KPHBhdGggZD0iTTEuMjk2MyAxMi45NDg3QzIuNDQxMTcgMTIuNjE4OCAzLjMwMDMgMTEuODkyMyA0LjEzNjU3IDExLjEyNzdDNi44MDM1IDguNjk0NTUgOS40NjY2MiA2LjI1OTUxIDEyLjE0NSAzLjgzOTczQzEyLjczNTUgMy4zMDU4MSAxMy4zNTY1IDIuNzk0NzggMTQuMDEzNyAyLjM0ODU3QzE0Ljg1IDEuNzgwMzQgMTUuNzU4NyAxLjY5ODM0IDE2LjY1NCAyLjIzOTg4QzE2Ljk3NzggMi40MzQzOCAxNy4yOTYgMi42NjEzIDE3LjU1ODggMi45MzIwN0MxOC40NzEzIDMuODc1OTYgMTkuMzcyNCA0LjgzNTEgMjAuMjUwNSA1LjgxMTRDMjEuMTg0IDYuODQ4NzMgMjIuMTAyMSA3LjkwMTMxIDIyLjk5NTYgOC45NzI5NUMyMy4zMDIzIDkuMzQwOTcgMjMuNTUzNyA5Ljc3MDAxIDIzLjc2MTQgMTAuMjA0OEMyNC4xNDgxIDExLjAxMzMgMjQuMDQ5IDExLjgxMjIgMjMuNTc4NSAxMi41NjU0QzIzLjE1NzUgMTMuMjQwNSAyMi41OTM2IDEzLjc5MzUgMjIuMDEyNiAxNC4zMTc4QzE5LjczODEgMTYuMzczNCAxNy40NjM2IDE4LjQyOSAxNS4xNjI0IDIwLjQ1NkMxNC41NDUyIDIxLjAwMTMgMTMuODY1MSAyMS40ODk1IDEzLjE2NDEgMjEuOTIwNEMxMS44NDQgMjIuNzM0NiAxMC41MjAxIDIyLjYzMzYgOS4zMTYxMyAyMS42Njg3QzguNjE1MTEgMjEuMTA4MSA3Ljk1NiAyMC40ODA4IDcuMzU0MDMgMTkuODEzNEM1LjQxNDc5IDE3LjY2NDMgMy41MTE3NSAxNS40ODQ4IDEuNTk1MzcgMTMuMzE0OEMxLjQ5ODIyIDEzLjIwNjEgMS40MTA1OSAxMy4wODc5IDEuMjk2MyAxMi45NDY4VjEyLjk0ODdaIiBmaWxsPSIjNDc3OUZGIi8+Cjwvc3ZnPgo=", 19 | // URL of your wallet domain (e.g. https://dynamic.example.com) 20 | walletUrl: "https://auth.dynamicwallets.com/", 21 | // Environment ID of your wallet (e.g. 1234567890) 22 | environmentId: "2ecdbfdd-e5bb-412b-8b60-f4bbd4315733", 23 | // EIP6963 configuration 24 | eip6963: { 25 | // RDNS of your wallet (e.g. com.example.wallet) 26 | rdns: "demo.dynamic.xyz", 27 | }, 28 | }; 29 | -------------------------------------------------------------------------------- /packages/dynamic-global-wallet/README.md: -------------------------------------------------------------------------------- 1 | # Dynamic Global Wallet Package 2 | 3 | This repository provides the base configuration for building a wallet package powered by Dynamic Global Wallet, supporting both EVM and Solana ecosystems. 4 | 5 | ## Getting Started 6 | 7 | Follow these steps to set up your wallet package: 8 | 9 | 1. **Clone the Repository** 10 | 11 | ```bash 12 | git clone 13 | cd 14 | ``` 15 | 16 | 2. **Install Dependencies** 17 | 18 | ```bash 19 | npm install 20 | ``` 21 | 22 | 3. **Configure Your Wallet Package** 23 | 24 | Update the following fields to customize your wallet package: 25 | 26 | ### In `package.json` 27 | 28 | - `wallet-package-name`: Your wallet package’s name. 29 | - `wallet-description`: A brief description of your wallet. 30 | - `wallet-author`: The author’s name or organization. 31 | 32 | ### In `src/lib/config.ts` 33 | 34 | - `wallet-name`: Display name of the wallet. 35 | - `wallet-icon`: URL or base64 encoded image of your wallet’s icon. 36 | - `wallet-url`: URL of your wallet’s configured domain in the [Dynamic dashboard](https://app.dynamic.xyz/). 37 | - `environment-id`: Environment ID of your project in the [Dynamic dashboard](https://app.dynamic.xyz/). 38 | 39 | Once completed, your wallet package is configured and ready for testing and publishing. 40 | 41 | --- 42 | 43 | ## Testing Your Wallet 44 | 45 | After configuring your wallet package, test it locally using a Wallet SDK of your choice. This example demonstrates testing with the `create-dynamic-app` package: 46 | 47 | 1. **Build Your Wallet Package** 48 | 49 | ```bash 50 | npm run build 51 | ``` 52 | 53 | 2. **Pack Your Wallet Package** 54 | 55 | ```bash 56 | npm pack 57 | ``` 58 | 59 | This will create a `.tgz` file in your directory. 60 | 61 | 3. **Create a New Project** 62 | In a separate directory, initialize a new project: 63 | 64 | ```bash 65 | npx create-dynamic-app@latest 66 | ``` 67 | 68 | Select **ReactJS** or **NextJS** as your project type. 69 | 70 | 4. **Install Your Wallet Package** 71 | 72 | ```bash 73 | npm install /path/to/your-wallet-package-1.0.0.tgz 74 | ``` 75 | 76 | 5. **Import Your Wallet** 77 | 78 | - For **EVM Wallet**: 79 | 80 | ```javascript 81 | import "/eip6963"; 82 | ``` 83 | 84 | - For **Solana Wallet**: 85 | ```javascript 86 | import "/solana-standard"; 87 | ``` 88 | 89 | 6. **Use Your Wallet** 90 | Your wallet is now ready to use within the project. 91 | 92 | --- 93 | 94 | ## Publishing Your Wallet 95 | 96 | When your wallet package is ready for distribution, follow these steps: 97 | 98 | 1. **Update Package Version** 99 | 100 | ```bash 101 | npm version patch # for bug fixes 102 | # or 103 | npm version minor # for new features 104 | # or 105 | npm version major # for breaking changes 106 | ``` 107 | 108 | 2. **Build Your Wallet Package** 109 | 110 | ```bash 111 | npm run build 112 | ``` 113 | 114 | 3. **Publish Your Wallet Package** 115 | ```bash 116 | npm publish 117 | ``` 118 | 119 | Ensure your package meets the [npm publishing guidelines](https://docs.npmjs.com/cli/v7/commands/npm-publish) before publishing. 120 | 121 | --- 122 | 123 | For more details or support, refer to the documentation or contact the Dynamic Global Wallet team. 124 | -------------------------------------------------------------------------------- /examples/dynamic-nextjs/app/page.module.css: -------------------------------------------------------------------------------- 1 | .page { 2 | --gray-rgb: 0, 0, 0; 3 | --gray-alpha-200: rgba(var(--gray-rgb), 0.08); 4 | --gray-alpha-100: rgba(var(--gray-rgb), 0.05); 5 | 6 | --button-primary-hover: #383838; 7 | --button-secondary-hover: #f2f2f2; 8 | 9 | display: grid; 10 | grid-template-rows: 20px 1fr 20px; 11 | align-items: center; 12 | justify-items: center; 13 | min-height: 100svh; 14 | padding: 80px; 15 | gap: 64px; 16 | font-family: var(--font-geist-sans); 17 | } 18 | 19 | @media (prefers-color-scheme: dark) { 20 | .page { 21 | --gray-rgb: 255, 255, 255; 22 | --gray-alpha-200: rgba(var(--gray-rgb), 0.145); 23 | --gray-alpha-100: rgba(var(--gray-rgb), 0.06); 24 | 25 | --button-primary-hover: #ccc; 26 | --button-secondary-hover: #1a1a1a; 27 | } 28 | } 29 | 30 | .main { 31 | display: flex; 32 | flex-direction: column; 33 | gap: 32px; 34 | grid-row-start: 2; 35 | } 36 | 37 | .main ol { 38 | font-family: var(--font-geist-mono); 39 | padding-left: 0; 40 | margin: 0; 41 | font-size: 14px; 42 | line-height: 24px; 43 | letter-spacing: -0.01em; 44 | list-style-position: inside; 45 | } 46 | 47 | .main li:not(:last-of-type) { 48 | margin-bottom: 8px; 49 | } 50 | 51 | .main code { 52 | font-family: inherit; 53 | background: var(--gray-alpha-100); 54 | padding: 2px 4px; 55 | border-radius: 4px; 56 | font-weight: 600; 57 | } 58 | 59 | .ctas { 60 | display: flex; 61 | gap: 16px; 62 | } 63 | 64 | .ctas a { 65 | appearance: none; 66 | border-radius: 128px; 67 | height: 48px; 68 | padding: 0 20px; 69 | border: none; 70 | border: 1px solid transparent; 71 | transition: 72 | background 0.2s, 73 | color 0.2s, 74 | border-color 0.2s; 75 | cursor: pointer; 76 | display: flex; 77 | align-items: center; 78 | justify-content: center; 79 | font-size: 16px; 80 | line-height: 20px; 81 | font-weight: 500; 82 | } 83 | 84 | a.primary { 85 | background: var(--foreground); 86 | color: var(--background); 87 | gap: 8px; 88 | } 89 | 90 | a.secondary { 91 | border-color: var(--gray-alpha-200); 92 | min-width: 180px; 93 | } 94 | 95 | .footer { 96 | grid-row-start: 3; 97 | display: flex; 98 | gap: 24px; 99 | } 100 | 101 | .footer a { 102 | display: flex; 103 | align-items: center; 104 | gap: 8px; 105 | } 106 | 107 | .footer img { 108 | flex-shrink: 0; 109 | } 110 | 111 | /* Enable hover only on non-touch devices */ 112 | @media (hover: hover) and (pointer: fine) { 113 | a.primary:hover { 114 | background: var(--button-primary-hover); 115 | border-color: transparent; 116 | } 117 | 118 | a.secondary:hover { 119 | background: var(--button-secondary-hover); 120 | border-color: transparent; 121 | } 122 | 123 | .footer a:hover { 124 | text-decoration: underline; 125 | text-underline-offset: 4px; 126 | } 127 | } 128 | 129 | @media (max-width: 600px) { 130 | .page { 131 | padding: 32px; 132 | padding-bottom: 80px; 133 | } 134 | 135 | .main { 136 | align-items: center; 137 | } 138 | 139 | .main ol { 140 | text-align: center; 141 | } 142 | 143 | .ctas { 144 | flex-direction: column; 145 | } 146 | 147 | .ctas a { 148 | font-size: 14px; 149 | height: 40px; 150 | padding: 0 16px; 151 | } 152 | 153 | a.secondary { 154 | min-width: auto; 155 | } 156 | 157 | .footer { 158 | flex-wrap: wrap; 159 | align-items: center; 160 | justify-content: center; 161 | } 162 | } 163 | 164 | @media (prefers-color-scheme: dark) { 165 | .logo { 166 | filter: invert(); 167 | } 168 | } 169 | -------------------------------------------------------------------------------- /examples/dynamic-vite/src/assets/react.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /examples/privy-vite/src/assets/react.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /examples/connectkit-vite/src/assets/react.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /examples/rainbowkit-vite/src/assets/react.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /examples/dynamic-nextjs/app/components/Methods.js: -------------------------------------------------------------------------------- 1 | 'use client'; 2 | import { useState, useEffect } from 'react'; 3 | import { useDynamicContext, useIsLoggedIn, useUserWallets } from "@dynamic-labs/sdk-react-core"; 4 | import { isEthereumWallet } from '@dynamic-labs/ethereum' 5 | import { isSolanaWallet } from '@dynamic-labs/solana' 6 | 7 | import './Methods.css'; 8 | 9 | export default function DynamicMethods({ isDarkMode }) { 10 | const isLoggedIn = useIsLoggedIn(); 11 | const { sdkHasLoaded, primaryWallet, user } = useDynamicContext(); 12 | const userWallets = useUserWallets(); 13 | const [isLoading, setIsLoading] = useState(true); 14 | const [result, setResult] = useState(''); 15 | 16 | 17 | const safeStringify = (obj) => { 18 | const seen = new WeakSet(); 19 | return JSON.stringify(obj, (key, value) => { 20 | if (typeof value === 'object' && value !== null) { 21 | if (seen.has(value)) { 22 | return '[Circular]'; 23 | } 24 | seen.add(value); 25 | } 26 | return value; 27 | }, 2); 28 | }; 29 | 30 | useEffect(() => { 31 | if (sdkHasLoaded && isLoggedIn && primaryWallet) { 32 | setIsLoading(false); 33 | } else { 34 | setIsLoading(true); 35 | } 36 | }, [sdkHasLoaded, isLoggedIn, primaryWallet]); 37 | 38 | function clearResult() { 39 | setResult(''); 40 | } 41 | 42 | function showUser() { 43 | setResult(safeStringify(user)); 44 | } 45 | 46 | function showUserWallets() { 47 | setResult(safeStringify(userWallets)); 48 | } 49 | 50 | 51 | async function fetchPublicClient() { 52 | if(!primaryWallet || !isEthereumWallet(primaryWallet)) return; 53 | 54 | const publicClient = await primaryWallet.getPublicClient(); 55 | setResult(safeStringify(publicClient)); 56 | } 57 | 58 | async function fetchWalletClient() { 59 | if(!primaryWallet || !isEthereumWallet(primaryWallet)) return; 60 | 61 | const walletClient = await primaryWallet.getWalletClient(); 62 | setResult(safeStringify(walletClient)); 63 | } 64 | 65 | async function signEthereumMessage() { 66 | if(!primaryWallet || !isEthereumWallet(primaryWallet)) return; 67 | 68 | const signature = await primaryWallet.signMessage("Hello World"); 69 | setResult(signature); 70 | } 71 | 72 | 73 | async function fetchConnection() { 74 | if(!primaryWallet || !isSolanaWallet(primaryWallet)) return; 75 | 76 | const connection = await primaryWallet.getConnection(); 77 | setResult(safeStringify(connection)); 78 | } 79 | 80 | async function fetchSigner() { 81 | if(!primaryWallet || !isSolanaWallet(primaryWallet)) return; 82 | 83 | const signer = await primaryWallet.getSigner(); 84 | setResult(safeStringify(signer)); 85 | } 86 | 87 | async function signSolanaMessage() { 88 | if(!primaryWallet || !isSolanaWallet(primaryWallet)) return; 89 | 90 | const signature = await primaryWallet.signMessage("Hello World"); 91 | setResult(signature); 92 | } 93 | 94 | 95 | 96 | return ( 97 | <> 98 | {!isLoading && ( 99 |
100 |
101 | 102 | 103 | 104 | 105 | {primaryWallet && isEthereumWallet(primaryWallet) && 106 | <> 107 | 108 | 109 | 110 | 111 | } 112 | 113 | 114 | {primaryWallet && isSolanaWallet(primaryWallet) && 115 | <> 116 | 117 | 118 | 119 | 120 | } 121 | 122 |
123 | {result && ( 124 |
125 | 
{result}
126 |
127 | )} 128 | {result && ( 129 |
130 | 131 |
132 | )} 133 |
134 | )} 135 | 136 | ); 137 | } --------------------------------------------------------------------------------