├── src
    ├── react-app-env.d.ts
    ├── components
    │   ├── Button
    │   │   ├── index.tsx
    │   │   └── styles.css.tsx
    │   ├── Console
    │   │   ├── styles.css.tsx
    │   │   └── index.tsx
    │   └── Group
    │   │   ├── styles.css.ts
    │   │   └── index.tsx
    ├── reportWebVitals.ts
    ├── index.tsx
    ├── App.tsx
    ├── constants
    │   └── abi.ts
    ├── images
    │   └── logo.svg
    └── Demo.tsx
├── public
    ├── robots.txt
    ├── favicon.ico
    ├── logo192.png
    ├── logo512.png
    ├── manifest.json
    └── index.html
├── screenshots
    ├── screen-txn.png
    └── screen-open.png
├── .prettierrc
├── .gitignore
├── tsconfig.json
├── .github
    └── workflows
    │   └── build.yml
├── craco.config.js
├── README.md
├── package.json
└── LICENSE


/src/react-app-env.d.ts:
--------------------------------------------------------------------------------
1 | /// <reference types="react-scripts" />
2 | 


--------------------------------------------------------------------------------
/public/robots.txt:
--------------------------------------------------------------------------------
1 | # https://www.robotstxt.org/robotstxt.html
2 | User-agent: *
3 | Disallow:
4 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/0xsequence/demo-dapp-web3modal/HEAD/public/favicon.ico


--------------------------------------------------------------------------------
/public/logo192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/0xsequence/demo-dapp-web3modal/HEAD/public/logo192.png


--------------------------------------------------------------------------------
/public/logo512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/0xsequence/demo-dapp-web3modal/HEAD/public/logo512.png


--------------------------------------------------------------------------------
/screenshots/screen-txn.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/0xsequence/demo-dapp-web3modal/HEAD/screenshots/screen-txn.png


--------------------------------------------------------------------------------
/screenshots/screen-open.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/0xsequence/demo-dapp-web3modal/HEAD/screenshots/screen-open.png


--------------------------------------------------------------------------------
/.prettierrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "tabWidth": 2,
 3 |   "useTabs": false,
 4 |   "semi": false,
 5 |   "singleQuote": true,
 6 |   "trailingComma": "none",
 7 |   "arrowParens": "avoid",
 8 |   "printWidth": 130
 9 | }
10 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | #dependencies
 2 | node_modules/
 3 | 
 4 | # production
 5 | dist/
 6 | 
 7 | # misc
 8 | .DS_Store
 9 | .vscode
10 | .idea/
11 | *.iml
12 | npm-debug.log*
13 | yarn-debug.log*
14 | yarn-error.log*
15 | lerna-debug.log*
16 | 


--------------------------------------------------------------------------------
/src/components/Button/index.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import { Box } from '@0xsequence/design-system'
 3 | 
 4 | import * as styles from './styles.css'
 5 | 
 6 | export const Button: React.ElementType = ({ children, ...props  }) => (
 7 |   <Box as="button" {...props} className={styles.button}>
 8 |     {children}
 9 |   </Box>
10 | )


--------------------------------------------------------------------------------
/src/components/Console/styles.css.tsx:
--------------------------------------------------------------------------------
 1 | import { style, keyframes } from '@vanilla-extract/css'
 2 | 
 3 | export const blink = keyframes({
 4 |   '0%': { visibility: 'hidden' },
 5 |   '50%': { visibility: 'hidden' },
 6 |   '100%': {visibility: 'visible' }
 7 | })
 8 | 
 9 | export const cursor = style({
10 |   animation: `${blink} 2s infinite`,
11 | })


--------------------------------------------------------------------------------
/src/reportWebVitals.ts:
--------------------------------------------------------------------------------
 1 | import { ReportHandler } from 'web-vitals';
 2 | 
 3 | const reportWebVitals = (onPerfEntry?: ReportHandler) => {
 4 |   if (onPerfEntry && onPerfEntry instanceof Function) {
 5 |     import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
 6 |       getCLS(onPerfEntry);
 7 |       getFID(onPerfEntry);
 8 |       getFCP(onPerfEntry);
 9 |       getLCP(onPerfEntry);
10 |       getTTFB(onPerfEntry);
11 |     });
12 |   }
13 | };
14 | 
15 | export default reportWebVitals;
16 | 


--------------------------------------------------------------------------------
/src/components/Group/styles.css.ts:
--------------------------------------------------------------------------------
 1 | import { vars, responsiveStyle } from '@0xsequence/design-system'
 2 | import { style } from '@vanilla-extract/css'
 3 | 
 4 | export const groupItems = style({
 5 |   display: "grid",
 6 |   gridColumnGap: vars.space[4],
 7 |   gridRowGap: vars.space[4],
 8 |   gridTemplateColumns: "repeat(1, minmax(0, 1fr))",
 9 |   '@media': responsiveStyle({
10 |     lg: {
11 |       gridTemplateColumns: "repeat(2, minmax(0, 1fr))",
12 |     },
13 |     xl: {
14 |       gridTemplateColumns: "repeat(3, minmax(0, 1fr))",
15 |     }
16 |   })
17 | })


--------------------------------------------------------------------------------
/public/manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "short_name": "Sequence Demo Dapp",
 3 |   "name": "Ethereum Demo Dapp built on Sequence stack",
 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 | 


--------------------------------------------------------------------------------
/src/components/Button/styles.css.tsx:
--------------------------------------------------------------------------------
 1 | import { vars } from '@0xsequence/design-system'
 2 | import { style } from '@vanilla-extract/css'
 3 | 
 4 | export const button = style({
 5 |   border: 'none',
 6 |   display: 'inline-block',
 7 |   userSelect: 'none',
 8 |   cursor: 'pointer',
 9 | 
10 |   color: vars.colors.text100,
11 |   backgroundColor: vars.colors.buttonGlass,
12 |   position: 'relative',
13 |   width: '100%',
14 |   height: '50px',
15 |   borderRadius: '15px',
16 |   padding: '15px',
17 |   alignItems: 'center',
18 | 
19 |   ':hover': {
20 |     opacity: 0.8
21 |   },
22 | 
23 |   ':disabled': {
24 |     pointerEvents: 'none',
25 |     cursor: 'default',
26 |     opacity: 0.6
27 |   }
28 | })


--------------------------------------------------------------------------------
/src/index.tsx:
--------------------------------------------------------------------------------
 1 | import { ThemeProvider } from '@0xsequence/design-system'
 2 | import React from 'react'
 3 | import ReactDOM from 'react-dom'
 4 | import { App } from './App'
 5 | 
 6 | import reportWebVitals from './reportWebVitals'
 7 | 
 8 | import '@0xsequence/design-system/styles.css'
 9 | 
10 | ReactDOM.render(
11 |   <React.StrictMode>
12 |     <ThemeProvider>
13 |       <App />
14 |     </ThemeProvider>
15 |   </React.StrictMode>,
16 |   document.getElementById('root')
17 | )
18 | 
19 | // If you want to start measuring performance in your app, pass a function
20 | // to log results (for example: reportWebVitals(console.log))
21 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
22 | reportWebVitals()
23 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "ESNext",
 4 |     "lib": [
 5 |       "dom",
 6 |       "dom.iterable",
 7 |       "esnext"
 8 |     ],
 9 |     "allowJs": true,
