Example-frontend use vue3 + vite

Orbiter-Finance · Apr 25, 2022 · 9edfa6f · 9edfa6f
1 parent 9f88264
commit 9edfa6f
Show file tree

Hide file tree

Showing 44 changed files with 3,999 additions and 572 deletions.
diff --git a/README.md b/README.md
@@ -6,7 +6,7 @@
 
 Orbiter-Sdk is a secure and fast Layer2 cross-platform transfer library
 
-### Usage
+## Usage
 
 ```bash
 # Use yarn
@@ -16,92 +16,106 @@ yarn add orbiter-sdk
 npm install orbiter-sdk --save
 ```
 
-### Demos
+## Types
 
-#### TransactionZksync
+### BridgeToken
 
-```TypeScript
-const chainId = 33
-await utils.ensureMetamaskNetwork(chainId, ethereum)
-
-const provider = new providers.Web3Provider(ethereum)
-const transactionZksync = new TransactionZksync(chainId, provider.getSigner())
-await transactionZksync.transfer({
-  amount: '9900011',
-  tokenAddress: '0xeb8f08a975ab53e34d8a0330e0d34de942c95926',
-  toAddress: '0xF2BE509057855b055f0515CCD0223BEf84D19ad4',
-})
-```
+| Field        |  type  | default |               desc               |
+| :----------- | :----: | :-----: | :------------------------------: |
+| chainId      | number |    -    |        Orbiter's chainId         |
+| name         | string |    -    |    Token name. ex: ETH, USDC     |
+| address      | string |    -    |      Token contract address      |
+| precision    | number |    -    |          Token decimals          |
+| makerAddress | string |    -    | Orbiter's maker ethereum address |
+| icon         | string |    -    |         Token icon(TODO)         |
+
+### BridgeChain
+
+| Field     |       type       | default |       desc        |
+| :-------- | :--------------: | :-----: | :---------------: |
+| id        |      number      |    -    | Orbiter's chainId |
+| name      |      string      |    -    |    Chain name     |
+| networkId | number \| string |    -    |  Chain nerworkId  |
+| icon      |      string      |    -    | Chain icon(TODO)  |
+
+### BridgeNetwork
+
+value: `'Mainnet' | 'Testnet'`
 
-#### TransactionImmutablex
+### Bridge
 
 ```TypeScript
-const chainId = 88
-await utils.ensureMetamaskNetwork(chainId, ethereum)
-
-const provider = new providers.Web3Provider(ethereum)
-
-const transactionImmutablex = new TransactionImmutablex(chainId, provider.getSigner())
-const tr = await transactionImmutablex.transfer({
-  amount: ethAmount,
-  tokenAddress: '0x0000000000000000000000000000000000000000',
-  toAddress: '0xF2BE509057855b055f0515CCD0223BEf84D19ad4',
-  decimals: 18,
-})
+// constructor
+const bridge = new Bridge('Mainnet' or 'Testnet')
 ```
 
-#### TransactionEvm
+#### bridge.getNetwork
 
-```TypeScript
-const chainId = 5
-await utils.ensureMetamaskNetwork(chainId, ethereum)
+Params: -
 
-const provider = new providers.Web3Provider(ethereum)
+Return: `'Mainnet' | 'Testnet'`
 
-const transactionEvm = new TransactionEvm(chainId, provider.getSigner())
-const tr = await transactionEvm.transfer({
-  amount: ethAmount,
-  tokenAddress: '0x0000000000000000000000000000000000000000',
-  toAddress: '0xF2BE509057855b055f0515CCD0223BEf84D19ad4',
-})
-```
+#### bridge.supports
 
-#### TransactionLoopring
+> Usage example: around line 118 in [the file](./example/frontend/src/components/HomeView.vue)
 
-```TypeScript
-const chainId = 99
-const web3 = new Web3(ethereum)
-
-const transactionEvm = new TransactionLoopring(chainId, web3)
-const tr = await transactionEvm.transfer({
-  amount: ethAmount,
-  fromAddress: await web3.eth.getCoinbase(),
-  tokenAddress: '0x0000000000000000000000000000000000000000',
-  toAddress: '0xF2BE509057855b055f0515CCD0223BEf84D19ad4',
-})
-```
+Params:
+| Field | type | default | desc |
+| :-------- | :---------: | :-------: | :-----------------: |
+| fromChain | BridgeChain | undefined | Selected from chain |
+| toChain | BridgeChain | undefined | Selected to chain |
 
-#### TransactionDydx
+Return:
+| Field | type | default | desc |
+| :-------- | :---------: | :-------: | :-----------------: |
+| tokens | BridgeToken[] | - | Support tokens |
+| fromChains | BridgeChain[] | - | Support fromChains |
+| toChains | BridgeChain[] | - | Support toChains |
 
-```TypeScript
-const chainId = 511
-await utils.ensureMetamaskNetwork(chainId, ethereum)
-
-const web3 = new Web3(ethereum)
-
-const transactionEvm = new TransactionDydx(chainId, web3)
-const tr = await transactionEvm.transfer({
-  amount: usdcAmount,
-  fromAddress: await web3.eth.getCoinbase(),
-  tokenAddress: '0xeb8f08a975ab53e34d8a0330e0d34de942c95926',
-  toAddress: '0x694434EC84b7A8Ad8eFc57327ddD0A428e23f8D5',
-  receiverPublicKey: '04e69175389829db733f41ae75e7ba59ea2b2849690c734fcd291c94d6ec6017',
-  receiverPositionId: '60620',
-})
-```
+#### bridge.getAmounts
 
-#### Util
+> Usage example: around line 151 in [the file](./example/frontend/src/components/HomeView.vue)
 
