StarkGate Bridge Alternative Interface

Caution

Use with caution and at your own risk as this repository is still experimental and NOT production ready.

This an experimental alternative frontend interface implementation of the StarkGate Bridge. It is not production ready, therefore use it at your own risk.

For a complete implementation of the StarkGate frontend, please refer to the official repository here.

Special thanks to the Starkware team for their hard work.

Objective

The objective of this project is to provide an alternative frontend interface for the Starknet StarkGate bridge to be used in testnets & app chain environments like Madara for example.

Requirements

The following is required to run the webapp before you can get started:

• macOS, Windows (including WSL), or Linux system
• Node.js 21.5.0+ (with npm: 10.2.4+)

In a fresh new ubuntu distro

• Install curl, make, g++ and git:

sudo apt update && sudo apt install curl git make g++
# or without sudo
# apt update && apt install curl git make

• Install nodejs:

curl -fsSL https://deb.nodesource.com/setup_21.x | sudo -E bash - &&\
sudo apt-get install -y nodejs
# or without sudo
# curl -fsSL https://deb.nodesource.com/setup_21.x | bash - && apt-get install -y nodejs

Getting Started

The project is based on Next.js, a React framework for production. It uses TypeScript and Tailwind CSS. The package manager is pnpm, so you need to install it first.

make deps

This will try to install pnpm globally using the existing npm version (make sure to have the correct requirements installed) and then proceed to run pnpm install.

If you have pnpm installed globally already, you can run:

make install

Behind the scenes, this will do a pnpm install of the package.json dependencies, creating a node_module folder locally.

Environment Variables

The following table describes each environment variable used by the frontend and their descriptions:

Variable	Description
NEXT_PUBLIC_ETHEREUM_RPC_URL	The URL of the Ethereum RPC (used by wagmi).
NEXT_PUBLIC_STARKNET_RPC_URL	The URL of the Starkness RPC (used by starknet-react.
NEXT_PUBLIC_WITHDRAWAL_CONTRACT_ADDRESS	The withdrawal contract address.
NEXT_PUBLIC_DEPOSIT_CONTRACT_ADDRESS	The deposit contract address.

Run the following command to create a .env file based on .env.example with the required environment variables:

make create_env

This will create a .env file with the required environment variables. Make sure to update the values of the variables in the .env file to match your environment.

Development

To start a development build of the webapp, run:

make dev

This runs next dev, which starts the application in development mode with hot-code reloading, error reporting, and more.

Then open http://localhost:3000 with your browser to view the application.

Make sure to update environment variables in .env to match your environment. See .env.example for an example of which variables are required. For more information, see the Environment Variables section.

Running in a different port

To run the webapp in a different port, run:

make dev PORT=3069

This runs next dev -p 3069, which starts the application in development mode in port 3069.

Linting

To lint the webapp, run:

make lint

This runs next lint, which runs ESLint on the pages and components in the webapp and reports any linting errors. Make sure to fix all linting errors before submitting a pull request.

Production

To run the production build of the webapp, run:

make build

This runs next build, which generates an optimized version of your application for production. HTML, CSS, and JavaScript files are created based on your pages. JavaScript is compiled and browser bundles are minified using the Next.js Compiler to help achieve the best performance and support all modern browsers¹.

Running the production build

To start the production build of the webapp, run:

make start

This runs next start, which starts the Node.js server. This server supports all Next.js features².

Alternatively, you can run:

make deploy

This runs next build && next start, which builds and starts the application in production mode.

Then open http://localhost:3000 with your browser to view the application.

Running in a different port

To run the webapp in a different port, run:

make start PORT=3069

or:

make deploy PORT=3069

This starts the application in production mode in port 3069.