10 |     "skipLibCheck": true,
11 |     "esModuleInterop": true,
12 |     "allowSyntheticDefaultImports": true,
13 |     "strict": true,
14 |     "forceConsistentCasingInFileNames": true,
15 |     "noFallthroughCasesInSwitch": true,
16 |     "module": "esnext",
17 |     "moduleResolution": "node",
18 |     "resolveJsonModule": true,
19 |     "isolatedModules": true,
20 |     "noEmit": true,
21 |     "jsx": "react-jsx",
22 |     "strictNullChecks": false,
23 |     "noImplicitAny": false,
24 |   },
25 |   "include": [
26 |     "src"
27 |   ]
28 | }
29 | 


--------------------------------------------------------------------------------
/.github/workflows/build.yml:
--------------------------------------------------------------------------------
 1 | name: build dapp
 2 | 
 3 | on:
 4 |   push:
 5 |    branches:
 6 |     - master
 7 | 
 8 | jobs:
 9 |   build:
10 |    runs-on: ubuntu-latest
11 |    name: Build and Push
12 |    steps:
13 |     - name: git-checkout
14 |       uses: actions/checkout@v2
15 |       with:
16 |         lfs: true
17 |     
18 |     - name: Install dependencies
19 |       run: |
20 |         npm install -g yarn
21 |         yarn install
22 |     
23 |     - name: Build
24 |       run: yarn dist
25 |       
26 |     - name: Push
27 |       uses: s0/git-publish-subdir-action@develop
28 |       env:
29 |         REPO: self
30 |         BRANCH: build
31 |         FOLDER: dist
32 |         GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
33 |         MESSAGE: "Build: ({sha}) {msg}"
34 | 


--------------------------------------------------------------------------------
/src/components/Group/index.tsx:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import { Box, Text } from '@0xsequence/design-system'
 3 | 
 4 | import * as styles from './styles.css' 
 5 | 
 6 | interface GroupProps {
 7 |   label?: JSX.Element | string;
 8 |   children: React.ReactNode;
 9 |   style?: any;
10 |   className?: string;
11 | }
12 | 
13 | export const Group = (props: GroupProps) => {
14 |   const { label, children, style, className } = props;
15 | 
16 |   return (
17 |     <Box marginTop="10" marginBottom="8" marginX="0" width="full" className={className} style={style}>
18 |       {label && <Box marginBottom="4"><Text color="text80">{label}</Text></Box>}
19 |       <Box className={styles.groupItems}>
20 |         {React.Children.map(children, (child, i) => (
21 |           <Box key={i}>{child}</Box>
22 |         ))}
23 |       </Box>
24 |     </Box>
25 |   );
26 | };
27 | 


--------------------------------------------------------------------------------
/src/App.tsx:
--------------------------------------------------------------------------------
 1 | import Demo from './Demo'
 2 | 
 3 | import { EthereumClient, w3mConnectors, w3mProvider } from '@web3modal/ethereum'
 4 | import { Web3Modal } from '@web3modal/react'
 5 | import { configureChains, createConfig, WagmiConfig } from 'wagmi'
 6 | import { polygon } from 'wagmi/chains'
 7 | 
 8 | const chains = [polygon]
 9 | const projectId = 'b87cf8b78e1c5a9881adabe5765d2461'
10 | 
11 | const { publicClient } = configureChains(chains, [w3mProvider({ projectId })])
12 | const wagmiConfig = createConfig({
13 |   autoConnect: true,
14 |   connectors: w3mConnectors({ projectId, version: 2, chains }),
15 |   publicClient
16 | })
17 | const ethereumClient = new EthereumClient(wagmiConfig, chains)
18 | 
19 | export const App = () => {
20 |   return (
21 |     <>
22 |       <WagmiConfig config={wagmiConfig}>
23 |         <Demo />
24 |       </WagmiConfig>
25 | 
26 |       <Web3Modal projectId={projectId} ethereumClient={ethereumClient} />
27 |     </>
28 |   )
29 | }
30 | 


--------------------------------------------------------------------------------
/src/components/Console/index.tsx:
--------------------------------------------------------------------------------
 1 | import { Box } from '@0xsequence/design-system'
 2 | 
 3 | import * as styles from './styles.css'
 4 | 
 5 | export interface ConsoleProps {
 6 |   message: string | null,
 7 |   loading: boolean
 8 | }
 9 | 
10 | export const Console = ({ message, loading }: ConsoleProps) => {
11 | 
12 |   const getLoadingDots = () => {
13 |     if (message) {
14 |       return '\n...'
15 |     }
16 |     return '...'
17 |   }
18 | 
19 |   return (
20 |     <Box borderRadius="md" padding="4" style={{ backgroundColor: 'grey' }} color="backgroundPrimary">
21 |       <Box style={{ fontFamily: 'monospace' }}>Output:</Box>
22 |       <div>
23 |         <Box as="pre" style={{ fontFamily: 'monospace', whiteSpace: "break-spaces", overflowWrap: "anywhere" }} >
24 |           {message}
25 |           {loading && getLoadingDots()}
26 |           {<Box className={styles.cursor} display="inline-block" fontSize="large" lineHeight="4" style={{ top: '-4px', position: 'relative' }}>_</Box>}
27 |         </Box>
28 |       </div>
29 |     </Box>
30 |   )
31 | }
32 | 


--------------------------------------------------------------------------------
/src/constants/abi.ts:
--------------------------------------------------------------------------------
 1 | export const ERC_1155_ABI = [
 2 |   {
 3 |     inputs: [
 4 |       {
 5 |         internalType: 'address',
 6 |         name: '_from',
 7 |         type: 'address'
 8 |       },
 9 |       {
10 |         internalType: 'address',
11 |         name: '_to',
12 |         type: 'address'
13 |       },
14 |       {
15 |         internalType: 'uint256[]',
16 |         name: '_ids',
17 |         type: 'uint256[]'
18 |       },
19 |       {
20 |         internalType: 'uint256[]',
21 |         name: '_amounts',
22 |         type: 'uint256[]'
23 |       },
24 |       {
25 |         internalType: 'bytes',
26 |         name: '_data',
27 |         type: 'bytes'
28 |       }
29 |     ],
30 |     name: 'safeBatchTransferFrom',
31 |     outputs: [],
32 |     stateMutability: 'nonpayable',
33 |     type: 'function'
34 |   }
35 | ]
36 | 
37 | export const ERC_20_ABI = [
38 |   {
39 |     constant: false,
40 |     inputs: [
41 |       {
42 |         internalType: 'address',
43 |         name: 'recipient',
44 |         type: 'address'
45 |       },
46 |       {
47 |         internalType: 'uint256',
48 |         name: 'amount',
49 |         type: 'uint256'
50 |       }
51 |     ],
52 |     name: 'transfer',
53 |     outputs: [
54 |       {
55 |         internalType: 'bool',
56 |         name: '',
57 |         type: 'bool'
58 |       }
59 |     ],
60 |     payable: false,
61 |     stateMutability: 'nonpayable',
62 |     type: 'function'
63 |   }
64 | ]
65 | 


