Git Product home page Git Product logo

dapp-portal's Introduction

zkSync Portal

zkSync Portal ๐Ÿš€

zkSync Portal is a state-of-the-art dapp, merging the power of bridge, tokens manager and transaction history 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.
  • ๐Ÿ“‡ 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.


๐Ÿค Contributing

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


๐Ÿ“œ License

Proudly under the MIT License.

dapp-portal's People

Contributors

abilevych avatar amelnytskyi avatar bdaniil avatar githubdoramon avatar jackhamer09 avatar olehbairak avatar otani88 avatar pcheremu avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar

dapp-portal's Issues

Metamask not detected

Hi everyone,

I don't know why I am having this issue but I thought it is important to share this issue.
I have Metamask installed in Chrome(Version 122.0.6261.69 (Official Build) (arm64)) browser but the portal is not detected that I have it. I am using Mac OS Sonoma 14.1.1.

You can see here
Screenshot 2024-02-28 at 7 00 52 in the evening

Thank you.

Here are more screenshots :

image

image

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.