-```TypeScript
+Params:
+| Field | type | default | desc |
+| :-------- | :---------: | :-------: | :-----------------: |
+| token | BridgeToken | - | Selected token |
+| fromChain | BridgeChain | - | Selected from chain |
+| toChain | BridgeChain | - | Selected from chain |
+| amountHm | string \| number | undefined | Human readable amount. ex: 0.01 |
+
+Return:
+| Field | type | default | desc |
+| :-------- | :---------: | :-------: | :-----------------: |
+| payText | string | - | Orbiter identification code |
+| payAmount | ethers.BigNumber | - | Bignumbber pay amount |
+| payAmountHm | string | - | Human readable pay amount |
+| receiveAmountHm | string | - | Human readable receive amount |
+
+#### bridge.transfer
+
+> Usage example: around line 167 in [the file](./example/frontend/src/components/HomeView.vue)
+
+Params:
+| Field | type | default | desc |
+| :-------- | :---------: | :-------: | :-----------------: |
+| signer | ethers.Signer | - | Ethereum signer. ex: new providers.Web3Provider(window.ethereum).getSigner() |
+| token | BridgeToken | - | Selected token |
+| fromChain | BridgeChain | - | Selected from chain |
+| toChain | BridgeChain | - | Selected from chain |
+| amountHm | string \| number | undefined | Human readable amount. ex: 0.01 |
+
+Return: The current data structure returned by different from chains, no unified data structure yet
+
+## Examples
+
+### Frontend
+
+Front-end example project based on vue3+vite. [dir](./example/frontend/)
+
+## Features
 
-```
+- [x] Bridge support
+- [ ] Bridge.transfer return unified data structure
+- [ ] Bridge.getSave support. (Get save times an fee using orbiter)
+- [ ] Bridge.transferListen support. (Listen transfer into user address)
diff --git a/example/frontend/.browserslistrc b/example/frontend/.browserslistrc
diff --git a/example/frontend/.eslintrc.js b/example/frontend/.eslintrc.js
diff --git a/example/frontend/.gitignore b/example/frontend/.gitignore
@@ -1,21 +1,22 @@
-.DS_Store
-node_modules
-/dist
-
-
-# local env files
-.env.local
-.env.*.local
-
-# Log files
+# Logs
+logs
+*.log
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
 
 # Editor directories and files
+.vscode/*
+!.vscode/extensions.json
 .idea
-.vscode
+.DS_Store
 *.suo
 *.ntvs*
 *.njsproj

diff --git a/example/frontend/README.md b/example/frontend/README.md
@@ -1,29 +1,16 @@
-# frontend
+# Vue 3 + TypeScript + Vite
 
-## Project setup
-```
-yarn install
-```
+This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
 
-### Compiles and hot-reloads for development
-```
-yarn serve
-```
+## Recommended IDE Setup
 
-### Compiles and minifies for production
-```
-yarn build
-```
+- [VS Code](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar)
 
-### Run your unit tests
-```
-yarn test:unit
-```
+## Type Support For `.vue` Imports in TS
 
-### Lints and fixes files
-```
-yarn lint
-```
+Since TypeScript cannot handle type information for `.vue` imports, they are shimmed to be a generic Vue component type by default. In most cases this is fine if you don't really care about component prop types outside of templates. However, if you wish to get actual prop types in `.vue` imports (for example to get props validation when using manual `h(...)` calls), you can enable Volar's Take Over mode by following these steps:
 
-### Customize configuration
-See [Configuration Reference](https://cli.vuejs.org/config/).
+1. Run `Extensions: Show Built-in Extensions` from VS Code's command palette, look for `TypeScript and JavaScript Language Features`, then right click and select `Disable (Workspace)`. By default, Take Over mode will enable itself if the default TypeScript extension is disabled.
+2. Reload the VS Code window by running `Developer: Reload Window` from the command palette.
+
+You can learn more about Take Over mode [here](https://github.com/johnsoncodehk/volar/discussions/471).
diff --git a/example/frontend/auto-imports.d.ts b/example/frontend/auto-imports.d.ts
@@ -0,0 +1,6 @@
+// Generated by 'unplugin-auto-import'
+// We suggest you to commit this file into source control
+declare global {
+  const ElNotification: typeof import('element-plus/es')['ElNotification']
+}
+export {}
diff --git a/example/frontend/babel.config.js b/example/frontend/babel.config.js
diff --git a/example/frontend/components.d.ts b/example/frontend/components.d.ts
@@ -0,0 +1,21 @@
+// generated by unplugin-vue-components
+// We suggest you to commit this file into source control
+// Read more: https://github.com/vuejs/vue-next/pull/3399
+import '@vue/runtime-core'
+
+declare module '@vue/runtime-core' {
+  export interface GlobalComponents {
+    ElAlert: typeof import('element-plus/es')['ElAlert']
+    ElButton: typeof import('element-plus/es')['ElButton']
+    ElCol: typeof import('element-plus/es')['ElCol']
+    ElCollapse: typeof import('element-plus/es')['ElCollapse']
+    ElCollapseItem: typeof import('element-plus/es')['ElCollapseItem']
+    ElInput: typeof import('element-plus/es')['ElInput']
+    ElOption: typeof import('element-plus/es')['ElOption']
+    ElRow: typeof import('element-plus/es')['ElRow']
+    ElSelect: typeof import('element-plus/es')['ElSelect']
+    HomeView: typeof import('./src/components/HomeView.vue')['default']
+  }
+}
+
+export {}
diff --git a/example/frontend/index.html b/example/frontend/index.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite App</title>
+    <script>
+      global = globalThis
+    </script>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>
diff --git a/example/frontend/jest.config.js b/example/frontend/jest.config.js