Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/nervosnetwork/force-bridge-ui
Front-end of force bridge
https://github.com/nervosnetwork/force-bridge-ui
bridge ethereum react web3
Last synced: 11 days ago
JSON representation
Front-end of force bridge
- Host: GitHub
- URL: https://github.com/nervosnetwork/force-bridge-ui
- Owner: nervosnetwork
- Created: 2021-04-19T14:24:33.000Z (over 3 years ago)
- Default Branch: develop
- Last Pushed: 2022-12-23T06:53:26.000Z (almost 2 years ago)
- Last Synced: 2024-03-19T09:00:52.884Z (8 months ago)
- Topics: bridge, ethereum, react, web3
- Language: TypeScript
- Homepage: https://forcebridge.com/
- Size: 698 KB
- Stars: 6
- Watchers: 9
- Forks: 8
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Force Bridge User Interface
## Quick Start
### Requirement
- NodeJS 12+
- yarn 1.x
```
git clone path/to/the/force-bridge-ui
cd force-bridge-ui
yarn install
# build commons libraries
yarn build:lib
# craco start
yarn workspace @force-bridge/ui run start
# build ui
cd apps/ui
yarn build
# serve -s build
```
## Build the User Interface
### Create .env
Create an `.env.local` at [apps/ui/](apps/ui) to declare required environment variables, the below env config shows how
force-bridge-ui works with Rinkeby network and Bsc network
Testnet
```
# Force-Bridge Ethereum Backend RPC
REACT_APP_BRIDGE_RPC_URL=/api/force-bridge/api/v1
# Force-Bridge Bsc Backend RPC
REACT_APP_BRIDGE_BSC_RPC_URL=
# CKB node RPC
REACT_APP_CKB_RPC_URL=https://testnet.ckbapp.dev/rpc
# 0: mainnet
# 1: testnet
# 2: devnet
REACT_APP_CKB_CHAIN_ID=1
# Nervos explorer for exploring transaction
REACT_APP_TX_EXPLORER_NERVOS=https://explorer.nervos.org/aggron/transaction/
# Ethereum explorer for exploring transaction
REACT_APP_TX_EXPLORER_ETHEREUM=https://rinkeby.etherscan.io/tx/
# Bsc explorer for exploring transaction
REACT_APP_TX_EXPLORER_BSC=https://testnet.bscscan.com/tx/
# Rinkeby
REACT_APP_ETHEREUM_ENABLE_CHAIN_ID=4
REACT_APP_ETHEREUM_ENABLE_CHAIN_NAME=Rinkeby
# Bsc Testnet
REACT_APP_BSC_ENABLE_CHAIN_ID=97
REACT_APP_BSC_ENABLE_CHAIN_NAME=Bsc-Testnet
```
Mainnet
```
# Force-Bridge Ethereum Backend RPC
REACT_APP_BRIDGE_RPC_URL=/api/force-bridge/api/v1
# Force-Bridge Bsc Backend RPC
REACT_APP_BRIDGE_BSC_RPC_URL=
# CKB node RPC
REACT_APP_CKB_RPC_URL=//lina.ckb.dev/rpc
# 0: mainnet
# 1: testnet
# 2: devnet
REACT_APP_CKB_CHAIN_ID=0
# Nervos explorer for exploring transaction
REACT_APP_TX_EXPLORER_NERVOS=https://explorer.nervos.org/transaction/
# Ethereum explorer for exploring transaction
REACT_APP_TX_EXPLORER_ETHEREUM=https://etherscan.io/tx/
# Bsc explorer for exploring transaction
REACT_APP_TX_EXPLORER_BSC=https://bscscan.com/tx/
# Ethereum Mainnet
REACT_APP_ETHEREUM_ENABLE_CHAIN_ID=1
REACT_APP_ETHEREUM_ENABLE_CHAIN_NAME=Ethereum
# Bsc Mainnet
REACT_APP_BSC_ENABLE_CHAIN_ID=56
REACT_APP_BSC_ENABLE_CHAIN_NAME=Bsc-Mainnet
```
### Run Command To Build
```
> pwd
/path/to/force-bridge-ui
> yarn install
> yarn run build:lib
> cd apps/ui
> yarn run build
```
We will get a `build` folder after the build. The `build/index.html` is the program entry, and we should serve
the `build` folder with an HTTP server.
For more about deployment, we can check this [doc](https://create-react-app.dev/docs/deployment)