5 |
5 |
6 |
7 | 
8 |
9 |
10 | This is a boilerplate template for making your awesome dApp on IoTeX and ETH, BSC, and other possible chains ([request here](https://github.com/iotexproject/iotex-dapp-sample-v2/issues/new))
11 |
12 | Technology used in this template are
13 |
14 | - [Next](https://github.com/vercel/next.js)
15 | - [React](https://reactjs.org/)
16 | - [TRPC](https://trpc.io/)
17 | - [Typescript](https://www.typescriptlang.org/)
18 | - [Mobx](https://mobx.js.org/README.html)
19 | - [Matine](https://mantine.dev/core/theme-icon/)
20 | - [Cypress](https://www.cypress.io/)
21 |
22 | ## Intro
23 |
24 | A starter for React with Typescript with the fast Vite and the beautiful Matine, tested with the powerful Cypress.
25 |
26 | ## Cheat Sheet
27 |
28 | Here's a cheat sheet list to help you get started quickly
29 |
30 | ```ts
31 | import { rootStore, useStore } from '@/store/index';
32 |
33 | const { god } = useStore();
34 | // or const god = rootStore.god
35 |
36 | god.isConnect;
37 |
38 | god.currentChain;
39 | god.currentChain.chainId; // for current connected chain id
40 | god.currentChain.Coin; // eth/bnb/iotx
41 | god.currentChain.Coin.balance; // current balance
42 | // ... see ChainState
43 |
44 | god.currentNetwork;
45 | god.currentNetwork.account; // for current connected account address
46 | // ... see NetworkState
47 |
48 | god.setShowConnecter(); // to show/close the Wallet Selector
49 |
50 | god.currentNetwork.loadBalance(); // to load chain coin balance
51 |
52 | await rpc('query')({
53 | UniswapRouter: [
54 | { calls: [{ address: '0x95cB18889B968AbABb9104f30aF5b310bD007Fd8', chainId: 4689 }] },
55 | {
56 | swap: [
57 | {
58 | args: {
59 | sellToken: 'BUSD_b',
60 | buyToken: '0xb8744ae4032be5e5ef9fab94ee9c3bf38d5d2ae0',
61 | buyAmount,
62 | recipient: '0x2AcB8663B18d8c8180783C18b88D60b86de26dF2',
63 | offlinePrice: true
64 | }
65 | },
66 | {
67 | amount: true,
68 | data: true,
69 | router: true,
70 | path: {
71 | address: true,
72 | symbol: true,
73 | decimals: true,
74 | totalSupply: true
75 | }
76 | }
77 | ]
78 | }
79 | ]
80 | });
81 | ```
82 |
83 | ## Generate sdk
84 |
85 | ```
86 | $ npm i @smartgraph/cli -g
87 | $ pnpm dev
88 | $ smartgraph codegen -l http://localhost:3000/api/graphql -o ./src/lib
89 |
90 | ```
91 |
92 | ## Installation
93 |
94 | Clone the repo and run `pnpm install`
95 |
96 | ## Start
97 |
98 | After the successfull installation of the packages: `pnpm dev`
99 |
100 |
--------------------------------------------------------------------------------
/cypress.json:
--------------------------------------------------------------------------------
1 | {
2 | "video": false,
3 | "pluginsFile": false,
4 | "supportFile": false
5 | }
6 |
--------------------------------------------------------------------------------
/cypress/fixtures/example.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "Using fixtures to represent data",
3 | "email": "hello@cypress.io",
4 | "body": "Fixtures are a great way to mock data for responses to routes"
5 | }
--------------------------------------------------------------------------------
/cypress/integration/demo.spec.ts:
--------------------------------------------------------------------------------
1 | describe("Cypress", () => {
2 | it.only("is Cypress working?", () => {
3 | expect(true).to.equal(true);
4 | });
5 | });
6 |
7 | export {};
8 |
--------------------------------------------------------------------------------
/cypress/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "es5",
4 | "lib": ["es5", "dom"],
5 | "types": ["cypress", "node"]
6 | },
7 | "include": ["**/*.ts"]
8 | }
9 |
--------------------------------------------------------------------------------
/next-env.d.ts:
--------------------------------------------------------------------------------
1 | /// ⌘ + K}
111 | styles={{ rightSection: { pointerEvents: 'none' } }}
112 | mb="sm"
113 | onClick={() => openSpotlight()}
114 | />
115 | 116 |119 |117 | {JSON.stringify(store.swapQuery.value?.swap || {}, null, 2)} 118 |
{ 2 | address: string; 3 | abi: any; 4 | method: string; 5 | params?: P; 6 | options?: Partial<{ 7 | from: string; 8 | value: string; 9 | gasLimit: string; 10 | gasPrice: string; 11 | }>; 12 | handler?: any; 13 | read?: boolean; 14 | chainId?: number; 15 | } 16 | --------------------------------------------------------------------------------