├── .gitignore ├── external-wallets ├── README.md ├── dapp-wallets │ ├── .gitignore │ ├── config-overrides.js │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ ├── logo192.png │ │ ├── logo512.png │ │ ├── manifest.json │ │ └── robots.txt │ ├── src │ │ ├── App.tsx │ │ ├── Dapp.tsx │ │ ├── constants.ts │ │ ├── index.tsx │ │ ├── providers │ │ │ ├── coinbase-provider.ts │ │ │ ├── index.ts │ │ │ ├── metamask-provider.ts │ │ │ └── providers.ts │ │ └── styles.css │ ├── tsconfig.json │ └── yarn.lock ├── hybrid │ ├── .gitignore │ ├── config-overrides.js │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ ├── logo192.png │ │ ├── logo512.png │ │ ├── manifest.json │ │ └── robots.txt │ ├── src │ │ ├── App.tsx │ │ ├── Dapp.tsx │ │ ├── constants.ts │ │ ├── index.tsx │ │ ├── providers │ │ │ ├── index.ts │ │ │ ├── metamask-provider.ts │ │ │ └── providers.ts │ │ └── styles.css │ ├── tsconfig.json │ └── yarn.lock ├── rango-wallets │ ├── .gitignore │ ├── config-overrides.js │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ ├── logo192.png │ │ ├── logo512.png │ │ ├── manifest.json │ │ └── robots.txt │ ├── src │ │ ├── App.jsx │ │ ├── Dapp.jsx │ │ ├── constants.js │ │ ├── index.jsx │ │ └── styles.css │ └── yarn.lock └── wagmi-wallets │ ├── .gitignore │ ├── README.md │ ├── index.html │ ├── package.json │ ├── public │ └── vite.svg │ ├── src │ ├── App.tsx │ ├── Dapp.tsx │ ├── config.ts │ ├── constants.ts │ ├── main.tsx │ └── styles.css │ ├── tsconfig.json │ ├── vite.config.ts │ └── yarn.lock ├── iframe ├── index.html ├── modal.html ├── modal_dynamic.html └── readme.md ├── next ├── .eslintrc.json ├── .gitignore ├── README.md ├── next-env.d.ts ├── next.config.js ├── package.json ├── public │ ├── next.svg │ └── vercel.svg ├── src │ ├── app │ │ ├── favicon.ico │ │ ├── layout.tsx │ │ ├── page.module.css │ │ └── page.tsx │ └── rango-widget │ │ └── index.tsx ├── tsconfig.json └── yarn.lock ├── parcel ├── .gitignore ├── package.json ├── public │ ├── index.html │ └── style.css ├── src │ └── index.tsx └── yarn.lock ├── react-app-rewired-js ├── .gitignore ├── config-overrides.js ├── package.json ├── public │ ├── favicon.ico │ ├── index.html │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ ├── robots.txt │ └── style.css ├── src │ ├── App.js │ ├── index.js │ └── logo.svg └── yarn.lock ├── react-app-rewired-ts ├── .gitignore ├── config-overrides.js ├── package.json ├── public │ ├── favicon.ico │ ├── index.html │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ ├── robots.txt │ └── style.css ├── src │ ├── App.tsx │ ├── index.tsx │ ├── logo.svg │ └── react-app-env.d.ts ├── tsconfig.json └── yarn.lock ├── readme.md ├── vite ├── .gitignore ├── index.html ├── package.json ├── public │ └── vite.svg ├── src │ ├── App.css │ ├── App.tsx │ ├── main.tsx │ └── vite-env.d.ts ├── tsconfig.json ├── vite.config.ts └── yarn.lock ├── vue ├── .gitignore ├── README.md ├── index.html ├── package.json ├── public │ └── vite.svg ├── src │ ├── App.vue │ ├── assets │ │ └── vue.svg │ ├── components │ │ └── Widget.vue │ ├── main.ts │ ├── style.css │ └── vite-env.d.ts ├── tsconfig.json ├── tsconfig.node.json ├── vite.config.ts └── yarn.lock └── yarn.lock /.gitignore: -------------------------------------------------------------------------------- 1 | */node_modules -------------------------------------------------------------------------------- /external-wallets/README.md: -------------------------------------------------------------------------------- 1 | # External wallets examples 2 | ## dapps-wallets 3 | Example of using external wallets alongside wallets implemented by DApp. 4 | ## hybrid 5 | Example of using external wallets alongside wallets implemented by Rango exchange and DApp-provided wallets. 6 | ## rango-wallets 7 | Example of using external wallets alongside wallets already implemented by Rango exchange. -------------------------------------------------------------------------------- /external-wallets/dapp-wallets/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | dist/ 3 | lerna-debug.log 4 | .vercel 5 | .npmrc 6 | 7 | # dependencies 8 | node_modules 9 | .pnp 10 | .pnp.js 11 | 12 | # testing 13 | coverage 14 | 15 | # next.js 16 | .next/ 17 | out/ 18 | build 19 | 20 | # misc 21 | .DS_Store 22 | *.pem 23 | 24 | # debug 25 | npm-debug.log* 26 | yarn-debug.log* 27 | yarn-error.log* 28 | .pnpm-debug.log* 29 | 30 | # local env files 31 | .env.local 32 | .env.development.local 33 | .env.test.local 34 | .env.production.local 35 | .env 36 | # turbo 37 | .turbo 38 | 39 | .parcel-cache 40 | storybook-static 41 | .yalc 42 | yalc.lock -------------------------------------------------------------------------------- /external-wallets/dapp-wallets/config-overrides.js: -------------------------------------------------------------------------------- 1 | const webpack = require("webpack"); 2 | 3 | module.exports = function override(config) { 4 | const fallback = config.resolve.fallback || {}; 5 | Object.assign(fallback, { 6 | crypto: require.resolve("crypto-browserify"), 7 | stream: require.resolve("stream-browserify"), 8 | assert: require.resolve("assert"), 9 | http: require.resolve("stream-http"), 10 | https: require.resolve("https-browserify"), 11 | os: require.resolve("os-browserify"), 12 | url: require.resolve("url"), 13 | }); 14 | config.resolve.fallback = fallback; 15 | config.plugins = (config.plugins || []).concat([ 16 | new webpack.ProvidePlugin({ 17 | process: "process/browser", 18 | Buffer: ["buffer", "Buffer"], 19 | }), 20 | ]); 21 | config.ignoreWarnings = [/Failed to parse source map/]; 22 | config.module.rules.push({ 23 | test: /\.(js|mjs|jsx)$/, 24 | enforce: "pre", 25 | loader: require.resolve("source-map-loader"), 26 | resolve: { 27 | fullySpecified: false, 28 | }, 29 | }); 30 | return config; 31 | }; -------------------------------------------------------------------------------- /external-wallets/dapp-wallets/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "dapp-wallets", 3 | "version": "1.0.0", 4 | "dependencies": { 5 | "@rango-dev/provider-metamask": "^0.44.0", 6 | "@rango-dev/ui": "^0.46.0", 7 | "@rango-dev/widget-embedded": "^0.42.0", 8 | "react": "18.2.0", 9 | "react-app-rewired": "^2.2.1", 10 | "react-dom": "18.2.0" 11 | }, 12 | "devDependencies": { 13 | "@babel/runtime": "7.13.8", 14 | "@types/node": "^20.2.5", 15 | "@types/react": "^18.2.0", 16 | "@types/react-dom": "^18.2.1", 17 | "crypto-browserify": "^3.12.0", 18 | "https-browserify": "^1.0.0", 19 | "os-browserify": "^0.3.0", 20 | "process": "^0.11.10", 21 | "react-scripts": "^5.0.1", 22 | "stream-browserify": "^3.0.0", 23 | "stream-http": "^3.2.0", 24 | "typescript": "^4.9.5", 25 | "util": "^0.12.5" 26 | }, 27 | "scripts": { 28 | "start": "export NODE_OPTIONS='--max_old_space_size=8192'; react-app-rewired start", 29 | "build": "react-app-rewired build", 30 | "test": "react-app-rewired test", 31 | "eject": "react-scripts eject" 32 | }, 33 | "browserslist": { 34 | "production": [ 35 | "chrome >= 67", 36 | "edge >= 79", 37 | "firefox >= 68", 38 | "opera >= 54", 39 | "safari >= 14" 40 | ], 41 | "development": [ 42 | "last 1 chrome version", 43 | "last 1 firefox version", 44 | "last 1 safari version" 45 | ] 46 | } 47 | } 48 | -------------------------------------------------------------------------------- /external-wallets/dapp-wallets/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rango-exchange/widget-examples/fee514b9da60ac9bc4244817ee6b8691e14c8d4b/external-wallets/dapp-wallets/public/favicon.ico -------------------------------------------------------------------------------- /external-wallets/dapp-wallets/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 17 | 18 | 27 | React App 28 | 29 | 30 | 31 |
32 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /external-wallets/dapp-wallets/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rango-exchange/widget-examples/fee514b9da60ac9bc4244817ee6b8691e14c8d4b/external-wallets/dapp-wallets/public/logo192.png -------------------------------------------------------------------------------- /external-wallets/dapp-wallets/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rango-exchange/widget-examples/fee514b9da60ac9bc4244817ee6b8691e14c8d4b/external-wallets/dapp-wallets/public/logo512.png -------------------------------------------------------------------------------- /external-wallets/dapp-wallets/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /external-wallets/dapp-wallets/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /external-wallets/dapp-wallets/src/App.tsx: -------------------------------------------------------------------------------- 1 | import { useCallback } from "react"; 2 | import { 3 | HandleWalletsUpdate, 4 | WidgetProvider, 5 | } from "@rango-dev/widget-embedded"; 6 | import { Dapp } from "./Dapp"; 7 | import "./styles.css"; 8 | import { WIDGET_CONFIG } from "./constants"; 9 | 10 | export default function App() { 11 | const handleUpdate = useCallback( 12 | (providerName, eventType, accounts, providerState, supportedChains) => { 13 | console.log({ 14 | providerName, 15 | eventType, 16 | accounts, 17 | providerState, 18 | supportedChains, 19 | }); 20 | }, 21 | [] 22 | ); 23 | return ( 24 |
25 | 30 | 31 | 32 |
33 | ); 34 | } 35 | -------------------------------------------------------------------------------- /external-wallets/dapp-wallets/src/Dapp.tsx: -------------------------------------------------------------------------------- 1 | import { Fragment, useCallback } from "react"; 2 | import { useWallets, Widget } from "@rango-dev/widget-embedded"; 3 | import { providers } from "./providers"; 4 | import { WIDGET_CONFIG } from "./constants"; 5 | import { Button } from "@rango-dev/ui"; 6 | 7 | function ExternalWallet({ providerName }: { providerName: string }) { 8 | const { state, connect, disconnect } = useWallets(); 9 | const providerState = state(providerName); 10 | const handleClick = useCallback(() => { 11 | try { 12 | if (providerState.connected) { 13 | disconnect(providerName); 14 | } else { 15 | connect(providerName); 16 | } 17 | } catch (error) { 18 | console.error(error); 19 | } 20 | }, [providerName, providerState, connect, disconnect]); 21 | return ( 22 | 32 | ); 33 | } 34 | 35 | export function Dapp() { 36 | return ( 37 |
38 |
39 | {providers.map((provider, index) => ( 40 | 41 | 42 |
43 | 44 | ))} 45 |
46 | 47 |
48 | ); 49 | } 50 | -------------------------------------------------------------------------------- /external-wallets/dapp-wallets/src/constants.ts: -------------------------------------------------------------------------------- 1 | import { WidgetConfig } from "@rango-dev/widget-embedded"; 2 | import { providers } from "./providers"; 3 | 4 | export const WIDGET_CONFIG: WidgetConfig = { 5 | externalWallets: true, 6 | // Providers implemented by DApp 7 | wallets: providers, 8 | // This API key is only for test purpose. Don't use it in production. 9 | apiKey: "c6381a79-2817-4602-83bf-6a641a409e32", 10 | 11 | walletConnectProjectId: "e24844c5deb5193c1c14840a7af6a40b", 12 | }; 13 | -------------------------------------------------------------------------------- /external-wallets/dapp-wallets/src/index.tsx: -------------------------------------------------------------------------------- 1 | import { StrictMode } from "react"; 2 | import { createRoot } from "react-dom/client"; 3 | 4 | import App from "./App"; 5 | 6 | const rootElement = document.getElementById("root")!; 7 | const root = createRoot(rootElement); 8 | 9 | root.render( 10 | 11 | 12 | 13 | ); 14 | -------------------------------------------------------------------------------- /external-wallets/dapp-wallets/src/providers/coinbase-provider.ts: -------------------------------------------------------------------------------- 1 | import { ProviderInterface } from "@rango-dev/widget-embedded"; 2 | import { 3 | config, 4 | getInstance, 5 | connect, 6 | subscribe, 7 | canSwitchNetworkTo, 8 | switchNetwork, 9 | getSigners, 10 | getWalletInfo, 11 | } from "@rango-dev/provider-coinbase"; 12 | 13 | export const coinbaseProvider: ProviderInterface = { 14 | config, 15 | getInstance, 16 | connect, 17 | subscribe, 18 | canSwitchNetworkTo, 19 | switchNetwork, 20 | getSigners, 21 | getWalletInfo, 22 | }; 23 | -------------------------------------------------------------------------------- /external-wallets/dapp-wallets/src/providers/index.ts: -------------------------------------------------------------------------------- 1 | export { providers } from "./providers"; 2 | -------------------------------------------------------------------------------- /external-wallets/dapp-wallets/src/providers/metamask-provider.ts: -------------------------------------------------------------------------------- 1 | import { ProviderInterface } from "@rango-dev/widget-embedded"; 2 | import { 3 | config, 4 | getInstance, 5 | connect, 6 | subscribe, 7 | canSwitchNetworkTo, 8 | switchNetwork, 9 | getSigners, 10 | getWalletInfo, 11 | } from "@rango-dev/provider-metamask"; 12 | 13 | export const metamaskProvider: ProviderInterface = { 14 | config, 15 | getInstance, 16 | connect, 17 | subscribe, 18 | canSwitchNetworkTo, 19 | switchNetwork, 20 | getSigners, 21 | getWalletInfo, 22 | }; 23 | -------------------------------------------------------------------------------- /external-wallets/dapp-wallets/src/providers/providers.ts: -------------------------------------------------------------------------------- 1 | import { ProviderInterface } from "@rango-dev/widget-embedded"; 2 | import { coinbaseProvider } from "./coinbase-provider"; 3 | import { metamaskProvider } from "./metamask-provider"; 4 | 5 | /* 6 | * We have already implemented these providers. This is only for demonstration purposes. 7 | * To use an external wallet provider that is not yet supported by us, you can create your own implementation of the Provider interface and pass it to the widget. 8 | */ 9 | export const providers: ProviderInterface[] = [ 10 | metamaskProvider, 11 | coinbaseProvider, 12 | ]; 13 | -------------------------------------------------------------------------------- /external-wallets/dapp-wallets/src/styles.css: -------------------------------------------------------------------------------- 1 | #app { 2 | height: 100vh; 3 | } 4 | 5 | .main-container { 6 | padding-top: 2rem; 7 | display: flex; 8 | flex-direction: column; 9 | justify-content: center; 10 | align-items: center; 11 | } 12 | 13 | .wallets-container { 14 | display: flex; 15 | flex-direction: column; 16 | justify-content: center; 17 | align-items: center; 18 | padding-bottom: 1rem; 19 | } 20 | -------------------------------------------------------------------------------- /external-wallets/dapp-wallets/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "lib": ["dom", "dom.iterable", "esnext"], 5 | "allowJs": true, 6 | "skipLibCheck": true, 7 | "esModuleInterop": true, 8 | "allowSyntheticDefaultImports": true, 9 | "strict": true, 10 | "forceConsistentCasingInFileNames": true, 11 | "noFallthroughCasesInSwitch": true, 12 | "module": "esnext", 13 | "moduleResolution": "node", 14 | "resolveJsonModule": true, 15 | "isolatedModules": true, 16 | "noEmit": true, 17 | "jsx": "react-jsx" 18 | }, 19 | "include": ["src"] 20 | } 21 | -------------------------------------------------------------------------------- /external-wallets/hybrid/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | dist/ 3 | lerna-debug.log 4 | .vercel 5 | .npmrc 6 | 7 | # dependencies 8 | node_modules 9 | .pnp 10 | .pnp.js 11 | 12 | # testing 13 | coverage 14 | 15 | # next.js 16 | .next/ 17 | out/ 18 | build 19 | 20 | # misc 21 | .DS_Store 22 | *.pem 23 | 24 | # debug 25 | npm-debug.log* 26 | yarn-debug.log* 27 | yarn-error.log* 28 | .pnpm-debug.log* 29 | 30 | # local env files 31 | .env.local 32 | .env.development.local 33 | .env.test.local 34 | .env.production.local 35 | .env 36 | # turbo 37 | .turbo 38 | 39 | .parcel-cache 40 | storybook-static 41 | .yalc 42 | yalc.lock -------------------------------------------------------------------------------- /external-wallets/hybrid/config-overrides.js: -------------------------------------------------------------------------------- 1 | const webpack = require("webpack"); 2 | 3 | module.exports = function override(config) { 4 | const fallback = config.resolve.fallback || {}; 5 | Object.assign(fallback, { 6 | crypto: require.resolve("crypto-browserify"), 7 | stream: require.resolve("stream-browserify"), 8 | assert: require.resolve("assert"), 9 | http: require.resolve("stream-http"), 10 | https: require.resolve("https-browserify"), 11 | os: require.resolve("os-browserify"), 12 | url: require.resolve("url"), 13 | }); 14 | config.resolve.fallback = fallback; 15 | config.plugins = (config.plugins || []).concat([ 16 | new webpack.ProvidePlugin({ 17 | process: "process/browser", 18 | Buffer: ["buffer", "Buffer"], 19 | }), 20 | ]); 21 | config.ignoreWarnings = [/Failed to parse source map/]; 22 | config.module.rules.push({ 23 | test: /\.(js|mjs|jsx)$/, 24 | enforce: "pre", 25 | loader: require.resolve("source-map-loader"), 26 | resolve: { 27 | fullySpecified: false, 28 | }, 29 | }); 30 | return config; 31 | }; -------------------------------------------------------------------------------- /external-wallets/hybrid/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "hybrid", 3 | "version": "1.0.0", 4 | "dependencies": { 5 | "@rango-dev/provider-metamask": "^0.44.0", 6 | "@rango-dev/ui": "^0.46.0", 7 | "@rango-dev/widget-embedded": "^0.42.0", 8 | "react": "18.2.0", 9 | "react-app-rewired": "^2.2.1", 10 | "react-dom": "18.2.0" 11 | }, 12 | "devDependencies": { 13 | "@babel/runtime": "7.13.8", 14 | "@types/node": "^20.2.5", 15 | "@types/react": "^18.2.0", 16 | "@types/react-dom": "^18.2.1", 17 | "crypto-browserify": "^3.12.0", 18 | "https-browserify": "^1.0.0", 19 | "os-browserify": "^0.3.0", 20 | "process": "^0.11.10", 21 | "react-scripts": "^5.0.1", 22 | "stream-browserify": "^3.0.0", 23 | "stream-http": "^3.2.0", 24 | "typescript": "^4.9.5", 25 | "util": "^0.12.5" 26 | }, 27 | "scripts": { 28 | "start": "export NODE_OPTIONS='--max_old_space_size=8192'; react-app-rewired start", 29 | "build": "react-app-rewired build", 30 | "test": "react-app-rewired test", 31 | "eject": "react-scripts eject" 32 | }, 33 | "browserslist": { 34 | "production": [ 35 | "chrome >= 67", 36 | "edge >= 79", 37 | "firefox >= 68", 38 | "opera >= 54", 39 | "safari >= 14" 40 | ], 41 | "development": [ 42 | "last 1 chrome version", 43 | "last 1 firefox version", 44 | "last 1 safari version" 45 | ] 46 | } 47 | } 48 | -------------------------------------------------------------------------------- /external-wallets/hybrid/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rango-exchange/widget-examples/fee514b9da60ac9bc4244817ee6b8691e14c8d4b/external-wallets/hybrid/public/favicon.ico -------------------------------------------------------------------------------- /external-wallets/hybrid/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 17 | 18 | 27 | React App 28 | 29 | 30 | 31 |
32 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /external-wallets/hybrid/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rango-exchange/widget-examples/fee514b9da60ac9bc4244817ee6b8691e14c8d4b/external-wallets/hybrid/public/logo192.png -------------------------------------------------------------------------------- /external-wallets/hybrid/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rango-exchange/widget-examples/fee514b9da60ac9bc4244817ee6b8691e14c8d4b/external-wallets/hybrid/public/logo512.png -------------------------------------------------------------------------------- /external-wallets/hybrid/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /external-wallets/hybrid/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /external-wallets/hybrid/src/App.tsx: -------------------------------------------------------------------------------- 1 | import { useCallback } from "react"; 2 | import { 3 | WidgetProvider, 4 | HandleWalletsUpdate, 5 | } from "@rango-dev/widget-embedded"; 6 | import { Dapp } from "./Dapp"; 7 | import "./styles.css"; 8 | import { WIDGET_CONFIG } from "./constants"; 9 | 10 | export default function App() { 11 | const handleUpdate = useCallback( 12 | (providerName, eventType, accounts, providerState, supportedChains) => { 13 | console.log({ 14 | providerName, 15 | eventType, 16 | accounts, 17 | providerState, 18 | supportedChains, 19 | }); 20 | }, 21 | [] 22 | ); 23 | return ( 24 |
25 | 30 | 31 | 32 |
33 | ); 34 | } 35 | -------------------------------------------------------------------------------- /external-wallets/hybrid/src/Dapp.tsx: -------------------------------------------------------------------------------- 1 | import { Fragment, useCallback } from "react"; 2 | import { useWallets, Widget } from "@rango-dev/widget-embedded"; 3 | import { providers } from "./providers"; 4 | import { WIDGET_CONFIG } from "./constants"; 5 | import { Button } from "@rango-dev/ui"; 6 | 7 | function ExternalWallet({ providerName }: { providerName: string }) { 8 | const { state, connect, disconnect } = useWallets(); 9 | const providerState = state(providerName); 10 | const handleClick = useCallback(() => { 11 | try { 12 | if (providerState.connected) { 13 | disconnect(providerName); 14 | } else { 15 | connect(providerName); 16 | } 17 | } catch (error) { 18 | console.error(error); 19 | } 20 | }, [providerName, providerState, connect, disconnect]); 21 | return ( 22 | 32 | ); 33 | } 34 | 35 | export function Dapp() { 36 | return ( 37 |
38 |
39 | {providers.map((provider, index) => ( 40 | 41 | 46 |
47 | 48 | ))} 49 |
50 | 51 |
52 | ); 53 | } 54 | -------------------------------------------------------------------------------- /external-wallets/hybrid/src/constants.ts: -------------------------------------------------------------------------------- 1 | import { WidgetConfig } from "@rango-dev/widget-embedded"; 2 | import { providers } from "./providers"; 3 | 4 | export const WIDGET_CONFIG: WidgetConfig = { 5 | externalWallets: true, 6 | // A combination of wallets implemented by Rango exchange and those implemented by DApp. 7 | wallets: providers, 8 | // This API key is only for test purpose. Don't use it in production. 9 | apiKey: "c6381a79-2817-4602-83bf-6a641a409e32", 10 | 11 | walletConnectProjectId: "e24844c5deb5193c1c14840a7af6a40b", 12 | }; 13 | -------------------------------------------------------------------------------- /external-wallets/hybrid/src/index.tsx: -------------------------------------------------------------------------------- 1 | import { StrictMode } from "react"; 2 | import { createRoot } from "react-dom/client"; 3 | 4 | import App from "./App"; 5 | 6 | const rootElement = document.getElementById("root")!; 7 | const root = createRoot(rootElement); 8 | 9 | root.render( 10 | 11 | 12 | 13 | ); 14 | -------------------------------------------------------------------------------- /external-wallets/hybrid/src/providers/index.ts: -------------------------------------------------------------------------------- 1 | export { providers } from "./providers"; 2 | -------------------------------------------------------------------------------- /external-wallets/hybrid/src/providers/metamask-provider.ts: -------------------------------------------------------------------------------- 1 | import { ProviderInterface } from "@rango-dev/widget-embedded"; 2 | import { 3 | config, 4 | getInstance, 5 | connect, 6 | subscribe, 7 | canSwitchNetworkTo, 8 | switchNetwork, 9 | getSigners, 10 | getWalletInfo, 11 | } from "@rango-dev/provider-metamask"; 12 | 13 | export const metamaskProvider: ProviderInterface = { 14 | config, 15 | getInstance, 16 | connect, 17 | subscribe, 18 | canSwitchNetworkTo, 19 | switchNetwork, 20 | getSigners, 21 | getWalletInfo, 22 | }; 23 | -------------------------------------------------------------------------------- /external-wallets/hybrid/src/providers/providers.ts: -------------------------------------------------------------------------------- 1 | import { ProviderInterface } from "@rango-dev/widget-embedded"; 2 | import { metamaskProvider } from "./metamask-provider"; 3 | 4 | export const providers: (ProviderInterface | string)[] = [ 5 | /* 6 | * We have already implemented this provider. This is only for demonstration purposes. 7 | * To use an external wallet provider that is not yet supported by us, you can create your own implementation of the Provider interface and pass it to the widget. 8 | */ 9 | metamaskProvider, 10 | // Use a provider that is already implemented. 11 | "coinbase", 12 | ]; 13 | -------------------------------------------------------------------------------- /external-wallets/hybrid/src/styles.css: -------------------------------------------------------------------------------- 1 | #app { 2 | height: 100vh; 3 | } 4 | 5 | .main-container { 6 | padding-top: 2rem; 7 | display: flex; 8 | flex-direction: column; 9 | justify-content: center; 10 | align-items: center; 11 | } 12 | 13 | .wallets-container { 14 | display: flex; 15 | flex-direction: column; 16 | justify-content: center; 17 | align-items: center; 18 | padding-bottom: 1rem; 19 | } 20 | -------------------------------------------------------------------------------- /external-wallets/hybrid/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "lib": ["dom", "dom.iterable", "esnext"], 5 | "allowJs": true, 6 | "skipLibCheck": true, 7 | "esModuleInterop": true, 8 | "allowSyntheticDefaultImports": true, 9 | "strict": true, 10 | "forceConsistentCasingInFileNames": true, 11 | "noFallthroughCasesInSwitch": true, 12 | "module": "esnext", 13 | "moduleResolution": "node", 14 | "resolveJsonModule": true, 15 | "isolatedModules": true, 16 | "noEmit": true, 17 | "jsx": "react-jsx" 18 | }, 19 | "include": ["src"] 20 | } 21 | -------------------------------------------------------------------------------- /external-wallets/rango-wallets/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | dist/ 3 | lerna-debug.log 4 | .vercel 5 | .npmrc 6 | 7 | # dependencies 8 | node_modules 9 | .pnp 10 | .pnp.js 11 | 12 | # testing 13 | coverage 14 | 15 | # next.js 16 | .next/ 17 | out/ 18 | build 19 | 20 | # misc 21 | .DS_Store 22 | *.pem 23 | 24 | # debug 25 | npm-debug.log* 26 | yarn-debug.log* 27 | yarn-error.log* 28 | .pnpm-debug.log* 29 | 30 | # local env files 31 | .env.local 32 | .env.development.local 33 | .env.test.local 34 | .env.production.local 35 | .env 36 | # turbo 37 | .turbo 38 | 39 | .parcel-cache 40 | storybook-static 41 | .yalc 42 | yalc.lock -------------------------------------------------------------------------------- /external-wallets/rango-wallets/config-overrides.js: -------------------------------------------------------------------------------- 1 | const webpack = require("webpack"); 2 | 3 | module.exports = function override(config) { 4 | const fallback = config.resolve.fallback || {}; 5 | Object.assign(fallback, { 6 | crypto: require.resolve("crypto-browserify"), 7 | stream: require.resolve("stream-browserify"), 8 | assert: require.resolve("assert"), 9 | http: require.resolve("stream-http"), 10 | https: require.resolve("https-browserify"), 11 | os: require.resolve("os-browserify"), 12 | url: require.resolve("url"), 13 | }); 14 | config.resolve.fallback = fallback; 15 | config.plugins = (config.plugins || []).concat([ 16 | new webpack.ProvidePlugin({ 17 | process: "process/browser", 18 | Buffer: ["buffer", "Buffer"], 19 | }), 20 | ]); 21 | config.ignoreWarnings = [/Failed to parse source map/]; 22 | config.module.rules.push({ 23 | test: /\.(js|mjs|jsx)$/, 24 | enforce: "pre", 25 | loader: require.resolve("source-map-loader"), 26 | resolve: { 27 | fullySpecified: false, 28 | }, 29 | }); 30 | return config; 31 | }; -------------------------------------------------------------------------------- /external-wallets/rango-wallets/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "rango-wallets", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@rango-dev/ui": "^0.46.0", 7 | "@rango-dev/widget-embedded": "^0.42.0", 8 | "react": "^18.2.0", 9 | "react-app-rewired": "^2.2.1", 10 | "react-dom": "^18.2.0" 11 | }, 12 | "devDependencies": { 13 | "assert": "^2.0.0", 14 | "babel-plugin-transform-commonjs-es2015-modules": "^4.0.1", 15 | "buffer": "^6.0.3", 16 | "crypto-browserify": "^3.12.0", 17 | "https-browserify": "^1.0.0", 18 | "loader-utils": "3.2.1", 19 | "node-polyfill-webpack-plugin": "^2.0.1", 20 | "os-browserify": "^0.3.0", 21 | "process": "^0.11.10", 22 | "react-scripts": "^5.0.1", 23 | "stream-browserify": "^3.0.0", 24 | "stream-http": "^3.2.0", 25 | "url": "^0.11.0" 26 | }, 27 | "scripts": { 28 | "start": "export NODE_OPTIONS='--max_old_space_size=8192'; react-app-rewired start", 29 | "build": "react-app-rewired build", 30 | "test": "react-app-rewired test" 31 | }, 32 | "eslintConfig": { 33 | "extends": [ 34 | "react-app", 35 | "react-app/jest" 36 | ] 37 | }, 38 | "browserslist": { 39 | "production": [ 40 | ">0.2%", 41 | "not dead", 42 | "not op_mini all" 43 | ], 44 | "development": [ 45 | "last 1 chrome version", 46 | "last 1 firefox version", 47 | "last 1 safari version" 48 | ] 49 | } 50 | } 51 | -------------------------------------------------------------------------------- /external-wallets/rango-wallets/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rango-exchange/widget-examples/fee514b9da60ac9bc4244817ee6b8691e14c8d4b/external-wallets/rango-wallets/public/favicon.ico -------------------------------------------------------------------------------- /external-wallets/rango-wallets/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 17 | 18 | 27 | React App 28 | 29 | 30 | 31 |
32 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /external-wallets/rango-wallets/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rango-exchange/widget-examples/fee514b9da60ac9bc4244817ee6b8691e14c8d4b/external-wallets/rango-wallets/public/logo192.png -------------------------------------------------------------------------------- /external-wallets/rango-wallets/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rango-exchange/widget-examples/fee514b9da60ac9bc4244817ee6b8691e14c8d4b/external-wallets/rango-wallets/public/logo512.png -------------------------------------------------------------------------------- /external-wallets/rango-wallets/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /external-wallets/rango-wallets/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /external-wallets/rango-wallets/src/App.jsx: -------------------------------------------------------------------------------- 1 | import { useCallback } from "react"; 2 | import { WidgetProvider } from "@rango-dev/widget-embedded"; 3 | import { Dapp } from "./Dapp"; 4 | import { WIDGET_CONFIG } from "./constants"; 5 | import "./styles.css"; 6 | 7 | export default function App() { 8 | const handleUpdate = useCallback( 9 | (providerName, eventType, accounts, providerState, supportedChains) => { 10 | console.log({ 11 | providerName, 12 | eventType, 13 | accounts, 14 | providerState, 15 | supportedChains, 16 | }); 17 | }, 18 | [] 19 | ); 20 | return ( 21 |
22 | 27 | 28 | 29 |
30 | ); 31 | } 32 | -------------------------------------------------------------------------------- /external-wallets/rango-wallets/src/Dapp.jsx: -------------------------------------------------------------------------------- 1 | import { Fragment, useCallback } from "react"; 2 | import { useWallets, Widget } from "@rango-dev/widget-embedded"; 3 | import { WALLETS, WIDGET_CONFIG } from "./constants"; 4 | import { Button } from "@rango-dev/ui"; 5 | 6 | function ExternalWallet({ providerName }) { 7 | const { state, connect, disconnect } = useWallets(); 8 | const providerState = state(providerName); 9 | const handleClick = useCallback(() => { 10 | try { 11 | if (providerState.connected) { 12 | disconnect(providerName); 13 | } else { 14 | connect(providerName); 15 | } 16 | } catch (error) { 17 | console.error(error); 18 | } 19 | }, [providerName, providerState, connect, disconnect]); 20 | return ( 21 | 31 | ); 32 | } 33 | 34 | export function Dapp() { 35 | return ( 36 |
37 |
38 | {WALLETS.map((providerName, index) => ( 39 | 40 | 41 |
42 | 43 | ))} 44 |
45 | 46 |
47 | ); 48 | } 49 | -------------------------------------------------------------------------------- /external-wallets/rango-wallets/src/constants.js: -------------------------------------------------------------------------------- 1 | export const WALLETS = ["metamask", "coinbase"]; 2 | 3 | export const WIDGET_CONFIG = { 4 | externalWallets: true, 5 | // Providers implemented by Rango exchange 6 | wallets: WALLETS, 7 | // This API key is only for test purpose. Don't use it in production. 8 | apiKey: "c6381a79-2817-4602-83bf-6a641a409e32", 9 | 10 | walletConnectProjectId: "e24844c5deb5193c1c14840a7af6a40b", 11 | }; 12 | -------------------------------------------------------------------------------- /external-wallets/rango-wallets/src/index.jsx: -------------------------------------------------------------------------------- 1 | import { StrictMode } from "react"; 2 | import { createRoot } from "react-dom/client"; 3 | 4 | import App from "./App"; 5 | 6 | const rootElement = document.getElementById("root"); 7 | const root = createRoot(rootElement); 8 | 9 | root.render( 10 | 11 | 12 | 13 | ); 14 | -------------------------------------------------------------------------------- /external-wallets/rango-wallets/src/styles.css: -------------------------------------------------------------------------------- 1 | #app { 2 | height: 100vh; 3 | } 4 | 5 | .main-container { 6 | padding-top: 2rem; 7 | display: flex; 8 | flex-direction: column; 9 | justify-content: center; 10 | align-items: center; 11 | } 12 | 13 | .wallets-container { 14 | display: flex; 15 | flex-direction: column; 16 | justify-content: center; 17 | align-items: center; 18 | padding-bottom: 1rem; 19 | } 20 | -------------------------------------------------------------------------------- /external-wallets/wagmi-wallets/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | dist/ 3 | 4 | # dependencies 5 | node_modules 6 | 7 | 8 | # testing 9 | coverage 10 | 11 | 12 | # misc 13 | .DS_Store 14 | *.pem 15 | 16 | # debug 17 | npm-debug.log* 18 | yarn-debug.log* 19 | yarn-error.log* 20 | .pnpm-debug.log* 21 | 22 | yalc.lock -------------------------------------------------------------------------------- /external-wallets/wagmi-wallets/README.md: -------------------------------------------------------------------------------- 1 | ## Project Documentation: Integrating Rango Widget External Wallet feature with Wagmi 2 | 3 | **In this project, an external wallet is seamlessly integrated with Wagmi in Rango..** 4 | 5 | ### Configuration Setup: 6 | Because Wagmi can only connect to one wallet at a time, the widget configuration should include `multiWallets: false`. Wagmi's single-wallet constraint is ensured by this setting. 7 | 8 | ### Connection Management: 9 | Utilize the `useWallet` hook's `connect` and `disconnect` functions for efficient management of wallet connections and disconnections within the widget. Additionally, monitor connection and disconnection events using the `onUpdateState` method within the `WidgetProvider` component to handle wallet connections with Wagmi methods effectively. 10 | 11 | ### Documentation: 12 | For detailed guidance on connecting wallets in Wagmi, refer to: [Wagmi Connect Wallet Guide](https://wagmi.sh/react/guides/connect-wallet 13 | ) 14 | 15 | For integrating external wallets with Rango's widget, consult: [Rango Widget Integration - External Wallets Documentation](https://docs.rango.exchange/widget-integration/external-wallets) 16 | -------------------------------------------------------------------------------- /external-wallets/wagmi-wallets/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Wagmi Wallets 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /external-wallets/wagmi-wallets/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "wagmi-wallets", 3 | "private": true, 4 | "version": "1.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "tsc && vite build", 9 | "lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0", 10 | "preview": "vite preview" 11 | }, 12 | "dependencies": { 13 | "@rango-dev/ui": "^0.46.0", 14 | "@rango-dev/widget-embedded": "^0.42.0", 15 | "@tanstack/react-query": "^5.29.2", 16 | "@wagmi/connectors": "^4.1.25", 17 | "react": "^18.2.0", 18 | "react-dom": "^18.2.0", 19 | "viem": "2.x", 20 | "vite-plugin-node-polyfills": "^0.8.2", 21 | "wagmi": "^2.5.19" 22 | }, 23 | "devDependencies": { 24 | "@types/react": "^18.0.28", 25 | "@types/react-dom": "^18.0.11", 26 | "@typescript-eslint/eslint-plugin": "^5.57.1", 27 | "@typescript-eslint/parser": "^5.57.1", 28 | "eslint": "^8.38.0", 29 | "eslint-plugin-react-hooks": "^4.6.0", 30 | "eslint-plugin-react-refresh": "^0.3.4", 31 | "typescript": "^5.0.2", 32 | "vite": "^4.3.2" 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /external-wallets/wagmi-wallets/public/vite.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /external-wallets/wagmi-wallets/src/App.tsx: -------------------------------------------------------------------------------- 1 | import { useCallback, useState } from "react"; 2 | import { 3 | HandleWalletsUpdate, 4 | WidgetProvider, 5 | } from "@rango-dev/widget-embedded"; 6 | import { Dapp } from "./Dapp"; 7 | import "./styles.css"; 8 | import { WIDGET_CONFIG } from "./constants"; 9 | import { useAccount, useDisconnect } from "wagmi"; 10 | 11 | export default function App() { 12 | const [rangoWalletConnected, setRangoWalletConnected] = useState( 13 | null 14 | ); 15 | const { disconnect } = useDisconnect(); 16 | const { isConnected } = useAccount(); 17 | const handleUpdate = useCallback( 18 | (providerName, eventType, accounts, providerState, supportedChains) => { 19 | if (providerState.connected && !isConnected) { 20 | setRangoWalletConnected(providerName); 21 | } else if ( 22 | isConnected && 23 | !providerState.connected && 24 | !providerState.connecting 25 | ) { 26 | setRangoWalletConnected(null); 27 | disconnect(); 28 | } else { 29 | setRangoWalletConnected(null); 30 | } 31 | }, 32 | [isConnected] 33 | ); 34 | 35 | return ( 36 |
37 | 42 | 43 | 44 |
45 | ); 46 | } 47 | -------------------------------------------------------------------------------- /external-wallets/wagmi-wallets/src/Dapp.tsx: -------------------------------------------------------------------------------- 1 | import { Fragment, useEffect } from "react"; 2 | import { Widget, useWallets } from "@rango-dev/widget-embedded"; 3 | import { WALLETS, WIDGET_CONFIG } from "./constants"; 4 | import { Button } from "@rango-dev/ui"; 5 | import { useAccount, useConnect, Connector, useDisconnect } from "wagmi"; 6 | 7 | function ExternalWallet({ 8 | name, 9 | type, 10 | connector, 11 | }: { 12 | name: string; 13 | type: string; 14 | connector?: Connector; 15 | }) { 16 | const { connect } = useConnect(); 17 | const { disconnect } = useDisconnect(); 18 | const { isConnected, connector: connectedWallet } = useAccount(); 19 | const walletIsConnected = 20 | isConnected && connectedWallet?.name === connector?.name; 21 | const { 22 | connect: rangoConnect, 23 | disconnect: rangoDisconnect, 24 | state, 25 | } = useWallets(); 26 | 27 | const handleClick = () => { 28 | try { 29 | if (walletIsConnected) { 30 | disconnect(); 31 | } else if (connector) { 32 | connect({ connector }); 33 | } 34 | } catch (error) { 35 | console.error(error); 36 | } 37 | }; 38 | 39 | useEffect(() => { 40 | if ( 41 | walletIsConnected && 42 | state(type).installed && 43 | !state(type).connected && 44 | !state(type).connecting 45 | ) { 46 | rangoConnect(type); 47 | } else if ( 48 | !walletIsConnected && 49 | state(type).installed && 50 | state(type).connected 51 | ) { 52 | rangoDisconnect(type); 53 | } 54 | }, [walletIsConnected]); 55 | 56 | return ( 57 | 65 | ); 66 | } 67 | 68 | export function Dapp({ 69 | rangoWalletConnected, 70 | }: { 71 | rangoWalletConnected: string | null; 72 | }) { 73 | const { connectors, connect } = useConnect(); 74 | const { disconnect: rangoDisconnect } = useWallets(); 75 | const filteredWallets = WALLETS.map((w) => { 76 | return { ...w, connector: connectors.find((c) => c.name === w.name) }; 77 | }); 78 | 79 | useEffect(() => { 80 | if (rangoWalletConnected) { 81 | const connector = connectors.find( 82 | (c) => 83 | WALLETS.find((w) => w.type === rangoWalletConnected)?.name === c.name 84 | ); 85 | if (connector) 86 | connect( 87 | { connector }, 88 | { onError: () => rangoDisconnect(rangoWalletConnected) } 89 | ); 90 | } 91 | }, [rangoWalletConnected]); 92 | return ( 93 |
94 |
95 | {filteredWallets.map((wallet, index) => ( 96 | 97 | 98 |
99 | 100 | ))} 101 |
102 | 103 |
104 | ); 105 | } 106 | -------------------------------------------------------------------------------- /external-wallets/wagmi-wallets/src/config.ts: -------------------------------------------------------------------------------- 1 | import { createConfig, http } from 'wagmi' 2 | import { mainnet, sepolia } from 'wagmi/chains' 3 | 4 | declare module 'wagmi' { 5 | interface Register { 6 | config: typeof config 7 | } 8 | } 9 | 10 | export const config = createConfig({ 11 | chains: [mainnet, sepolia], 12 | transports: { 13 | [mainnet.id]: http(), 14 | [sepolia.id]: http(), 15 | }, 16 | }) -------------------------------------------------------------------------------- /external-wallets/wagmi-wallets/src/constants.ts: -------------------------------------------------------------------------------- 1 | export const WALLETS = [ 2 | { 3 | type: "metamask", 4 | name: "MetaMask", 5 | }, 6 | { type: "coinbase", name: "Coinbase Wallet" }, 7 | ]; 8 | 9 | export const WIDGET_CONFIG = { 10 | externalWallets: true, 11 | multiWallets: false, 12 | wallets: WALLETS.map((w) => w.type), 13 | // This API key is only for test purpose. Don't use it in production. 14 | apiKey: "c6381a79-2817-4602-83bf-6a641a409e32", 15 | walletConnectProjectId: "e24844c5deb5193c1c14840a7af6a40b", 16 | }; 17 | -------------------------------------------------------------------------------- /external-wallets/wagmi-wallets/src/main.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from "react-dom/client"; 3 | import { WagmiProvider } from 'wagmi'; 4 | import { QueryClientProvider, QueryClient } from '@tanstack/react-query'; 5 | 6 | import App from './App'; 7 | import { config } from './config'; 8 | 9 | ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render( 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | ); 18 | -------------------------------------------------------------------------------- /external-wallets/wagmi-wallets/src/styles.css: -------------------------------------------------------------------------------- 1 | #app { 2 | height: 100vh; 3 | } 4 | 5 | .main-container { 6 | padding-top: 2rem; 7 | display: flex; 8 | flex-direction: column; 9 | justify-content: center; 10 | align-items: center; 11 | } 12 | 13 | .wallets-container { 14 | display: flex; 15 | flex-direction: column; 16 | justify-content: center; 17 | align-items: center; 18 | padding-bottom: 1rem; 19 | } 20 | -------------------------------------------------------------------------------- /external-wallets/wagmi-wallets/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ESNext", 4 | "lib": ["DOM", "DOM.Iterable", "ESNext"], 5 | "module": "ESNext", 6 | "skipLibCheck": true, 7 | 8 | /* Bundler mode */ 9 | "moduleResolution": "node", 10 | "allowSyntheticDefaultImports": true, 11 | "isolatedModules": true, 12 | "noEmit": true, 13 | "jsx": "react-jsx", 14 | 15 | /* Linting */ 16 | "strict": true, 17 | "noUnusedLocals": true, 18 | "noUnusedParameters": true, 19 | "noFallthroughCasesInSwitch": true 20 | }, 21 | "include": ["src"], 22 | } 23 | -------------------------------------------------------------------------------- /external-wallets/wagmi-wallets/vite.config.ts: -------------------------------------------------------------------------------- 1 | // vite.config.js 2 | import { defineConfig } from "vite"; 3 | import { nodePolyfills } from "vite-plugin-node-polyfills"; 4 | 5 | export default () => { 6 | return defineConfig({ 7 | build: { 8 | commonjsOptions: { 9 | transformMixedEsModules: true, 10 | }, 11 | }, 12 | plugins: [nodePolyfills()], 13 | server: { 14 | host: "localhost", 15 | port: 3000, 16 | }, 17 | }); 18 | }; 19 | -------------------------------------------------------------------------------- /iframe/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Rango widget in iframe 7 | 8 | 9 |
    10 |
  1. 11 | Modal 12 |
    2. 13 |
  2. 14 | Dynamic Modal 15 |
    3. 16 |
17 | 18 | 19 | -------------------------------------------------------------------------------- /iframe/modal.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Rango widget in iframe (modal) 4 | 31 | 32 | 33 |

34 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris porta 35 | vestibulum pulvinar. Aliquam erat volutpat. Sed et odio ut sapien aliquet 36 | molestie. Cras at nisi placerat, sodales nibh at, posuere augue. Nullam 37 | lacinia vel magna ut pulvinar. Lorem ipsum dolor sit amet, consectetur 38 | adipiscing elit. Praesent dictum ullamcorper ex, at pharetra risus ornare 39 | ut. Cras vel pharetra magna. Nunc orci nisl, elementum sit amet justo id, 40 | semper vehicula purus. Sed nisi sem, convallis quis efficitur sit amet, 41 | dictum pretium nisi. Vestibulum vel tincidunt sem. Duis vel diam ut lacus 42 | dignissim congue. Phasellus tincidunt diam ut turpis tempus commodo. Duis 43 | sit amet feugiat sapien, fringilla facilisis justo. Suspendisse blandit 44 | efficitur lectus, sed porttitor turpis dapibus ac. Maecenas vel arcu 45 | luctus, finibus erat sed, faucibus lacus. Nunc vulputate enim in tellus 46 | blandit volutpat. Mauris quis vehicula mi. Sed ac quam scelerisque, 47 | posuere felis ut, volutpat diam. Donec enim justo, rutrum et leo nec, 48 | cursus placerat magna. Cras mollis sagittis sem, et vestibulum nunc 49 | sodales non. Sed laoreet erat enim, sollicitudin rhoncus sem maximus sit 50 | amet. Nullam mattis lectus sed mi scelerisque, et commodo odio rhoncus. 51 | Interdum et malesuada fames ac ante ipsum primis in faucibus. Vestibulum 52 | lacus sem, porttitor nec ullamcorper non, rutrum id libero. Curabitur 53 | interdum, dui id vehicula placerat, orci ex dapibus nisi, a pretium lorem 54 | ligula a metus. Vivamus erat sem, cursus in pulvinar eu, aliquam vitae 55 | metus. Maecenas nec quam posuere, bibendum elit a, elementum purus. In 56 | eget neque odio. Sed faucibus aliquam metus, vitae vestibulum eros 57 | volutpat eu. Fusce sagittis, nisi sagittis aliquet porttitor, tortor mi 58 | iaculis nisl, at iaculis ex neque vel elit. Pellentesque non convallis 59 | nulla. Donec non est nibh. Vestibulum malesuada velit in lacus tempus 60 | elementum. Praesent sit amet fringilla sem, a aliquet sem. Suspendisse ac 61 | eros ornare, sodales ipsum et, tincidunt ipsum. Vivamus consectetur 62 | commodo massa ut facilisis. Quisque lacinia mi auctor quam molestie 63 | imperdiet. Integer at lorem eu leo congue commodo. Vivamus interdum ornare 64 | nisi, ac pretium leo laoreet ac. Morbi consequat turpis sit amet dui 65 | volutpat pellentesque. Proin bibendum, magna id feugiat fringilla, libero 66 | justo elementum leo, ac ullamcorper neque massa id mi. Nam auctor diam 67 | congue dignissim convallis. Proin ut quam sed metus interdum venenatis. 68 | Aliquam ornare enim imperdiet felis placerat, non molestie sem venenatis. 69 | Pellentesque efficitur libero id mauris ornare lobortis. Aenean dignissim 70 | ultrices elit, quis bibendum magna consectetur nec. Duis pellentesque elit 71 | eu ligula luctus, ac euismod nulla convallis. Quisque mattis luctus dolor 72 | sed tincidunt. Vivamus auctor elit mauris, quis molestie nisi posuere ut. 73 | Sed fringilla felis non lectus vehicula, in scelerisque elit condimentum. 74 | Sed lacinia leo eu lorem elementum, nec convallis nibh ornare. Integer sed 75 | mauris leo. Sed quis nisi tortor. Aenean vitae mauris sed est viverra 76 | porttitor sed vitae dui. Cras vitae leo tincidunt, rutrum nibh at, ornare 77 | leo. Aenean facilisis, quam non semper ultricies, libero augue congue 78 | eros, non posuere ante mi eu orci. Duis eget nunc id augue tempor mollis. 79 | Aliquam libero lectus, vestibulum sed sodales in, vulputate eget tortor. 80 | Duis turpis nibh, pharetra sed diam ut, iaculis pulvinar magna. In mattis 81 | iaculis bibendum. Nulla ullamcorper a mauris a faucibus. 82 |

83 |
84 |
85 |
86 | 87 | 102 | 103 | 104 | -------------------------------------------------------------------------------- /iframe/modal_dynamic.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Rango widget in iframe (modal) 4 | 30 | 31 | 32 |

33 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris porta 34 | vestibulum pulvinar. Aliquam erat volutpat. Sed et odio ut sapien aliquet 35 | molestie. Cras at nisi placerat, sodales nibh at, posuere augue. Nullam 36 | lacinia vel magna ut pulvinar. Lorem ipsum dolor sit amet, consectetur 37 | adipiscing elit. Praesent dictum ullamcorper ex, at pharetra risus ornare 38 | ut. Cras vel pharetra magna. Nunc orci nisl, elementum sit amet justo id, 39 | semper vehicula purus. Sed nisi sem, convallis quis efficitur sit amet, 40 | dictum pretium nisi. Vestibulum vel tincidunt sem. Duis vel diam ut lacus 41 | dignissim congue. Phasellus tincidunt diam ut turpis tempus commodo. Duis 42 | sit amet feugiat sapien, fringilla facilisis justo. Suspendisse blandit 43 | efficitur lectus, sed porttitor turpis dapibus ac. Maecenas vel arcu 44 | luctus, finibus erat sed, faucibus lacus. Nunc vulputate enim in tellus 45 | blandit volutpat. Mauris quis vehicula mi. Sed ac quam scelerisque, 46 | posuere felis ut, volutpat diam. Donec enim justo, rutrum et leo nec, 47 | cursus placerat magna. Cras mollis sagittis sem, et vestibulum nunc 48 | sodales non. Sed laoreet erat enim, sollicitudin rhoncus sem maximus sit 49 | amet. Nullam mattis lectus sed mi scelerisque, et commodo odio rhoncus. 50 | Interdum et malesuada fames ac ante ipsum primis in faucibus. Vestibulum 51 | lacus sem, porttitor nec ullamcorper non, rutrum id libero. Curabitur 52 | interdum, dui id vehicula placerat, orci ex dapibus nisi, a pretium lorem 53 | ligula a metus. Vivamus erat sem, cursus in pulvinar eu, aliquam vitae 54 | metus. Maecenas nec quam posuere, bibendum elit a, elementum purus. In 55 | eget neque odio. Sed faucibus aliquam metus, vitae vestibulum eros 56 | volutpat eu. Fusce sagittis, nisi sagittis aliquet porttitor, tortor mi 57 | iaculis nisl, at iaculis ex neque vel elit. Pellentesque non convallis 58 | nulla. Donec non est nibh. Vestibulum malesuada velit in lacus tempus 59 | elementum. Praesent sit amet fringilla sem, a aliquet sem. Suspendisse ac 60 | eros ornare, sodales ipsum et, tincidunt ipsum. Vivamus consectetur 61 | commodo massa ut facilisis. Quisque lacinia mi auctor quam molestie 62 | imperdiet. Integer at lorem eu leo congue commodo. Vivamus interdum ornare 63 | nisi, ac pretium leo laoreet ac. Morbi consequat turpis sit amet dui 64 | volutpat pellentesque. Proin bibendum, magna id feugiat fringilla, libero 65 | justo elementum leo, ac ullamcorper neque massa id mi. Nam auctor diam 66 | congue dignissim convallis. Proin ut quam sed metus interdum venenatis. 67 | Aliquam ornare enim imperdiet felis placerat, non molestie sem venenatis. 68 | Pellentesque efficitur libero id mauris ornare lobortis. Aenean dignissim 69 | ultrices elit, quis bibendum magna consectetur nec. Duis pellentesque elit 70 | eu ligula luctus, ac euismod nulla convallis. Quisque mattis luctus dolor 71 | sed tincidunt. Vivamus auctor elit mauris, quis molestie nisi posuere ut. 72 | Sed fringilla felis non lectus vehicula, in scelerisque elit condimentum. 73 | Sed lacinia leo eu lorem elementum, nec convallis nibh ornare. Integer sed 74 | mauris leo. Sed quis nisi tortor. Aenean vitae mauris sed est viverra 75 | porttitor sed vitae dui. Cras vitae leo tincidunt, rutrum nibh at, ornare 76 | leo. Aenean facilisis, quam non semper ultricies, libero augue congue 77 | eros, non posuere ante mi eu orci. Duis eget nunc id augue tempor mollis. 78 | Aliquam libero lectus, vestibulum sed sodales in, vulputate eget tortor. 79 | Duis turpis nibh, pharetra sed diam ut, iaculis pulvinar magna. In mattis 80 | iaculis bibendum. Nulla ullamcorper a mauris a faucibus. 81 |

82 |
83 |
84 |
85 | 86 | 119 | 120 | 121 | -------------------------------------------------------------------------------- /iframe/readme.md: -------------------------------------------------------------------------------- 1 | # Getting started 2 | 3 | You can get different configurations from [our playground](https://playground.rango.exchange/). 4 | 5 | ## Production/next testing 6 | 7 | ```shell 8 | npx serve ./ 9 | ``` 10 | 11 | ## Local testing 12 | 13 | First, put your local server url into `iframe` script which located at `widget/iframe/src/main.ts` and `WIDGET_URL`. 14 | 15 | Then, on `rango-client`, 16 | 17 | ```shell 18 | cd widget/iframe 19 | yarn build 20 | ``` 21 | 22 | Copy generated `index.js` into this directory. 23 | 24 | Then on `HTML` files of this directory update the script path to your local path: 25 | 26 | ```html 27 | 28 | ``` 29 | 30 | into 31 | 32 | ```html 33 | 34 | ``` 35 | 36 | If you are testing `embedded`, you need to run this command on `rango-client`: 37 | 38 | ```shell 39 | yarn dev:widget 40 | ``` 41 | 42 | Then serve HTML files using: 43 | 44 | ```shell 45 | npx serve ./ 46 | ``` 47 | -------------------------------------------------------------------------------- /next/.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "next/core-web-vitals" 3 | } 4 | -------------------------------------------------------------------------------- /next/.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.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # next.js 12 | /.next/ 13 | /out/ 14 | 15 | # production 16 | /build 17 | 18 | # misc 19 | .DS_Store 20 | *.pem 21 | 22 | # debug 23 | npm-debug.log* 24 | yarn-debug.log* 25 | yarn-error.log* 26 | 27 | # local env files 28 | .env*.local 29 | 30 | # vercel 31 | .vercel 32 | 33 | # typescript 34 | *.tsbuildinfo 35 | next-env.d.ts 36 | -------------------------------------------------------------------------------- /next/README.md: -------------------------------------------------------------------------------- 1 | This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/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 | ``` 14 | 15 | Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. 16 | 17 | You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file. 18 | 19 | [http://localhost:3000/api/hello](http://localhost:3000/api/hello) is an endpoint that uses [Route Handlers](https://beta.nextjs.org/docs/routing/route-handlers). This endpoint can be edited in `app/api/hello/route.ts`. 20 | 21 | This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font. 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/deployment) for more details. 37 | -------------------------------------------------------------------------------- /next/next-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | /// 3 | 4 | // NOTE: This file should not be edited 5 | // see https://nextjs.org/docs/basic-features/typescript for more information. 6 | -------------------------------------------------------------------------------- /next/next.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('next').NextConfig} */ 2 | const nextConfig = { 3 | experimental: { 4 | appDir: true, 5 | }, 6 | webpack: (config) => { 7 | config.externals.push("pino-pretty", "lokijs", "encoding"); 8 | return config; 9 | }, 10 | }; 11 | 12 | module.exports = nextConfig; 13 | -------------------------------------------------------------------------------- /next/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "widget-next", 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 | "@rango-dev/widget-embedded": "^0.42.0", 13 | "@types/node": "20.2.5", 14 | "@types/react": "18.2.7", 15 | "@types/react-dom": "18.2.4", 16 | "eslint": "8.41.0", 17 | "eslint-config-next": "13.4.4", 18 | "next": "13.4.4", 19 | "react": "18.2.0", 20 | "react-dom": "18.2.0", 21 | "typescript": "5.0.4" 22 | }, 23 | "devDependencies": { 24 | "encoding": "^0.1.13" 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /next/public/next.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /next/public/vercel.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /next/src/app/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rango-exchange/widget-examples/fee514b9da60ac9bc4244817ee6b8691e14c8d4b/next/src/app/favicon.ico -------------------------------------------------------------------------------- /next/src/app/layout.tsx: -------------------------------------------------------------------------------- 1 | export const metadata = { 2 | title: 'Rango Widget on Next.js', 3 | description: 'Rango exchange.', 4 | } 5 | 6 | export default function RootLayout({ 7 | children, 8 | }: { 9 | children: React.ReactNode 10 | }) { 11 | return ( 12 | 13 | {children} 14 | 15 | ) 16 | } 17 | -------------------------------------------------------------------------------- /next/src/app/page.module.css: -------------------------------------------------------------------------------- 1 | .main { 2 | display: flex; 3 | justify-content: center; 4 | align-items: center; 5 | } 6 | 7 | -------------------------------------------------------------------------------- /next/src/app/page.tsx: -------------------------------------------------------------------------------- 1 | import RangoWidget from '../rango-widget' 2 | import styles from './page.module.css' 3 | 4 | function Home() { 5 | return ( 6 |
7 | 8 |
9 | ) 10 | } 11 | 12 | 13 | export default Home; 14 | -------------------------------------------------------------------------------- /next/src/rango-widget/index.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import dynamic from "next/dynamic"; 4 | 5 | const Widget = dynamic( 6 | () => import("@rango-dev/widget-embedded").then((module) => module.Widget), 7 | { 8 | ssr: false, 9 | } 10 | ); 11 | 12 | function RangoWidget() { 13 | return ( 14 | 20 | ); 21 | } 22 | 23 | export default RangoWidget; 24 | -------------------------------------------------------------------------------- /next/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "lib": ["dom", "dom.iterable", "esnext"], 5 | "allowJs": true, 6 | "skipLibCheck": true, 7 | "strict": true, 8 | "forceConsistentCasingInFileNames": true, 9 | "noEmit": true, 10 | "esModuleInterop": true, 11 | "module": "esnext", 12 | "moduleResolution": "node", 13 | "resolveJsonModule": true, 14 | "isolatedModules": true, 15 | "jsx": "preserve", 16 | "incremental": true, 17 | "plugins": [ 18 | { 19 | "name": "next" 20 | } 21 | ], 22 | "paths": { 23 | "@/*": ["./src/*"] 24 | } 25 | }, 26 | "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"], 27 | "exclude": ["node_modules"] 28 | } 29 | -------------------------------------------------------------------------------- /parcel/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | dist/ 3 | 4 | # dependencies 5 | node_modules 6 | .pnp 7 | .pnp.js 8 | 9 | 10 | build 11 | 12 | 13 | # debug 14 | npm-debug.log* 15 | yarn-debug.log* 16 | yarn-error.log* 17 | .pnpm-debug.log* 18 | 19 | # local env files 20 | .env.local 21 | .env.development.local 22 | .env.test.local 23 | .env.production.local 24 | .env 25 | 26 | .parcel-cache 27 | .yalc 28 | yalc.lock -------------------------------------------------------------------------------- /parcel/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "widget-parcel", 3 | "version": "1.0.0", 4 | "private": true, 5 | "source": "public/index.html", 6 | "browserslist": "> 0.5%, last 2 versions, not dead", 7 | "scripts": { 8 | "dev": "parcel -p 3000 --cache-dir=.parcel-cache", 9 | "build": "parcel build --cache-dir=.parcel-cache" 10 | }, 11 | "devDependencies": { 12 | "@babel/core": "^7.12.0", 13 | "buffer": "^5.5.0", 14 | "crypto-browserify": "^3.12.0", 15 | "os-browserify": "^0.3.0", 16 | "parcel": "^2.7.0", 17 | "process": "^0.11.10", 18 | "punycode": "^1.4.1", 19 | "querystring-es3": "^0.2.1", 20 | "stream-browserify": "^3.0.0", 21 | "util": "^0.12.3" 22 | }, 23 | "dependencies": { 24 | "@rango-dev/widget-embedded": "^0.42.0", 25 | "react": "^18.2.0", 26 | "react-dom": "^18.2.0" 27 | }, 28 | "@parcel/resolver-default": { 29 | "packageExports": true 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /parcel/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | React App with Parcel 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /parcel/public/style.css: -------------------------------------------------------------------------------- 1 | #root { 2 | display: flex; 3 | justify-content: center; 4 | } 5 | -------------------------------------------------------------------------------- /parcel/src/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ReactDOM from "react-dom"; 3 | import { Widget } from "@rango-dev/widget-embedded"; 4 | 5 | const App = () => { 6 | return ( 7 | 13 | ); 14 | }; 15 | 16 | ReactDOM.render(, document.getElementById("root")); 17 | -------------------------------------------------------------------------------- /react-app-rewired-js/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | build 3 | -------------------------------------------------------------------------------- /react-app-rewired-js/config-overrides.js: -------------------------------------------------------------------------------- 1 | const webpack = require("webpack"); 2 | 3 | module.exports = function override(config) { 4 | const fallback = config.resolve.fallback || {}; 5 | Object.assign(fallback, { 6 | crypto: require.resolve("crypto-browserify"), 7 | stream: require.resolve("stream-browserify"), 8 | assert: require.resolve("assert"), 9 | http: require.resolve("stream-http"), 10 | https: require.resolve("https-browserify"), 11 | os: require.resolve("os-browserify"), 12 | url: require.resolve("url"), 13 | vm: require.resolve("vm-browserify"), 14 | }); 15 | config.resolve.fallback = fallback; 16 | config.plugins = (config.plugins || []).concat([ 17 | new webpack.ProvidePlugin({ 18 | process: "process/browser", 19 | Buffer: ["buffer", "Buffer"], 20 | }), 21 | ]); 22 | config.ignoreWarnings = [/Failed to parse source map/]; 23 | config.module.rules.push({ 24 | test: /\.(js|mjs|jsx)$/, 25 | enforce: "pre", 26 | loader: require.resolve("source-map-loader"), 27 | resolve: { 28 | fullySpecified: false, 29 | }, 30 | }); 31 | return config; 32 | }; -------------------------------------------------------------------------------- /react-app-rewired-js/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "widget-rewired-js", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@rango-dev/widget-embedded": "^0.42.0", 7 | "react": "^18.2.0", 8 | "react-app-rewired": "^2.2.1", 9 | "react-dom": "^18.2.0" 10 | }, 11 | "devDependencies": { 12 | "@babel/plugin-proposal-private-property-in-object": "^7.21.11", 13 | "assert": "^2.0.0", 14 | "buffer": "^6.0.3", 15 | "crypto-browserify": "^3.12.0", 16 | "https-browserify": "^1.0.0", 17 | "loader-utils": "3.2.1", 18 | "node-polyfill-webpack-plugin": "^2.0.1", 19 | "os-browserify": "^0.3.0", 20 | "process": "^0.11.10", 21 | "react-scripts": "^5.0.1", 22 | "stream-browserify": "^3.0.0", 23 | "stream-http": "^3.2.0", 24 | "url": "^0.11.0", 25 | "vm-browserify": "^1.1.2" 26 | }, 27 | "scripts": { 28 | "start": "export NODE_OPTIONS='--max_old_space_size=8192'; react-app-rewired start", 29 | "build": "react-app-rewired build", 30 | "test": "react-app-rewired test" 31 | }, 32 | "eslintConfig": { 33 | "extends": [ 34 | "react-app", 35 | "react-app/jest" 36 | ] 37 | }, 38 | "browserslist": { 39 | "production": [ 40 | ">0.2%", 41 | "not dead", 42 | "not op_mini all" 43 | ], 44 | "development": [ 45 | "last 1 chrome version", 46 | "last 1 firefox version", 47 | "last 1 safari version" 48 | ] 49 | } 50 | } 51 | -------------------------------------------------------------------------------- /react-app-rewired-js/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rango-exchange/widget-examples/fee514b9da60ac9bc4244817ee6b8691e14c8d4b/react-app-rewired-js/public/favicon.ico -------------------------------------------------------------------------------- /react-app-rewired-js/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 14 | 15 | Rango widget for react app rewired 16 | 17 | 18 | 19 |
20 | 21 | 22 | -------------------------------------------------------------------------------- /react-app-rewired-js/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rango-exchange/widget-examples/fee514b9da60ac9bc4244817ee6b8691e14c8d4b/react-app-rewired-js/public/logo192.png -------------------------------------------------------------------------------- /react-app-rewired-js/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rango-exchange/widget-examples/fee514b9da60ac9bc4244817ee6b8691e14c8d4b/react-app-rewired-js/public/logo512.png -------------------------------------------------------------------------------- /react-app-rewired-js/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /react-app-rewired-js/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /react-app-rewired-js/public/style.css: -------------------------------------------------------------------------------- 1 | #root { 2 | display: flex; 3 | justify-content: center; 4 | } 5 | -------------------------------------------------------------------------------- /react-app-rewired-js/src/App.js: -------------------------------------------------------------------------------- 1 | import { Widget } from "@rango-dev/widget-embedded"; 2 | 3 | function App() { 4 | return ( 5 | 11 | ); 12 | } 13 | 14 | export default App; 15 | -------------------------------------------------------------------------------- /react-app-rewired-js/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom/client'; 3 | import App from './App'; 4 | 5 | const root = ReactDOM.createRoot(document.getElementById('root')); 6 | root.render( 7 | 8 | 9 | 10 | ); 11 | -------------------------------------------------------------------------------- /react-app-rewired-js/src/logo.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /react-app-rewired-ts/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | dist/ 3 | lerna-debug.log 4 | .vercel 5 | .npmrc 6 | 7 | # dependencies 8 | node_modules 9 | .pnp 10 | .pnp.js 11 | 12 | # testing 13 | coverage 14 | 15 | # next.js 16 | .next/ 17 | out/ 18 | build 19 | 20 | # misc 21 | .DS_Store 22 | *.pem 23 | 24 | # debug 25 | npm-debug.log* 26 | yarn-debug.log* 27 | yarn-error.log* 28 | .pnpm-debug.log* 29 | 30 | # local env files 31 | .env.local 32 | .env.development.local 33 | .env.test.local 34 | .env.production.local 35 | .env 36 | # turbo 37 | .turbo 38 | 39 | .parcel-cache 40 | storybook-static 41 | .yalc 42 | yalc.lock -------------------------------------------------------------------------------- /react-app-rewired-ts/config-overrides.js: -------------------------------------------------------------------------------- 1 | const webpack = require("webpack"); 2 | 3 | module.exports = function override(config) { 4 | const fallback = config.resolve.fallback || {}; 5 | Object.assign(fallback, { 6 | crypto: require.resolve("crypto-browserify"), 7 | stream: require.resolve("stream-browserify"), 8 | assert: require.resolve("assert"), 9 | http: require.resolve("stream-http"), 10 | https: require.resolve("https-browserify"), 11 | os: require.resolve("os-browserify"), 12 | url: require.resolve("url"), 13 | vm: require.resolve("vm-browserify"), 14 | }); 15 | config.resolve.fallback = fallback; 16 | config.plugins = (config.plugins || []).concat([ 17 | new webpack.ProvidePlugin({ 18 | process: "process/browser", 19 | Buffer: ["buffer", "Buffer"], 20 | }), 21 | ]); 22 | config.ignoreWarnings = [/Failed to parse source map/]; 23 | config.module.rules.push({ 24 | test: /\.(js|mjs|jsx)$/, 25 | enforce: "pre", 26 | loader: require.resolve("source-map-loader"), 27 | resolve: { 28 | fullySpecified: false, 29 | }, 30 | }); 31 | return config; 32 | }; -------------------------------------------------------------------------------- /react-app-rewired-ts/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "widget-rewired", 3 | "version": "1.0.0", 4 | "dependencies": { 5 | "@rango-dev/widget-embedded": "^0.42.0", 6 | "react": "18.2.0", 7 | "react-app-rewired": "^2.2.1", 8 | "react-dom": "18.2.0" 9 | }, 10 | "devDependencies": { 11 | "@babel/plugin-proposal-private-property-in-object": "^7.21.11", 12 | "@babel/runtime": "7.13.8", 13 | "@types/node": "^20.2.5", 14 | "@types/react": "^18.2.0", 15 | "@types/react-dom": "^18.2.1", 16 | "crypto-browserify": "^3.12.0", 17 | "https-browserify": "^1.0.0", 18 | "os-browserify": "^0.3.0", 19 | "process": "^0.11.10", 20 | "react-scripts": "^5.0.1", 21 | "stream-browserify": "^3.0.0", 22 | "stream-http": "^3.2.0", 23 | "typescript": "^4.9.5", 24 | "util": "^0.12.5", 25 | "vm-browserify": "^1.1.2" 26 | }, 27 | "scripts": { 28 | "start": "export NODE_OPTIONS='--max_old_space_size=8192'; react-app-rewired start", 29 | "build": "react-app-rewired build", 30 | "test": "react-app-rewired test", 31 | "eject": "react-scripts eject" 32 | }, 33 | "browserslist": { 34 | "production": [ 35 | "chrome >= 67", 36 | "edge >= 79", 37 | "firefox >= 68", 38 | "opera >= 54", 39 | "safari >= 14" 40 | ], 41 | "development": [ 42 | "last 1 chrome version", 43 | "last 1 firefox version", 44 | "last 1 safari version" 45 | ] 46 | } 47 | } 48 | -------------------------------------------------------------------------------- /react-app-rewired-ts/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rango-exchange/widget-examples/fee514b9da60ac9bc4244817ee6b8691e14c8d4b/react-app-rewired-ts/public/favicon.ico -------------------------------------------------------------------------------- /react-app-rewired-ts/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 14 | 18 | 19 | 28 | Rango widget for react app rewired (Typescript) 29 | 30 | 31 | 32 |
33 | 43 | 44 | 45 | -------------------------------------------------------------------------------- /react-app-rewired-ts/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rango-exchange/widget-examples/fee514b9da60ac9bc4244817ee6b8691e14c8d4b/react-app-rewired-ts/public/logo192.png -------------------------------------------------------------------------------- /react-app-rewired-ts/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rango-exchange/widget-examples/fee514b9da60ac9bc4244817ee6b8691e14c8d4b/react-app-rewired-ts/public/logo512.png -------------------------------------------------------------------------------- /react-app-rewired-ts/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /react-app-rewired-ts/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /react-app-rewired-ts/public/style.css: -------------------------------------------------------------------------------- 1 | #root { 2 | display: flex; 3 | justify-content: center; 4 | } 5 | -------------------------------------------------------------------------------- /react-app-rewired-ts/src/App.tsx: -------------------------------------------------------------------------------- 1 | import { Widget } from "@rango-dev/widget-embedded"; 2 | 3 | function App() { 4 | return ( 5 | 11 | ); 12 | } 13 | 14 | export default App; 15 | -------------------------------------------------------------------------------- /react-app-rewired-ts/src/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom/client'; 3 | import App from './App'; 4 | 5 | const root = ReactDOM.createRoot( 6 | document.getElementById('root') as HTMLElement 7 | ); 8 | root.render( 9 | 10 | 11 | 12 | ); 13 | -------------------------------------------------------------------------------- /react-app-rewired-ts/src/logo.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /react-app-rewired-ts/src/react-app-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /react-app-rewired-ts/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "lib": ["dom", "dom.iterable", "esnext"], 5 | "allowJs": true, 6 | "skipLibCheck": true, 7 | "esModuleInterop": true, 8 | "allowSyntheticDefaultImports": true, 9 | "strict": true, 10 | "forceConsistentCasingInFileNames": true, 11 | "noFallthroughCasesInSwitch": true, 12 | "module": "esnext", 13 | "moduleResolution": "node", 14 | "resolveJsonModule": true, 15 | "isolatedModules": true, 16 | "noEmit": true, 17 | "jsx": "react-jsx" 18 | }, 19 | "include": ["src"] 20 | } 21 | -------------------------------------------------------------------------------- /readme.md: -------------------------------------------------------------------------------- 1 | # Examples 2 | 3 | Each example has been setup to use different tool/technology, you can `cd` to each directory and install dependencies using `yarn` then run the example. 4 | -------------------------------------------------------------------------------- /vite/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | dist/ 3 | lerna-debug.log 4 | .vercel 5 | .npmrc 6 | 7 | # dependencies 8 | node_modules 9 | .pnp 10 | .pnp.js 11 | 12 | # testing 13 | coverage 14 | 15 | # next.js 16 | .next/ 17 | out/ 18 | build 19 | 20 | # misc 21 | .DS_Store 22 | *.pem 23 | 24 | # debug 25 | npm-debug.log* 26 | yarn-debug.log* 27 | yarn-error.log* 28 | .pnpm-debug.log* 29 | 30 | # local env files 31 | .env.local 32 | .env.development.local 33 | .env.test.local 34 | .env.production.local 35 | .env 36 | # turbo 37 | .turbo 38 | 39 | .parcel-cache 40 | storybook-static 41 | .yalc 42 | yalc.lock -------------------------------------------------------------------------------- /vite/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite + React + TS 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /vite/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "widget-vite", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "tsc && vite build", 9 | "lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0", 10 | "preview": "vite preview" 11 | }, 12 | "dependencies": { 13 | "@rango-dev/widget-embedded": "^0.42.0", 14 | "react": "^18.2.0", 15 | "react-dom": "^18.2.0", 16 | "vite-plugin-node-polyfills": "^0.8.2" 17 | }, 18 | "devDependencies": { 19 | "@types/react": "^18.0.28", 20 | "@types/react-dom": "^18.0.11", 21 | "@typescript-eslint/eslint-plugin": "^5.57.1", 22 | "@typescript-eslint/parser": "^5.57.1", 23 | "eslint": "^8.38.0", 24 | "eslint-plugin-react-hooks": "^4.6.0", 25 | "eslint-plugin-react-refresh": "^0.3.4", 26 | "typescript": "^5.0.2", 27 | "vite": "^4.3.2" 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /vite/public/vite.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /vite/src/App.css: -------------------------------------------------------------------------------- 1 | #root{ 2 | display: flex; 3 | justify-content: center; 4 | } -------------------------------------------------------------------------------- /vite/src/App.tsx: -------------------------------------------------------------------------------- 1 | import "./App.css"; 2 | import { Widget } from "@rango-dev/widget-embedded"; 3 | 4 | function App() { 5 | return ( 6 | 12 | ); 13 | } 14 | 15 | export default App; 16 | -------------------------------------------------------------------------------- /vite/src/main.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ReactDOM from "react-dom/client"; 3 | import App from "./App"; 4 | 5 | ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render( 6 | 7 | 8 | 9 | ); 10 | -------------------------------------------------------------------------------- /vite/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /vite/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ESNext", 4 | "lib": ["DOM", "DOM.Iterable", "ESNext"], 5 | "module": "ESNext", 6 | "skipLibCheck": true, 7 | 8 | /* Bundler mode */ 9 | "moduleResolution": "node", 10 | "allowSyntheticDefaultImports": true, 11 | "isolatedModules": true, 12 | "noEmit": true, 13 | "jsx": "react-jsx", 14 | 15 | /* Linting */ 16 | "strict": true, 17 | "noUnusedLocals": true, 18 | "noUnusedParameters": true, 19 | "noFallthroughCasesInSwitch": true 20 | }, 21 | "include": ["src"], 22 | } 23 | -------------------------------------------------------------------------------- /vite/vite.config.ts: -------------------------------------------------------------------------------- 1 | // vite.config.js 2 | import { defineConfig } from "vite"; 3 | import { nodePolyfills } from "vite-plugin-node-polyfills"; 4 | 5 | export default () => { 6 | return defineConfig({ 7 | build: { 8 | commonjsOptions: { 9 | transformMixedEsModules: true, 10 | }, 11 | }, 12 | plugins: [nodePolyfills()], 13 | server: { 14 | host: "localhost", 15 | port: 3000, 16 | }, 17 | }); 18 | }; 19 | -------------------------------------------------------------------------------- /vue/.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 | -------------------------------------------------------------------------------- /vue/README.md: -------------------------------------------------------------------------------- 1 | # Vue 3 + TypeScript + Vite 2 | 3 | This project demonstrates how to use our `widget` in a Vue-based project. The widget is integrated using the [Veaury](https://github.com/devilwjp/veaury) package. `Veaury` is a package that allows you to use React components within a `Vue` project. 4 | 5 | ## Recommended Setup 6 | 7 | In addition to the `Veaury` package, you need to have `react` and `react-dom` as dependencies for this project to work correctly. Ensure these dependencies are included in your `package.json` file. 8 | -------------------------------------------------------------------------------- /vue/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Rango Widget - Vue Template 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /vue/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "vue-tsc && vite build", 9 | "preview": "vite preview" 10 | }, 11 | "dependencies": { 12 | "@rango-dev/widget-embedded": "^0.42.0", 13 | "react": "^18.2.0", 14 | "react-dom": "^18.2.0", 15 | "veaury": "^2.3.16", 16 | "vue": "^3.4.21" 17 | }, 18 | "devDependencies": { 19 | "@vitejs/plugin-react": "^4.2.1", 20 | "@vitejs/plugin-vue": "^5.0.4", 21 | "@vitejs/plugin-vue-jsx": "^3.1.0", 22 | "typescript": "^5.2.2", 23 | "vite": "^5.2.0", 24 | "vite-plugin-node-polyfills": "^0.21.0", 25 | "vue-tsc": "^2.0.6" 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /vue/public/vite.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /vue/src/App.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | -------------------------------------------------------------------------------- /vue/src/assets/vue.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /vue/src/components/Widget.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 24 | -------------------------------------------------------------------------------- /vue/src/main.ts: -------------------------------------------------------------------------------- 1 | import { createApp } from 'vue' 2 | import './style.css' 3 | import App from './App.vue' 4 | 5 | createApp(App).mount('#app') 6 | -------------------------------------------------------------------------------- /vue/src/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | display: flex; 4 | justify-content: center; 5 | } 6 | -------------------------------------------------------------------------------- /vue/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | 3 | declare module '*.vue' { 4 | import type { DefineComponent } from 'vue' 5 | const component: DefineComponent<{}, {}, any> 6 | export default component 7 | } -------------------------------------------------------------------------------- /vue/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ES2020", 4 | "useDefineForClassFields": true, 5 | "module": "ESNext", 6 | "lib": ["ES2020", "DOM", "DOM.Iterable"], 7 | "skipLibCheck": true, 8 | 9 | /* Bundler mode */ 10 | "moduleResolution": "bundler", 11 | "allowImportingTsExtensions": true, 12 | "resolveJsonModule": true, 13 | "isolatedModules": true, 14 | "noEmit": true, 15 | "jsx": "preserve", 16 | 17 | /* Linting */ 18 | "strict": true, 19 | "noUnusedLocals": true, 20 | "noUnusedParameters": true, 21 | "noFallthroughCasesInSwitch": true 22 | }, 23 | "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"], 24 | "references": [{ "path": "./tsconfig.node.json" }] 25 | } 26 | -------------------------------------------------------------------------------- /vue/tsconfig.node.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "composite": true, 4 | "skipLibCheck": true, 5 | "module": "ESNext", 6 | "moduleResolution": "bundler", 7 | "allowSyntheticDefaultImports": true, 8 | }, 9 | "include": ["vite.config.ts"] 10 | } 11 | -------------------------------------------------------------------------------- /vue/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { nodePolyfills } from 'vite-plugin-node-polyfills'; 2 | import veauryVitePlugins from 'veaury/vite'; 3 | import { defineConfig } from 'vite'; 4 | 5 | export default defineConfig({ 6 | plugins: [ 7 | veauryVitePlugins({ 8 | type: 'vue', 9 | }), 10 | nodePolyfills(), 11 | ], 12 | esbuild: { 13 | target: 'esnext', 14 | }, 15 | }); -------------------------------------------------------------------------------- /yarn.lock: -------------------------------------------------------------------------------- 1 | # THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. 2 | # yarn lockfile v1 3 | 4 | 5 | --------------------------------------------------------------------------------