{"id":21919560,"url":"https://github.com/bosonprotocol/reference-frontend","last_synced_at":"2025-09-02T06:42:04.435Z","repository":{"id":45145930,"uuid":"315626422","full_name":"bosonprotocol/reference-frontend","owner":"bosonprotocol","description":"[DEPRECATED] An example front-end application for Boson Protocol","archived":false,"fork":false,"pushed_at":"2022-01-06T14:41:30.000Z","size":28873,"stargazers_count":12,"open_issues_count":6,"forks_count":0,"subscribers_count":15,"default_branch":"main","last_synced_at":"2023-03-10T01:32:24.616Z","etag":null,"topics":["bosonprotocol","dapp","example-app","reference-app"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"lgpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/bosonprotocol.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":".github/CODEOWNERS","security":null,"support":null}},"created_at":"2020-11-24T12:32:40.000Z","updated_at":"2023-02-09T10:30:10.000Z","dependencies_parsed_at":"2022-08-25T16:11:54.661Z","dependency_job_id":null,"html_url":"https://github.com/bosonprotocol/reference-frontend","commit_stats":null,"previous_names":[],"tags_count":null,"template":null,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bosonprotocol%2Freference-frontend","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bosonprotocol%2Freference-frontend/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bosonprotocol%2Freference-frontend/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bosonprotocol%2Freference-frontend/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bosonprotocol","download_url":"https://codeload.github.com/bosonprotocol/reference-frontend/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":226979176,"owners_count":17712574,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["bosonprotocol","dapp","example-app","reference-app"],"created_at":"2024-11-28T20:08:44.120Z","updated_at":"2024-11-28T20:08:44.893Z","avatar_url":"https://github.com/bosonprotocol.png","language":"JavaScript","readme":"[![banner](docs/assets/banner.png)](https://leptonite.io)\n\n\u003ch1 align=\"center\"\u003eLeptonite - Powered by Boson Protocol\u003c/h1\u003e\n\n[![Gitter chat](https://badges.gitter.im/bosonprotocol.png)](https://gitter.im/bosonprotocol/community)\n\nThis is a reference application which demonstrates how to integrate Boson Protocol into a React front-end.\n\nThis reference app may be used as a template for building your own marketplace powered by Boson Protocol. Users can connect their wallets and list a set of items as a seller, as well as discover products that can be purchased as a buyer. The application also demonstrates how to the transaction lifecycle can be tracked and co-ordinated by both parties.\n\n---\n**Table of Contents**:\n\n- [Design \u0026 Architecture](#design--architecture)\n- [Local Development](#local-development)\n  - [Prerequisites](#prerequisites)\n  - [Build](#build)\n  - [Run](#run)\n- [- Note that you also need to run your own backend, configured to work with these contracts (see instructions in the reference-backend repository)](#--note-that-you-also-need-to-run-your-own-backend-configured-to-work-with-these-contracts-see-instructions-in-the-reference-backend-repository)\n  - [Test](#test)\n  - [Code Linting \u0026 Formatting](#code-linting--formatting)\n- [Contributing](#contributing)\n- [License](#license)\n\n---\n## Design \u0026 Architecture\n\nThe application architecture is as depicted below. There are various components to this:\n- `Frontend`\n- `Backend` (details can be found in the [`reference-backend`](https://github.com/bosonprotocol/reference-backend) repository)\n    - `Server`\n    - `Database`\n    - `Keepers service` - These are cloud functions which run periodically to trigger certain contract methods such as expiry/finalization. Details can be found [here](https://github.com/bosonprotocol/reference-backend/tree/develop/external/keepers).\n    - `Event Listeners` - This listens for blockchain events and updates the backend accordingly. Details can be found [here](https://github.com/bosonprotocol/reference-backend/tree/develop/external/lambdas).\n- `Smart contracts` (details can be found in the [`contracts`](https://github.com/bosonprotocol/contracts) repository)\n\n[![banner](docs/assets/architecture-diagram.png)](#design-\u0026-architecture)\n\n---\n## Local Development\n\n### Prerequisites\n\nFor local development of the reference-frontend, your development machine will need a few\ntools installed. These will allow you to run the ruby scripts (executed as `./go [args]`) to build and test the project.\n\nAt a minimum, you'll need:\n* Node (12.20)\n* NPM (\u003e 6)\n* Ruby (2.7)\n* Bundler (\u003e 2)\n* Git\n* Docker\n* direnv\n   * This easily allows environment variables to be switched when navigating between project directories (e.g. `contracts`, `reference-backend` and `reference-frontend`). You will be prompted to run `direnv allow` to enable this.\n\nFor instructions on how to get set up with these specific versions:\n* See the [OS X guide](docs/setup/osx.md) if you are on a Mac.\n* See the [Linux guide](docs/setup/linux.md) if you use a Linux distribution.\n\n---\n### Build\n\nWe have a fully automated local build process to check that your changes are\ngood to be merged. To run the build:\n\n```shell script\n./go\n````\n\nBy default, the build process fetches all dependencies, compiles, lints,\nformats and tests the codebase. There are also tasks for each step. This and\nsubsequent sections provide more details of each of the tasks.\n\nTo fetch dependencies:\n\n```shell script\n./go dependencies:install\n```\n\n---\n### Run\nTo run the frontend app connected to a local backend, execute the following commands from the root directory:\n- create a ./.env.local file with the following variables:\n  ```\n  REACT_APP_BACKEND_BASE_URL=\"\u003cyour-backend-url\u003e\"\n  REACT_APP_FRONT_END_LOCALSTORAGE_VERSION=\"1.0\"\n  GENERATE_SOURCEMAP=false\n  ```\n  Where \u003cyour-backend-url\u003e is your backend url (for instance http://localhost:3333)\n\n- Then, run:\n\n  ```shell script\n  npm install\n  npm run start:local\n  ```\n\nIf you need to deploy your own versions of the Boson Protocol contracts and want the frontend to connect them:\n- Run ganache GUI or ganache-cli, setting block mining time to 5 second (to be sure the transactions are not going to be validated immediately)\n    ```\n    ganache-cli --mnemonic \"one two three four five six seven eight nine ten eleven twelve\" --db boson-local --port 8545 --chainId 1337 --blockTime 5\n    ```\n- deploy the contracts locally through Ganache (see instructions in the contracts repository)\n    ```\n    cd /my-repos/BosonProtocol/contracts\n    npm install\n    node_modules\\.bin\\truffle migrate\n    ```\n- note the addresses of the deployed contracts (or keep your window open)\n- update the contract addresses in the file './src/hooks/configs.js':\n  ```\n  export const SMART_CONTRACTS = {\n    CashierContractAddress: \"0xC6fd7b3464Ffb6F3d9328aA77f836E698742B3ce\",\n    VoucherKernelContractAddress: \"0x7589e53b8a55212Af8b3ad6ef5c31D9c02bFA25F\",\n    BosonRouterContractAddress: \"0x81554F12c4A47bB420D5e5D51F0a8f9837Fe79C3\",\n    BosonTokenContractAddress: \"0x518206d7aaD60874c3b2DCFfd342A2cAD828076C\",\n    FundLimitsContractAddress: \"0xc997BC85206e436bD9e438C5Be04aaa6c679275b\",\n  };\n  ```\n- Note that you also need to run your own backend, configured to work with these contracts (see instructions in the reference-backend repository)\n---\n### Test\n\nAll tests are written using [Jest](https://jestjs.io/).\n\nTo run the unit tests:\n\n```shell script\n./go tests:unit\n```\n\n---\n### Code Linting \u0026 Formatting\n\nBoth the app itself and the tests are linted and formatted as part of\nthe build process.\n\nFor the tests, we use:\n* [eslint](https://eslint.org/) for linting\n* [prettier](https://prettier.io/) for formatting\n\nTo lint the app:\n\n```shell script\n./go app:lint\n```\n\nThis will check if the linter is satisfied. If instead you want to attempt to\nautomatically fix any linting issues:\n\n```shell script\n./go app:lint_fix\n```\n\nTo check the formatting of the app:\n\n```shell script\n./go app:format\n```\n\nTo automatically fix formatting issues:\n\n```shell script\n./go app:format_fix\n```\n\nSimilarly, for the tests, to perform the same tasks:\n\n```shell script\n./go tests:lint\n./go tests:lint_fix\n./go tests:format\n./go tests:format_fix\n```\n\n---\n## Contributing\n\nWe welcome contributions! Until now, Boson Protocol has been largely worked on by a small dedicated team. However, the ultimate goal is for all of the Boson Protocol repositories to be fully owned by the community and contributors. Issues, pull requests, suggestions, and any sort of involvement are more than welcome.\n\nIf you have noticed a bug, [file an issue](/issues). If you have a large pull request, we recommend filing an issue first; small PRs are always welcome.\n\nQuestions are also welcome, as long as they are tech related. We can use them to improve our documentation.\n\nAll PRs must pass all tests before being merged.\n\nBy being in this community, you agree to the [Code of Conduct](CODE_OF_CONDUCT.md). Take a look at it, if you haven't already.\n\n---\n## License\n\nLicensed under [LGPL v3](LICENSE).\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbosonprotocol%2Freference-frontend","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbosonprotocol%2Freference-frontend","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbosonprotocol%2Freference-frontend/lists"}