Skip to content

AlstonChan/Web3BaseTrove

Repository files navigation


Ad Explorer logo

This is a web3 project that is built on the Base Blockchain, which is a layer 2 chain for Ethereum blockchain using optimistic rollups. The project is deployed on Base Sepolia testnet blockchain to allow easy access to the smart contract without cost, the website provides an interface to interact with the smart contract easily.

Remix React Typescript Ethereum Solidity OpenZeppelin Wagmi
Netlify Status

Preview

Tools/package/framework used

  • Remix - A fully featured ReactJs framework
  • Wagmi - A type safe React hook library for Ethereum, allow easy integration with Foundry
  • Foundry - A smart contract development toolchain (Hardhat alternative)
  • RainbowKit - A wallet interface for user to connect their wallet, seamless integration with Wagmi
  • shadcn/ui - Pre-build React component on top of Radix-ui and tailwindcss
  • Eslint and Prettier - Eslint for linting code and Prettier to format the styling of code.
  • Typescript and Solidity - Full type safety on both frontend and blockchain development
  • Windows WSL - To run the project on a Windows machine, this is a requirement
  • Makefile - I use it to run rpc command easily without typing out the long rpc curl command

Development

Prerequisites

The following is a requirement if you wish to run the project locally on your machine

  1. If you are using Windows operating system, then Windows WSL is needed. This is because forge does not seems to be able to work well on Windows environment. The project should be cloned into the WSL drive instead of the windows drive and access it from wsl terminal. You should be fine if you are using either Mac os or Linux based operating system.

  2. Have foundry toolchain installed, refer to the documentation on the installation of the programs.

    • You should have the following commands available after your foundry installation

      forge --version
      anvil --version
      chisel --version
      cast --version
  3. You need to have pnpm package manager installed as the project's dependency is managed using pnpm.

  4. Have Make installed, so you can run execute some commands faster and easier to test your application with the local anvil blockchain.

Local development

  1. Clone the repository to your local machine:

    git clone https://github.com/AlstonChan/Web3BaseTrove
  2. Install the required dependencies for Remix app:

    pnpm install
  3. Open up a new terminal, and change directory (cd) into the project's contracts directory to

    1. Run the local blockchain node (anvil)
    2. Deploy the contract to local blockchain

    Execute the start_anvil.sh file and it will does the job.

    ./start_anvil.sh

Warning

The private key in the start_anvil.sh file is using the private key provided by anvil package. You SHOULD NOT expose your private key in the terminal as such when using your own private key or you are in risk of getting your private key leak!

  1. Run the Remix development server at the root of the project:

    pnpm dev

You should have at least two terminal opened that are running a process.

  • Remix dev server
  • Anvil blockchain testnet

Note

Whenever you have made changes to wagmi.config.ts file or have updated the smart contract interface (like adding a new function/change the args/update the function return type), you SHOULD run pnpm wagmi to regenerate the app/generated.ts file.

Improvement to made

This project has been marked as completed, but further improvement can be made.

  • Add a new tab at profile page to allow user to view the auctions that they have bid on
    • Allow user to see if they can claim bid or rewards without clicking in
  • Add social images/metadata
  • Add security headers
  • Auto refresh the relevant data of the operation once transaction has been included in the block
  • Configure Bridge
    • Bridge from Base to Ethereum
    • Bridge from Base to other superchain (Optimism, Redstone, etc..)

Deployment

The frontend website is deployed to Netlify (with Netlify Functions) using the @netlify/remix-adapter package adapter for RemixJs.

The smart contract of the project has been deployed to the Base Sepolia testnet. All 5 contracts can be found on BaseScan that is already verified on deployed.

License

This project is licensed under GNU General Public License v3