--------------------------------------------------------------------------------
/craco.config.js:
--------------------------------------------------------------------------------
 1 | const NodePolyfillPlugin = require('node-polyfill-webpack-plugin')
 2 | const { VanillaExtractPlugin } = require('@vanilla-extract/webpack-plugin');
 3 | const ModuleScopePlugin = require("react-dev-utils/ModuleScopePlugin");
 4 | const path = require('path');
 5 | 
 6 | module.exports = {
 7 |   webpack: {
 8 |     plugins: [
 9 |       new VanillaExtractPlugin(),
10 |       new NodePolyfillPlugin({
11 |         excludeAliases: [
12 |           'assert',
13 |           'console',
14 |           'constants',
15 |           'crypto',
16 |           'domain',
17 |           'events',
18 |           // 'http',
19 |           // 'https',
20 |           // 'os',
21 |           'path',
22 |           'punycode',
23 |           'querystring',
24 |           '_stream_duplex',
25 |           '_stream_passthrough',
26 |           '_stream_transform',
27 |           '_stream_writable',
28 |           'string_decoder',
29 |           'sys',
30 |           'timers',
31 |           'tty',
32 |           'url',
33 |           'util',
34 |           'vm',
35 |           'zlib'
36 |         ]
37 |       })
38 |     ],
39 |     configure: (webpackConfig) => {
40 |       const moduleScopePlugin = webpackConfig.resolve.plugins.find(
41 |         (plugin) => plugin instanceof ModuleScopePlugin
42 |       );
43 |       moduleScopePlugin.allowedPaths.push(
44 |         path.resolve(
45 |           __dirname, 
46 |           "node_modules/@vanilla-extract/webpack-plugin"
47 |         )
48 |       );
49 | 
50 |       return webpackConfig;
51 |     },
52 |   }
53 | }
54 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | Demo Dapp + Web3Modal
 2 | =====================
 3 | 
 4 | Dapp example on how to use Sequence Wallet with [Web3Modal](https://github.com/Web3Modal/web3modal). Demonstrates how to connect a wallet, sign messages and send transactions.
 5 | 
 6 | Try this dapp at: [https://0xsequence.github.io/demo-dapp-web3modal](https://0xsequence.github.io/demo-dapp-web3modal)
 7 | 
 8 | For complete documentation on Sequence, please see: [https://docs.sequence.build](https://docs.sequence.build)
 9 | 
10 | ## Usage
11 | 
12 | 1. yarn
13 | 2. yarn dev
14 | 3. Open browser to http://localhost:4000 to access the demo dapp
15 | 4. Open browser inspector to see responses from your wallet
16 | 
17 | ## Development
18 | 
19 | See https://github.com/0xsequence/demo-dapp-web3modal/blob/master/src/App.tsx for the source
20 | usage for a variety of functions. be sure t open your browser's dev inspector to see output.
21 | Think of these functions as a "cookbook" for how you can perform these functions in your dapps.
22 | 
23 | Also note, sequence.js is built on top of ethers.js, and is API-compatible. Finally, this example
24 | is compatible with Ethereum EIP1193 and standard JSON-RPC Web3Provider, so any dapp can plug in
25 | which is compatible with 1193 providers.
26 | 
27 | 
28 | 
29 | ## Screenshots
30 | 
31 | **Connect Wallet with Web3Modal with Sequence + WalletConnect options:**
32 | 
33 | ![Connect Wallet](./screenshots/screen-open.png)
34 | 
35 | 
36 | **Execute common wallet functions:**
37 | 
38 | ![Wallet functions](./screenshots/screen-txn.png)
39 | 
40 | 
41 | 
42 | ## LICENSE
43 | 
44 | Apache 2.0 or MIT (your choice)
45 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "demo-dapp-web3modal",
 3 |   "description": "Ethereum Demo Dapp + Web3Modal built on Sequence stack",
 4 |   "version": "0.1.0",
 5 |   "private": true,
 6 |   "homepage": "demo-dapp-web3modal",
 7 |   "scripts": {
 8 |     "dev": "BROWSER=none yarn start",
 9 |     "start": "PORT=4000 GENERATE_SOURCEMAP=false craco start",
10 |     "build": "BUILD_PATH='./dist' craco build",
11 |     "eject": "react-scripts eject",
12 |     "dist": "yarn build",
13 |     "link-sequence": "yarn link 0xsequence @0xsequence/abi @0xsequence/api @0xsequence/auth @0xsequence/config @0xsequence/guard @0xsequence/multicall @0xsequence/network @0xsequence/provider @0xsequence/relayer @0xsequence/transactions @0xsequence/utils @0xsequence/wallet",
14 |     "unlink-sequence": "yarn unlink 0xsequence @0xsequence/abi @0xsequence/api @0xsequence/auth @0xsequence/config @0xsequence/guard @0xsequence/multicall @0xsequence/network @0xsequence/provider @0xsequence/relayer @0xsequence/transactions @0xsequence/utils @0xsequence/wallet"
15 |   },
16 |   "dependencies": {
17 |     "0xsequence": "^0.43.1",
18 |     "@0xsequence/design-system": "^0.1.107",
19 |     "@testing-library/jest-dom": "^5.16.2",
20 |     "@testing-library/react": "^12.1.2",
21 |     "@testing-library/user-event": "^13.5.0",
22 |     "@types/jest": "^27.4.0",
23 |     "@types/node": "^16.11.22",
24 |     "@types/react": "^18.0.0",
25 |     "@types/react-dom": "^18.0.0",
26 |     "@vanilla-extract/css": "^1.9.3",
27 |     "@walletconnect/web3-provider": "^1.8.0",
28 |     "@web3modal/ethereum": "^2.5.0",
29 |     "@web3modal/react": "^2.5.0",
30 |     "ethers": "^5.7.2",
31 |     "framer-motion": "^9.0.1",
32 |     "node-polyfill-webpack-plugin": "^1.1.4",
33 |     "react": "^18.0.0",
34 |     "react-dom": "^18.0.0",
35 |     "react-scripts": "5.0.0",
36 |     "typescript": "^4.5.5",
37 |     "viem": "^1.1.7",
38 |     "wagmi": "^1.3.0",
39 |     "web-vitals": "^2.1.4"
40 |   },
41 |   "eslintConfig": {
42 |     "extends": [
43 |       "react-app",
44 |       "react-app/jest"
45 |     ]
46 |   },
47 |   "browserslist": {
48 |     "production": [
49 |       ">0.2%",
50 |       "not dead",
51 |       "not op_mini all"
52 |     ],
53 |     "development": [
54 |       "last 1 chrome version",
55 |       "last 1 firefox version",
56 |       "last 1 safari version"
57 |     ]
58 |   },
59 |   "devDependencies": {
60 |     "@craco/craco": "^7.0.0",
61 |     "@vanilla-extract/webpack-plugin": "^2.2.0"
62 |   }
63 | }
64 | 


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1" />
 7 |     <meta name="theme-color" content="#000000" />
 8 |     <meta name="description" content="Web site created using create-react-app" />
 9 |     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
10 |     <!--
11 |       manifest.json provides metadata used when your web app is installed on a
12 |       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
13 |     -->
14 |     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
15 |     <!--
16 |       Notice the use of %PUBLIC_URL% in the tags above.
17 |       It will be replaced with the URL of the `public` folder during the build.
18 |       Only files inside the `public` folder can be referenced from the HTML.
19 | 
20 |       Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
21 |       work correctly both with client-side routing and a non-root public URL.
22 |       Learn how to configure a non-root public URL by running `npm run build`.
23 |     -->
24 |     <title>Sequence | Demo Dapp + Web3Modal</title>
25 |   </head>
26 |   <body>
27 |     <noscript>You need to enable JavaScript to run this app.</noscript>
28 |     <a href="https://github.com/0xsequence/demo-dapp-web3modal" target="_blank" rel="noopener noreferrer" class="github-corner" aria-label="View source on GitHub"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:#fff; color:#151513; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>
29 |     <div id="root"></div>
30 |     <!--
31 |       This HTML file is a template.
32 |       If you open it directly in the browser, you will see an empty page.
33 | 
34 |       You can add webfonts, meta tags, or analytics to this file.
35 |       The build step will place the bundled scripts into the <body> tag.
36 | 
37 |       To begin the development, run `npm start` or `yarn start`.
38 |       To create a production bundle, use `npm run build` or `yarn build`.
39 |     -->
40 |   </body>
41 | </html>
42 | 


--------------------------------------------------------------------------------
/src/images/logo.svg:
--------------------------------------------------------------------------------
 1 | <svg width="1711" height="318" viewBox="0 0 1711 318" fill="none" xmlns="http://www.w3.org/2000/svg">
 2 | <path d="M562.208 259.467C600.793 259.467 627.989 237.454 627.989 203.755C628.261 174.682 610.786 157.826 581.637 147.231L561.651 139.893C541.394 132.556 531.674 126.307 531.674 112.177C531.674 98.0457 546.106 89.8965 562.765 89.8965C578.31 89.8965 590.244 96.1446 600.237 107.83L622.72 86.3607C608.288 69.239 587.474 60 563.049 60C526.405 60 498.938 80.6575 498.938 114.356C498.938 140.717 514.199 157.56 545.562 168.712L567.217 176.317C586.089 183.11 595.253 191.804 595.253 205.668C595.253 220.065 581.934 229.583 563.333 229.583C544.177 229.583 527.803 220.344 517.538 204.857L492 224.691C503.637 245.603 530.561 259.467 562.208 259.467ZM716.376 258.922C745.526 258.922 767.168 246.959 779.659 227.403L756.347 211.093C748.852 223.056 736.362 231.75 716.661 231.75C693.349 231.75 675.305 217.353 673.92 194.794H782.998C783.27 190.447 783.27 188.001 783.27 185.011C783.27 141.262 753.02 117.613 716.376 117.613C674.192 117.613 643.93 148.321 643.93 188.268C643.93 229.837 674.18 258.922 716.376 258.922ZM675.293 173.047C679.733 152.935 697.22 142.884 715.263 142.884C733.022 142.884 749.124 153.479 752.451 173.047H675.293ZM941.878 313V120.326H911.344V138.537C903.577 127.664 886.919 117.613 866.933 117.613C828.904 117.613 800.04 149.411 800.04 188.268C800.04 227.125 828.904 258.922 866.933 258.922C886.919 258.922 903.577 248.872 911.344 237.998V313H941.878ZM872.486 231.738C848.061 231.738 831.131 212.715 831.131 188.256C831.131 163.796 848.061 144.773 872.486 144.773C896.911 144.773 913.842 163.796 913.842 188.256C913.842 212.715 896.911 231.738 872.486 231.738ZM1020.88 258.922C1038.64 258.922 1053.35 251.584 1061.41 237.72V256.198H1091.94V120.326H1061.41V187.178C1061.41 216.53 1047.53 231.75 1027.54 231.75C1009.79 231.75 999.793 218.431 999.793 196.696V120.326H969.259V201.587C969.259 236.364 988.959 258.922 1020.88 258.922ZM1187.43 258.922C1216.58 258.922 1238.22 246.959 1250.71 227.403L1227.4 211.093C1219.9 223.056 1207.41 231.75 1187.71 231.75C1164.4 231.75 1146.36 217.353 1144.97 194.794H1254.05C1254.32 190.447 1254.32 188.001 1254.32 185.011C1254.32 141.262 1224.07 117.613 1187.43 117.613C1145.24 117.613 1114.98 148.321 1114.98 188.268C1114.98 229.837 1145.23 258.922 1187.43 258.922ZM1146.34 173.047C1150.78 152.935 1168.27 142.884 1186.31 142.884C1204.07 142.884 1220.17 153.479 1223.5 173.047H1146.34ZM1277.37 256.198H1307.91V189.346C1307.91 159.994 1323.45 144.773 1343.71 144.773C1361.47 144.773 1372.57 157.548 1372.57 179.283V256.186H1403.11V174.391C1403.11 139.881 1382.29 117.589 1350.09 117.589C1332.05 117.589 1316.5 124.927 1307.91 138.792V120.326H1277.37V256.198ZM1497.12 258.922C1525.99 258.922 1549.86 244.247 1561.79 221.422L1535.14 207.291C1528.47 221.155 1514.88 231.205 1497.11 231.205C1472.41 231.205 1454.93 212.449 1454.93 188.268C1454.93 164.087 1472.41 145.33 1497.11 145.33C1514.87 145.33 1528.47 155.381 1535.14 169.245L1561.79 155.114C1549.86 132.289 1525.99 117.613 1497.12 117.613C1455.5 117.613 1423.85 148.055 1423.85 188.268C1423.85 228.481 1455.5 258.922 1497.12 258.922ZM1644.11 258.922C1673.26 258.922 1694.9 246.959 1707.39 227.403L1684.08 211.093C1676.58 223.056 1664.09 231.75 1644.39 231.75C1621.07 231.75 1603.04 217.353 1601.64 194.794H1710.73C1711 190.447 1711 188.001 1711 185.011C1711 141.262 1680.75 117.613 1644.11 117.613C1601.91 117.613 1571.66 148.321 1571.66 188.268C1571.66 229.837 1601.91 258.922 1644.11 258.922ZM1603.02 173.047C1607.46 152.935 1624.95 142.884 1642.99 142.884C1660.75 142.884 1676.85 153.479 1680.18 173.047H1603.02Z" fill="white"/>
 3 | <g clip-path="url(#clip0_24_285)">
 4 | <path d="M0 67.505L0 250.165C0 287.447 30.1402 317.67 67.32 317.67H328.68C365.86 317.67 396 287.447 396 250.165V67.505C396 30.2231 365.86 9.15527e-05 328.68 9.15527e-05H67.32C30.1402 9.15527e-05 0 30.2231 0 67.505Z" fill="#111111"/>
 5 | <path d="M0 67.505L0 250.165C0 287.447 30.1402 317.67 67.32 317.67H328.68C365.86 317.67 396 287.447 396 250.165V67.505C396 30.2231 365.86 9.15527e-05 328.68 9.15527e-05H67.32C30.1402 9.15527e-05 0 30.2231 0 67.505Z" fill="url(#paint0_linear_24_285)"/>
 6 | <path d="M98.9999 79.4176C98.9999 68.4523 90.1351 59.5632 79.1999 59.5632C68.2647 59.5632 59.3999 68.4523 59.3999 79.4176C59.3999 90.3829 68.2647 99.272 79.1999 99.272C90.1351 99.272 98.9999 90.3829 98.9999 79.4176Z" fill="url(#paint1_linear_24_285)"/>
 7 | <path d="M98.9999 79.4176C98.9999 68.4523 90.1351 59.5632 79.1999 59.5632C68.2647 59.5632 59.3999 68.4523 59.3999 79.4176C59.3999 90.3829 68.2647 99.272 79.1999 99.272C90.1351 99.272 98.9999 90.3829 98.9999 79.4176Z" fill="url(#paint2_linear_24_285)"/>
 8 | <path d="M98.9999 79.4176C98.9999 68.4523 90.1351 59.5632 79.1999 59.5632C68.2647 59.5632 59.3999 68.4523 59.3999 79.4176C59.3999 90.3829 68.2647 99.272 79.1999 99.272C90.1351 99.272 98.9999 90.3829 98.9999 79.4176Z" fill="url(#paint3_linear_24_285)"/>
 9 | <path d="M98.9999 238.126C98.9999 227.161 90.1351 218.272 79.1999 218.272C68.2647 218.272 59.3999 227.161 59.3999 238.126C59.3999 249.092 68.2647 257.981 79.1999 257.981C90.1351 257.981 98.9999 249.092 98.9999 238.126Z" fill="url(#paint4_linear_24_285)"/>
10 | <path d="M336.6 158.835C336.6 147.87 327.735 138.981 316.8 138.981C305.865 138.981 297 147.87 297 158.835C297 169.8 305.865 178.69 316.8 178.69C327.735 178.69 336.6 169.8 336.6 158.835Z" fill="url(#paint5_linear_24_285)"/>
11 | <path d="M336.6 158.835C336.6 147.87 327.735 138.981 316.8 138.981C305.865 138.981 297 147.87 297 158.835C297 169.8 305.865 178.69 316.8 178.69C327.735 178.69 336.6 169.8 336.6 158.835Z" fill="url(#paint6_linear_24_285)"/>
12 | <path d="M316.8 59.5632H158.4C147.465 59.5632 138.6 68.4523 138.6 79.4176C138.6 90.3829 147.465 99.272 158.4 99.272H316.8C327.735 99.272 336.6 90.3829 336.6 79.4176C336.6 68.4523 327.735 59.5632 316.8 59.5632Z" fill="url(#paint7_linear_24_285)"/>
13 | <path d="M316.8 218.272H158.4C147.465 218.272 138.6 227.161 138.6 238.126C138.6 249.092 147.465 257.981 158.4 257.981H316.8C327.735 257.981 336.6 249.092 336.6 238.126C336.6 227.161 327.735 218.272 316.8 218.272Z" fill="url(#paint8_linear_24_285)"/>
14 | <path d="M237.6 138.981H79.2C68.2648 138.981 59.4 147.87 59.4 158.835C59.4 169.8 68.2648 178.69 79.2 178.69H237.6C248.535 178.69 257.4 169.8 257.4 158.835C257.4 147.87 248.535 138.981 237.6 138.981Z" fill="url(#paint9_linear_24_285)"/>
15 | </g>
16 | <defs>
17 | <linearGradient id="paint0_linear_24_285" x1="198" y1="0.000132138" x2="198" y2="318" gradientUnits="userSpaceOnUse">
18 | <stop stop-color="#1D273D"/>
19 | <stop offset="1" stop-color="#0D0F13"/>
20 | </linearGradient>
21 | <linearGradient id="paint1_linear_24_285" x1="65.5" y1="99.0001" x2="92.5" y2="63.0001" gradientUnits="userSpaceOnUse">
22 | <stop stop-color="#4462FE"/>
23 | <stop offset="1" stop-color="#7D69FA"/>
24 | </linearGradient>
25 | <linearGradient id="paint2_linear_24_285" x1="62.8799" y1="99.2913" x2="96.1377" y2="97.5912" gradientUnits="userSpaceOnUse">
26 | <stop stop-color="#3757FD"/>
27 | <stop offset="1" stop-color="#6980FA"/>
28 | </linearGradient>
29 | <linearGradient id="paint3_linear_24_285" x1="62.8799" y1="99.2913" x2="96.1377" y2="97.5912" gradientUnits="userSpaceOnUse">
30 | <stop stop-color="#2447FF"/>
31 | <stop offset="1" stop-color="#6980FA"/>
32 | </linearGradient>
33 | <linearGradient id="paint4_linear_24_285" x1="65" y1="251.5" x2="91.5" y2="223.5" gradientUnits="userSpaceOnUse">
34 | <stop stop-color="#BC3EE6"/>
35 | <stop offset="1" stop-color="#D972F1"/>
36 | </linearGradient>
37 | <linearGradient id="paint5_linear_24_285" x1="305" y1="172" x2="329.5" y2="146" gradientUnits="userSpaceOnUse">
38 | <stop stop-color="#29BDFF"/>
39 | <stop offset="1" stop-color="#96E7FB"/>
40 | </linearGradient>
41 | <linearGradient id="paint6_linear_24_285" x1="300.18" y1="178.418" x2="334.567" y2="176.772" gradientUnits="userSpaceOnUse">
42 | <stop stop-color="#23BBFF"/>
43 | <stop offset="1" stop-color="#85E7FF"/>
44 | </linearGradient>
45 | <linearGradient id="paint7_linear_24_285" x1="154.5" y1="99.0001" x2="317.5" y2="60.0001" gradientUnits="userSpaceOnUse">
46 | <stop stop-color="#23BBFF"/>
47 | <stop offset="1" stop-color="#85E7FF"/>
48 | </linearGradient>
49 | <linearGradient id="paint8_linear_24_285" x1="156" y1="258" x2="312.5" y2="218" gradientUnits="userSpaceOnUse">
50 | <stop stop-color="#2447FF"/>
51 | <stop offset="1" stop-color="#6980FA"/>
52 | </linearGradient>
53 | <linearGradient id="paint9_linear_24_285" x1="86.0001" y1="179" x2="235.5" y2="139" gradientUnits="userSpaceOnUse">
54 | <stop stop-color="#6634FF"/>
55 | <stop offset="1" stop-color="#9C6DFF"/>
56 | </linearGradient>
57 | <clipPath id="clip0_24_285">
58 | <rect width="396" height="317.67" fill="white"/>
59 | </clipPath>
60 | </defs>
61 | </svg>
62 | 


--------------------------------------------------------------------------------
/src/Demo.tsx:
--------------------------------------------------------------------------------
  1 | import { useWeb3Modal } from '@web3modal/react'
  2 | import { Box, Image, Text } from '@0xsequence/design-system'
  3 | import React, { useState, useEffect } from 'react'
  4 | 
  5 | import logoUrl from './images/logo.svg'
  6 | 
  7 | import { ethers } from 'ethers'
  8 | import { Address, formatEther, parseEther } from 'viem'
  9 | import { useWalletClient, usePublicClient, useAccount, useConnect, useDisconnect } from 'wagmi'
 10 | 
 11 | import { ERC_20_ABI } from './constants/abi'
 12 | 
 13 | import { configureLogger } from '@0xsequence/utils'
 14 | import { Group } from './components/Group'
 15 | import { Button } from './components/Button'
 16 | import { Console } from './components/Console'
 17 | 
 18 | configureLogger({ logLevel: 'DEBUG' })
 19 | 
 20 | const App = () => {
 21 |   const { open } = useWeb3Modal()
 22 |   const { isConnected } = useAccount()
 23 |   const publicClient = usePublicClient()
 24 |   const { data: walletClient } = useWalletClient()
 25 |   const { isLoading } = useConnect()
 26 |   const { disconnect } =  useDisconnect()
 27 | 
 28 |   const [consoleMsg, setConsoleMsg] = useState<null|string>(null)
 29 |   const [consoleLoading, setConsoleLoading] = useState<boolean>(false)
 30 | 
 31 |   const appendConsoleLine = (message: string) => {
 32 |     return (setConsoleMsg((prevState => {
 33 |       return `${prevState}\n\n${message}`
 34 |     })))
 35 |   }
 36 |   
 37 |   const resetConsole = () => {
 38 |     setConsoleMsg(null)
 39 |     setConsoleLoading(true)
 40 |   }
 41 | 
 42 |   const addNewConsoleLine = (message: string) => {
 43 |     setConsoleMsg((() => {
 44 |       return (message)
 45 |     }))
 46 |   }
 47 | 
 48 |   const consoleWelcomeMessage = () => {
 49 |     setConsoleLoading(false)
 50 |     setConsoleMsg('Status: Wallet not connected. Please connect wallet to use Methods')
 51 |   }
 52 | 
 53 |   const consoleErrorMesssage = () => {
 54 |     setConsoleLoading(false)
 55 |     setConsoleMsg('An error occurred')
 56 |   }
 57 | 
 58 |   useEffect(() => {
 59 |     if (isConnected) {
 60 |       setConsoleMsg('Wallet connected!')
 61 |     } else {
 62 |       consoleWelcomeMessage()
 63 |     }
 64 |   }, [isConnected])
 65 | 
 66 |   const getChainID = async () => {
 67 |     try {
 68 |       if (!walletClient) {
 69 |         throw  new Error('Wallet not connected')
 70 |       }
 71 | 
 72 |       resetConsole()
 73 |       const chainId = await walletClient.getChainId()
 74 |       console.log('walletClient.getChainId()', chainId)
 75 |       addNewConsoleLine(`walletClient.getChainId(): ${chainId}`)
 76 |       setConsoleLoading(false)
 77 |     } catch(e) {
 78 |       console.error(e)
 79 |       consoleErrorMesssage()
 80 |     }
 81 |   }
 82 | 
 83 |   const getBalance = async () => {
 84 |     try {
 85 |       if (!walletClient) {
 86 |         throw new Error('Wallet not connected')
 87 |       }
 88 |       resetConsole()
 89 |       const [account] = await walletClient.getAddresses()
 90 |       const balance = await publicClient.getBalance({
 91 |         address: account,
 92 |       })
 93 |       const formattedBalance = formatEther(balance)
 94 |       console.log('balance', formattedBalance)
 95 |       addNewConsoleLine(`balance: ${formattedBalance}`)
 96 |   
 97 |       setConsoleLoading(false) 
 98 |     } catch(e) {
 99 |       console.error(e)
100 |       consoleErrorMesssage()
101 |     }
102 |   }
103 | 
104 | 
105 |   const getNetwork = async () => {
106 |     try {
107 |       resetConsole()
108 |       const network = publicClient.chain
109 |       console.log('network:', network)
110 |   
111 |       addNewConsoleLine(`network: ${JSON.stringify(network)}`)
112 |       setConsoleLoading(false) 
113 |     } catch(e) {
114 |       console.error(e)
115 |       consoleErrorMesssage()
116 |     }
117 |   }
118 | 
119 |   const signMessage = async () => {
120 |     try {
121 |       if (!walletClient) {
122 |         throw new Error('Wallet not connected')
123 |       }
124 |       resetConsole()  
125 |       const message = `Two roads diverged in a yellow wood,
126 |   Robert Frost poet
127 |   
128 |   And sorry I could not travel both
129 |   And be one traveler, long I stood
130 |   And looked down one as far as I could
131 |   To where it bent in the undergrowth;
132 |   
133 |   Then took the other, as just as fair,
134 |   And having perhaps the better claim,
135 |   Because it was grassy and wanted wear;
136 |   Though as for that the passing there
137 |   Had worn them really about the same,
138 |   
139 |   And both that morning equally lay
140 |   In leaves no step had trodden black.
141 |   Oh, I kept the first for another day!
142 |   Yet knowing how way leads on to way,
143 |   I doubted if I should ever come back.
144 |   
145 |   I shall be telling this with a sigh
146 |   Somewhere ages and ages hence:
147 |   Two roads diverged in a wood, and I—
148 |   I took the one less traveled by,
149 |   And that has made all the difference.`
150 |       
151 |   
152 |       const [account] = await walletClient.getAddresses()
153 |   
154 |       // sign
155 |       const sig = await walletClient.signMessage({
156 |         message,
157 |         account
158 |       })
159 |       console.log('signature:', sig)
160 |   
161 |       addNewConsoleLine(`signature: ${sig}`)
162 | 
163 |       const isValid = await publicClient.verifyMessage({
164 |         address: account,
165 |         message,
166 |         signature: sig
167 |       })
168 | 
169 |       console.log('isValid?', isValid)
170 |   
171 |       appendConsoleLine(`isValid? ${isValid}`)
172 |       setConsoleLoading(false) 
173 |     } catch(e) {
174 |       console.error(e)
175 |       consoleErrorMesssage()
176 |     }
177 |   }
178 | 
179 |   const sendETH = async () => {
180 |     try {
181 |       if (!walletClient) {
182 |         throw new Error('Wallet not connected')
183 |       }
184 |       resetConsole()
185 |   
186 |       console.log(`Transfer txn on ${walletClient.getChainId()}`)
187 |       addNewConsoleLine(`Transfer txn on ${walletClient.getChainId()}`)
188 |   
189 |       const toAddress = ethers.Wallet.createRandom().address
190 |   
191 |       const balance1 = await publicClient.getBalance({
192 |         address: toAddress as Address
193 |       })
194 |       console.log(`balance of ${toAddress}, before:`, balance1)
195 |       appendConsoleLine(`balance of ${toAddress}, before: ${balance1}`)
196 |       
197 |       const [account] = await walletClient.getAddresses()
198 | 
199 |       /* @ts-ignore-next-line */
200 |       await walletClient.sendTransaction({
201 |         to: toAddress as Address,
202 |         value: parseEther('1.00'),
203 |         account,
204 |       })
205 | 
206 |       const balance2 = await publicClient.getBalance({
207 |         address: toAddress as Address
208 |       })
209 |       console.log(`balance of ${toAddress}, after:`, balance2)
210 |       appendConsoleLine(`balance of ${toAddress}, after: ${balance2}`)
211 |       setConsoleLoading(false) 
212 |     } catch(e) {
213 |       console.error(e)
214 |       consoleErrorMesssage()
215 |     }
216 |   }
217 | 
218 |   const sendDAI = async () => {
219 |     try {
220 |       if (!walletClient) {
221 |         throw new Error('Wallet not connected')
222 |       }
223 |       resetConsole()
224 |       const toAddress = ethers.Wallet.createRandom().address
225 |   
226 |       const amount = ethers.utils.parseUnits('5', 18)
227 |   
228 |       const daiContractAddress = '0x8f3Cf7ad23Cd3CaDbD9735AFf958023239c6A063' // (DAI address on Polygon)
229 | 
230 |       const [account] = await walletClient.getAddresses()
231 | 
232 |       /* @ts-ignore-next-line */
233 |       const hash = await walletClient.sendTransaction({
234 |         account,
235 |         to: daiContractAddress,
236 |         value: BigInt(0),
237 |         data: new ethers.utils.Interface(ERC_20_ABI).encodeFunctionData('transfer', [toAddress, amount.toHexString()]) as `0x${string}`
238 |       })
239 |   
240 |       console.log('transaction response', hash)
241 |       addNewConsoleLine(`TX response ${hash}`)
242 |       setConsoleLoading(false) 
243 |     } catch(e) {
244 |       console.error(e)
245 |       consoleErrorMesssage()
246 |     }
247 |   }
248 | 
249 |   const disableActions = !isConnected
250 | 
251 |   const getWalletActions = () => {
252 |     if (!isConnected) {
253 |       return null
254 |     }
255 |     return (
256 |       <>
257 |         <Box marginBottom="4">
258 |           <Text>Please open your browser dev inspector to view output of functions below</Text>
259 |         </Box>
260 |         <Group label="State">
261 |           <Button disabled={disableActions} onClick={() => getChainID()}>
262 |             ChainID
263 |           </Button>
264 |           <Button disabled={disableActions} onClick={() => getNetwork()}>
265 |             Network
266 |           </Button>
267 |           <Button disabled={disableActions} onClick={() => getBalance()}>
268 |             Get Balance
269 |           </Button>
270 |         </Group>
271 | 
272 |         <Group label="Signing">
273 |           <Button disabled={disableActions} onClick={() => signMessage()}>
274 |             Sign Message
275 |           </Button>
276 |         </Group>
277 | 
278 |         <Group label="Transactions">
279 |           <Button disabled={disableActions} onClick={() => sendETH()}>
280 |             Send ETH
281 |           </Button>
282 |           <Button disabled={disableActions} onClick={() => sendDAI()}>
283 |             Send DAI Tokens
284 |           </Button>
285 |         </Group>
286 |         </>
287 |     )
288 |   }
289 | 
290 |   const getConnectionButtons = () => {
291 |     if (!isConnected) {
292 |       return (
293 |         <Box gap="4" flexDirection="column" marginY="4">
294 |           <Button
295 |             disabled={isLoading}
296 |             onClick={() => open()}
297 |           >
298 |             Connect
299 |           </Button>
300 |         </Box>
301 |       )
302 |     }
303 | 
304 |     return (
305 |       <Group>
306 |         <Button onClick={() => disconnect()}>
307 |           Disconnect Wallet
308 |         </Button>
309 |       </Group>
310 |     )
311 |   }
312 | 
313 |   return (
314 |     <Box marginY="0" marginX="auto" paddingX="6" style={{ maxWidth: '720px', marginTop: '80px', marginBottom: '80px' }}>
315 |       <Box marginBottom="4">
316 |         <Image height="10" alt="logo" src={logoUrl} />
317 |       </Box>
318 |       <Box>
319 |         <Text color="text100" variant="large">Demo Dapp + Web3modal</Text>
320 |       </Box>
321 |       {getConnectionButtons()}
322 |       {getWalletActions()}
323 |       <Console message={consoleMsg} loading={consoleLoading} />
324 |     </Box>
325 |   )
326 | }
327 | 
328 | export default React.memo(App)
329 | 
330 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
  1 |                                  Apache License
  2 |                            Version 2.0, January 2004
  3 |                         http://www.apache.org/licenses/
  4 | 
  5 |    TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
  6 | 
  7 |    1. Definitions.
  8 | 
  9 |       "License" shall mean the terms and conditions for use, reproduction,
 10 |       and distribution as defined by Sections 1 through 9 of this document.
 11 | 
 12 |       "Licensor" shall mean the copyright owner or entity authorized by
 13 |       the copyright owner that is granting the License.
 14 | 
 15 |       "Legal Entity" shall mean the union of the acting entity and all
 16 |       other entities that control, are controlled by, or are under common
 17 |       control with that entity. For the purposes of this definition,
 18 |       "control" means (i) the power, direct or indirect, to cause the
 19 |       direction or management of such entity, whether by contract or
 20 |       otherwise, or (ii) ownership of fifty percent (50%) or more of the
 21 |       outstanding shares, or (iii) beneficial ownership of such entity.
 22 | 
 23 |       "You" (or "Your") shall mean an individual or Legal Entity
 24 |       exercising permissions granted by this License.
 25 | 
 26 |       "Source" form shall mean the preferred form for making modifications,
 27 |       including but not limited to software source code, documentation
 28 |       source, and configuration files.
 29 | 
 30 |       "Object" form shall mean any form resulting from mechanical
 31 |       transformation or translation of a Source form, including but
 32 |       not limited to compiled object code, generated documentation,
 33 |       and conversions to other media types.
 34 | 
 35 |       "Work" shall mean the work of authorship, whether in Source or
 36 |       Object form, made available under the License, as indicated by a
 37 |       copyright notice that is included in or attached to the work
 38 |       (an example is provided in the Appendix below).
 39 | 
 40 |       "Derivative Works" shall mean any work, whether in Source or Object
 41 |       form, that is based on (or derived from) the Work and for which the
 42 |       editorial revisions, annotations, elaborations, or other modifications
 43 |       represent, as a whole, an original work of authorship. For the purposes
 44 |       of this License, Derivative Works shall not include works that remain
 45 |       separable from, or merely link (or bind by name) to the interfaces of,
 46 |       the Work and Derivative Works thereof.
 47 | 
 48 |       "Contribution" shall mean any work of authorship, including
 49 |       the original version of the Work and any modifications or additions
 50 |       to that Work or Derivative Works thereof, that is intentionally
 51 |       submitted to Licensor for inclusion in the Work by the copyright owner
 52 |       or by an individual or Legal Entity authorized to submit on behalf of
 53 |       the copyright owner. For the purposes of this definition, "submitted"
 54 |       means any form of electronic, verbal, or written communication sent
 55 |       to the Licensor or its representatives, including but not limited to
 56 |       communication on electronic mailing lists, source code control systems,
 57 |       and issue tracking systems that are managed by, or on behalf of, the
 58 |       Licensor for the purpose of discussing and improving the Work, but
 59 |       excluding communication that is conspicuously marked or otherwise
 60 |       designated in writing by the copyright owner as "Not a Contribution."
 61 | 
 62 |       "Contributor" shall mean Licensor and any individual or Legal Entity
 63 |       on behalf of whom a Contribution has been received by Licensor and
 64 |       subsequently incorporated within the Work.
 65 | 
 66 |    2. Grant of Copyright License. Subject to the terms and conditions of
 67 |       this License, each Contributor hereby grants to You a perpetual,
 68 |       worldwide, non-exclusive, no-charge, royalty-free, irrevocable
 69 |       copyright license to reproduce, prepare Derivative Works of,
 70 |       publicly display, publicly perform, sublicense, and distribute the
 71 |       Work and such Derivative Works in Source or Object form.
 72 | 
 73 |    3. Grant of Patent License. Subject to the terms and conditions of
 74 |       this License, each Contributor hereby grants to You a perpetual,
 75 |       worldwide, non-exclusive, no-charge, royalty-free, irrevocable
 76 |       (except as stated in this section) patent license to make, have made,
 77 |       use, offer to sell, sell, import, and otherwise transfer the Work,
 78 |       where such license applies only to those patent claims licensable
 79 |       by such Contributor that are necessarily infringed by their
 80 |       Contribution(s) alone or by combination of their Contribution(s)
 81 |       with the Work to which such Contribution(s) was submitted. If You
 82 |       institute patent litigation against any entity (including a
 83 |       cross-claim or counterclaim in a lawsuit) alleging that the Work
 84 |       or a Contribution incorporated within the Work constitutes direct
 85 |       or contributory patent infringement, then any patent licenses
 86 |       granted to You under this License for that Work shall terminate
 87 |       as of the date such litigation is filed.
 88 | 
 89 |    4. Redistribution. You may reproduce and distribute copies of the
 90 |       Work or Derivative Works thereof in any medium, with or without
 91 |       modifications, and in Source or Object form, provided that You
 92 |       meet the following conditions:
 93 | 
 94 |       (a) You must give any other recipients of the Work or
 95 |           Derivative Works a copy of this License; and
 96 | 
 97 |       (b) You must cause any modified files to carry prominent notices
 98 |           stating that You changed the files; and
 99 | 
100 |       (c) You must retain, in the Source form of any Derivative Works
101 |           that You distribute, all copyright, patent, trademark, and
102 |           attribution notices from the Source form of the Work,
103 |           excluding those notices that do not pertain to any part of
104 |           the Derivative Works; and
105 | 
106 |       (d) If the Work includes a "NOTICE" text file as part of its
107 |           distribution, then any Derivative Works that You distribute must
108 |           include a readable copy of the attribution notices contained
109 |           within such NOTICE file, excluding those notices that do not
110 |           pertain to any part of the Derivative Works, in at least one
111 |           of the following places: within a NOTICE text file distributed
112 |           as part of the Derivative Works; within the Source form or
113 |           documentation, if provided along with the Derivative Works; or,
114 |           within a display generated by the Derivative Works, if and
115 |           wherever such third-party notices normally appear. The contents
116 |           of the NOTICE file are for informational purposes only and
117 |           do not modify the License. You may add Your own attribution
118 |           notices within Derivative Works that You distribute, alongside
119 |           or as an addendum to the NOTICE text from the Work, provided
120 |           that such additional attribution notices cannot be construed
121 |           as modifying the License.
122 | 
123 |       You may add Your own copyright statement to Your modifications and
124 |       may provide additional or different license terms and conditions
125 |       for use, reproduction, or distribution of Your modifications, or
126 |       for any such Derivative Works as a whole, provided Your use,
127 |       reproduction, and distribution of the Work otherwise complies with
128 |       the conditions stated in this License.
129 | 
130 |    5. Submission of Contributions. Unless You explicitly state otherwise,
131 |       any Contribution intentionally submitted for inclusion in the Work
132 |       by You to the Licensor shall be under the terms and conditions of
133 |       this License, without any additional terms or conditions.
134 |       Notwithstanding the above, nothing herein shall supersede or modify
135 |       the terms of any separate license agreement you may have executed
136 |       with Licensor regarding such Contributions.
137 | 
138 |    6. Trademarks. This License does not grant permission to use the trade
139 |       names, trademarks, service marks, or product names of the Licensor,
140 |       except as required for reasonable and customary use in describing the
141 |       origin of the Work and reproducing the content of the NOTICE file.
142 | 
143 |    7. Disclaimer of Warranty. Unless required by applicable law or
144 |       agreed to in writing, Licensor provides the Work (and each
145 |       Contributor provides its Contributions) on an "AS IS" BASIS,
146 |       WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
147 |       implied, including, without limitation, any warranties or conditions
148 |       of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
149 |       PARTICULAR PURPOSE. You are solely responsible for determining the
150 |       appropriateness of using or redistributing the Work and assume any
151 |       risks associated with Your exercise of permissions under this License.
152 | 
153 |    8. Limitation of Liability. In no event and under no legal theory,
154 |       whether in tort (including negligence), contract, or otherwise,
155 |       unless required by applicable law (such as deliberate and grossly
156 |       negligent acts) or agreed to in writing, shall any Contributor be
157 |       liable to You for damages, including any direct, indirect, special,
158 |       incidental, or consequential damages of any character arising as a
159 |       result of this License or out of the use or inability to use the
160 |       Work (including but not limited to damages for loss of goodwill,
161 |       work stoppage, computer failure or malfunction, or any and all
162 |       other commercial damages or losses), even if such Contributor
163 |       has been advised of the possibility of such damages.
164 | 
165 |    9. Accepting Warranty or Additional Liability. While redistributing
166 |       the Work or Derivative Works thereof, You may choose to offer,
167 |       and charge a fee for, acceptance of support, warranty, indemnity,
168 |       or other liability obligations and/or rights consistent with this
169 |       License. However, in accepting such obligations, You may act only
170 |       on Your own behalf and on Your sole responsibility, not on behalf
171 |       of any other Contributor, and only if You agree to indemnify,
172 |       defend, and hold each Contributor harmless for any liability
173 |       incurred by, or claims asserted against, such Contributor by reason
174 |       of your accepting any such warranty or additional liability.
175 | 
176 |    END OF TERMS AND CONDITIONS
177 | 
178 |    APPENDIX: How to apply the Apache License to your work.
179 | 
180 |       To apply the Apache License to your work, attach the following
181 |       boilerplate notice, with the fields enclosed by brackets "[]"
182 |       replaced with your own identifying information. (Don't include
183 |       the brackets!)  The text should be enclosed in the appropriate
184 |       comment syntax for the file format. We also recommend that a
185 |       file or class name and description of purpose be included on the
186 |       same "printed page" as the copyright notice for easier
187 |       identification within third-party archives.
188 | 
189 |    Copyright [yyyy] [name of copyright owner]
190 | 
191 |    Licensed under the Apache License, Version 2.0 (the "License");
192 |    you may not use this file except in compliance with the License.
193 |    You may obtain a copy of the License at
194 | 
195 |        http://www.apache.org/licenses/LICENSE-2.0
196 | 
197 |    Unless required by applicable law or agreed to in writing, software
198 |    distributed under the License is distributed on an "AS IS" BASIS,
199 |    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
200 |    See the License for the specific language governing permissions and
201 |    limitations under the License.
202 | 


--------------------------------------------------------------------------------