Skip to content

zkLinkProtocol/dapp-portal

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

zkSync Portal

zkSync Portal πŸš€

zkSync Portal is a state-of-the-art wallet dapp, merging the power of zkSync Era∎ and zkSync Lite into one user-friendly interface. Designed with a stress on effortless user experience, it simplifies token management, making it your premier interface for interacting with both zkSync versions - every interaction smooth and efficient.

✨ Features

  • πŸ–₯️ Intuitive interface for managing, sending, and bridging zkSync Era and zkSync Lite tokens.
  • πŸ“‡ Ability to add contacts for quick and easy access.
  • πŸ”§ Effortless setup and connection to local zkSync nodes or ZK Stack Hyperchains.

πŸŽ‰ Try it out!


🌍 Connecting to local node

Harness the Portal's power to connect to your local zkSync Era node.

Prerequisites: Node.js version 16+, npm version 7+

  1. πŸ“š Follow the documentation for setting up either an in-memory node or dockerized local setup.
  2. πŸ”„ Clone the Portal repository and set it up:
    git clone https://github.com/matter-labs/dapp-portal.git
    cd dapp-portal
    npm install
  3. πŸ› οΈ Modify the default network settings in data/networks.ts if your network ID, RPC URL, or other info differs. Customize displayed tokens there if needed.
  4. πŸ”₯ Launch the dev server:
    • For in-memory node:
      npm run dev:node:memory
    • For dockerized setup:
      npm run dev:node:docker

Navigate to the displayed Portal URL (typically http://localhost:3000).


πŸ”— Connecting to Hyperchain

To use Portal with your ZK Stack Hyperchain, see the guide here.


πŸ›  Development

Advanced configuration

L1 Balances:

By default, L1 balances are fetched via a public RPC. For faster loading speeds and reduced load on your L1 RPC provider, consider using Ankr's RPC service. Obtain an Ankr token and update the .env file:

ANKR_TOKEN=your_ankr_token_here

Wallet Connect Project Setup:

Before deploying your own version of the Portal, ensure you create your own Wallet Connect project on walletconnect.com. After creating the project, update the project ID in the .env file:

WALLET_CONNECT_PROJECT_ID=your_project_id_here

πŸ”§ Setup

Ensure you've installed the necessary dependencies:

npm install

🌐 Development Server

Activate the dev server at http://localhost:3000:

npm run dev

🏭 Production

Compile for production:

npm run generate

πŸ“˜ Familiarize yourself with the Nuxt 3 documentation for a deeper dive.

βš™οΈ Integration

Integrate the deposit functionality into your dapp using an iframe.

<iframe src="https://portal.zklink.io/deposit-integrate?network=ethereum&token=0x176211869cA2b568f2A7D4EE941E073a821EE1ff&title=Bridge&desc=Bridge+your+asset+to+Nova+to+enjoy+dapps&desc_size=18" width="100%" height="100%"></iframe>

Params:

  • network: network id, Available options are: ethereum, primary(for Linea), zksync, arbitrum, mantle, manta, optimism, base
  • token: corresponds to the token address on selected network, the token address for ETH is "0x0000000000000000000000000000000000000000".
  • title: title of the deposit page
  • title_size: font size of the title
  • desc: description of the deposit page
  • desc_size: font size of the description

🀝 Contributing

Open arms for contributions! Enhance our code and send your pull request here.


πŸ“œ License

Proudly under the MIT License.

About

zkLink Nova Bridge and Wallet

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • TypeScript 44.6%
  • Vue 40.1%
  • Gherkin 14.5%
  • JavaScript 0.5%
  • Shell 0.2%
  • SCSS 0.1%