𝕓𝕤𝕔-𝕤𝕞𝕒𝕣𝕥-𝕔𝕠𝕟𝕥𝕣𝕒𝕔𝕥-𝕕𝕒𝕤𝕙𝕓𝕠𝕒𝕣𝕕

Dashboard for interacting with a smart contract

Screenshots

Demo

https://smart-contract-dashboard.netlify.app/

Start

Clone

git clone https://github.com/GVatest/bsc-smart-contract-dashboard

Install

npm install
# or
yarn install

Start

npm run dev
# or
yarn dev

Custom Setup

To interact with a network other than BSC set the environment variable

VITE_CHAIN_ID = your network ID

Set your dapp name to allow users connect their wallets from mobile version of metamask

VITE_DAPP_NAME = "bnb-king.finance";

Set your custom contract address and url

VITE_CONTRACT_ADDRESS = "";
VITE_CONTRACT_URL = "";

Replace existing contract intreface located at src/features/contract/contract.ts with your own

Stack

Architecture

While developing this application, I followed the feature-sliced design methodology as it allows for a clear organization of the codebase, isolating logical modules, and laying an easily scalable and updatable structure.

shared - Reusable logic.
features - Business logic, user interaction logic
- contract - Logic for interacting with the smart contract
- wallet - Authorization module (connecting to the metamask wallet)
pages - Combining ready-made modules into a complete page
app - Global settings, providers, and components for the entire application

Additional

This application was developed independently within two weeks based on the design provided by the client. I was not involved in the project's further development.

Credits

Contributors:

👤 Vasiliy Ganja
- Github: @Gvatest

GVatest/smart-contract-dashboard