React Frontend for Bridge between the Qubic network and Ethereum/Arbitrum allowing for wrapping $Qubic to be bridged to EVM
Built with type safety, scalability, and developer experience in mind.
A more detailed list of the included packages can be found in the Installed Packages section. Packages not shown above include Devtools, ui helper libraries, and eslint plugins/configs.
Getting started is a simple as cloning the repository
git@github.com:vottundev/vottun-qubic-bridge-react.gitChanging into the new directory
cd vottun-qubic-bridge-reactInstalling dependencies
pnpm installUnit testing is handled by React Testing Library and Vitest while End-to-End (E2E) Testing is conducted by Playwright.
If you'd like to run all tests, Unit and E2E alike, execute the following command:
pnpm run testWhen running unit test scripts, it is assumed that unit tests will be colocated with the source files. Take a look at the placeholder README file in src/components for an example.
If you'd like to execute unit tests specifically, the below command will execute vitest:
pnpm run test:unitIf instead you are interested in coverage reporting, run:
pnpm run test:unit:coverageAll unit tests run in watch mode by default. If you'd like to disable watch mode, change the package.json test scripts with the following
before:
"scripts": {
"test:unit": "vitest src/",
"test:unit:coverage": "vitest --coverage src/"
}After:
"scripts": {
"test:unit": "vitest run src/",
"test:unit:coverage": "vitest run --coverage src/"
}Running E2E tests use a similar syntax to running unit tests:
pnpm run test:e2eIf you wish to see the reports, run:
pnpm run test:e2e:reportThis project includes a set of Devtools. Some are additional package dependencies whereas others come built-in to the packages themselves.
A set of utility components are provided in src/components/utils/development-tools/. These wrapper components check whether the application is running in development or production mode and render the component or null respectively. In other words, you can confidently use them during development without having to worry about them showing up for end users in production.
TanStack Query Devtools are ready to go out of the box. The development vs. production rendering mechanism is built into the devtools. If you do wish to render the devtools in production you can freely do so by following the TanStack Query Devtools documentation. The devtools component can be found in src/App.tsx.
When running the application in development mode you can find the TanStack Query Devtools icon in the bottom left corner of the page sporting the React Query Logo.
TanStack Router Devtools, however, utilizes its respective utility component in this project. The initial setup has been taken care of but if you wish to modify or remove the component, have a look in src/App.tsx.
The TanStack Router Devtools icon can be found in the bottom right corner of the page denoted by the vertically stacked "TANSTACK ROUTER" logo.
The above components, along with their imports, are commented out to start.
React Hook Form DevTools icon can be recognized in the top right corner of the page by the pink React Hook Form clipboard logo. A utility component has also provided. Like the TanStack Table Devtools component above, a prop must be passed from a specific hook. In this case, it is the control prop from the useForm() hook. Similar to TanStack Table, use of React Hook Form DevTools requires the component be added to each unique form. More information can be found in the React Hook Form DevTools documentation.
To reiterate, if you wish to restrict the Devtools to development builds use the provided components found at src/components/utils/development-tools instead of the built-in components from their respective modules.
Zustand provides a built-in devtools middleware for use with Redux DevTools.
A simplified list can be found in the Overview section.