{"id":13307163,"url":"https://github.com/Innovation-Advisory-Links-Foundation/DigitalHandshake-Frontend","last_synced_at":"2025-03-10T14:32:33.791Z","repository":{"id":77640889,"uuid":"359446002","full_name":"Innovation-Advisory-Links-Foundation/DigitalHandshake-Frontend","owner":"Innovation-Advisory-Links-Foundation","description":"The official frontend of DigitalHandshake dApp","archived":false,"fork":false,"pushed_at":"2021-04-26T15:36:23.000Z","size":1268,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":4,"default_branch":"main","last_synced_at":"2024-07-29T18:44:06.373Z","etag":null,"topics":["blockchain","digitalization","eosio","handshake","smartcontract"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Innovation-Advisory-Links-Foundation.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-04-19T12:09:36.000Z","updated_at":"2024-07-29T18:44:06.373Z","dependencies_parsed_at":"2023-05-15T10:31:07.966Z","dependency_job_id":null,"html_url":"https://github.com/Innovation-Advisory-Links-Foundation/DigitalHandshake-Frontend","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Innovation-Advisory-Links-Foundation%2FDigitalHandshake-Frontend","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Innovation-Advisory-Links-Foundation%2FDigitalHandshake-Frontend/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Innovation-Advisory-Links-Foundation%2FDigitalHandshake-Frontend/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Innovation-Advisory-Links-Foundation%2FDigitalHandshake-Frontend/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Innovation-Advisory-Links-Foundation","download_url":"https://codeload.github.com/Innovation-Advisory-Links-Foundation/DigitalHandshake-Frontend/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":242868572,"owners_count":20198504,"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":["blockchain","digitalization","eosio","handshake","smartcontract"],"created_at":"2024-07-29T17:59:34.607Z","updated_at":"2025-03-10T14:32:33.772Z","avatar_url":"https://github.com/Innovation-Advisory-Links-Foundation.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# \u003cimg src=\"resources/logo.svg\" alt=\"DHSLogo\" width=\"400px\"\u003e\n\n**A blockchain-based solution for making digital handshakes guaranteeing transparency on identity, code and payments.**\n\n- Building a new form of trust in the digital handshake process (from platform to code) through an EOSIO blockchain-based solution.\n- Fair and decentralized dispute resolution with a pseudo-random selection of jurors for reducing the cost-benefit ratio.\n- Automatic token payments through a decentralized and bulletproof escrow service.\n\nYou can learn more about the main challenges of building trust for digital handshakes on the article on our [OverTheBlock Medium](https://medium.com/overtheblock/) page.\n\n## Table of Contents\n\n- [Workflow](#workflow)\n- [Frontend](#frontend)\n- [Getting Started](#getting-started)\n  - [Prerequisities](#prerequisities)\n  - [Configuration](#configuration)\n  - [Usage](#usage)\n- [Screenshoots](#screenshoots)\n- [Development Rules](#development-rules)\n  - [Commit](#commit)\n  - [Branch](#branch)\n- [License](#license)\n\n## Workflow\n\n\u003cdiv align=\"center\"\u003e\n    \u003cimg \n        align=\"center\" \n        src=\"./resources/workflow.svg\" \n        alt=\"Workflow\"\n    /\u003e\n    \u003c/div\u003e\n\u003cp align=\"center\"\u003e \u003ci\u003eFigure 1.\u003c/i\u003e The high-level overview of Digital Handshake workflow. \u003c/p\u003e\n\n- **Users**. An individual or entity registered on the platform and uniquely recognized in the blockchain through a human-readable address. The user can have the Dealer's role when it posts a request for a particular service (e.g., I need a website!) or Bidder's role when it proposes itself for satisfying a specific demand. A user can play both roles, one for each handshake.\n\n- **Jurors**. Professionals or legal experts recorded on the platform. They assist the parties in the judgment of a dispute. They do not have a concrete motivation to participate in the handshake but are interested in receiving new dispute assignments to increase earnings.\n\nThe on-chain business logic is broken down into three smart contracts, where each solves a particular function:\n\n- **Token**. A standard ERC20 token (DHS) offers price stability when making any form of contactless payment.\n\n- **Service**. All features for making digital handshakes.\n\n- **Escrow**. A service that locks amounts of DHS tokens for automating payments.\n\nYou can find more about the on the [Digital Handshake backend repository](https://github.com/Innovation-Advisory-Links-Foundation/DigitalHandshake-Backend).\n\n## Frontend\n\n\u003cdiv align=\"center\"\u003e\n    \u003cimg \n        align=\"center\" \n        src=\"./resources/architecture.svg\" \n        alt=\"Architecture\"\n    /\u003e\n    \u003c/div\u003e\n\u003cp align=\"center\"\u003e \u003ci\u003eFigure 2.\u003c/i\u003e The high-level overview of Digital Handshake architecture. \u003c/p\u003e\n\nThe frontend is a [React](https://reactjs.org/) web application. To reduce complexity in user access, we have implemented a custom login component with a password. This works like the SoA client-side wallet providers comply with the key's security rules and is easily digestible by the user. Provides a tabular layout that allows users to move quickly between the various handshakes through a sorting and filtering system. The user bar that shows rating, current balance and quantity of tokens locked allows always to keep track of token movements. Communicate directly with the blockchain and the off-chain database through two different ad-hoc services. The [EOSIO](https://eos.io/) blockchain service was implemented from scratch with the [eosjs](https://eos.io/for-developers/build/eosjs/) library to ensure greater freedom in managing transactions.\n\n## Getting Started\n\n### Prerequisities\n\nYou need to have the following installed:\n\n- [git](https://git-scm.com/downloads) \u003e= _2.21.0_\n- [node](https://nodejs.org/en/download/) \u003e= _10.16.0_\n- [npm](https://www.npmjs.com/get-npm) \u003e= _6.14.4_\n\n### Configuration\n\nClone the repository and install the packages:\n\n```bash\ngit clone https://github.com/Innovation-Advisory-Links-Foundation/DigitalHandshake-Frontend.git\ncd DigitalHandshake-Frontend\nnpm install\n```\n\n```bash\nNODE_PATH=src\n# absolute path for require()\n# DO NOT CHANGE NOR REMOVE THE ABOVE\n\nREACT_APP_EOS_DHS_SERVICE_CONTRACT=\"dhsservice\"\nREACT_APP_EOS_DHS_TOKEN_CONTRACT=\"dhstoken\"\nREACT_APP_EOS_DHS_ESCROW_CONTRACT=\"dhsescrow\"\nREACT_APP_EOS_HTTP_ENDPOINT=\"http://localhost:8888\"\nREACT_APP_MONGODB_EXPRESS_NODE_SERVER_ENDPOINT=\"http://localhost:8080\"\nREACT_APP_USER_API=\"api/v1/users\"\nREACT_APP_NEGOTIATIONS_API=\"api/v1/negotiations\"\nREACT_APP_MOTIVATIONS_API=\"api/v1/motivations\"\n```\n\n- The `REACT_APP_EOS_DHS_SERVICE_CONTRACT`, `REACT_APP_EOS_DHS_TOKEN_CONTRACT` and `REACT_APP_EOS_DHS_ESCROW_CONTRACT` are the smart contracts names.\n- The `REACT_APP_EOS_HTTP_ENDPOINT` is the endpoint of the EOSIO development node.\n- The `REACT_APP_MONGODB_EXPRESS_NODE_SERVER_ENDPOINT` is the endpoint of the Express NodeJS server which routes requests to the MongoDB instance.\n- The `REACT_APP_USER_API`, `REACT_APP_NEGOTIATIONS_API` and `REACT_APP_MOTIVATIONS_API` are the rest API main routes names.\n\n### Usage\n\nTo start the ReactJS application.\n\n```bash\nnpm start\n```\n\nRun ESLint to check the syntax of your TypeScript code.\n\n```bash\nnpm run code:lint\n```\n\nRun ESLint along with Prettier for syntax checking, style and code fix to your TypeScript code.\n\n```bash\nnpm run code:fix\n```\n\n## Screenshoots\n\n### Login\n\n\u003cdiv align=\"center\"\u003e\n    \u003cimg \n        align=\"center\" \n        src=\"./resources/login.png\" \n        alt=\"Login\"\n    /\u003e\n    \u003c/div\u003e\n\u003cp align=\"center\"\u003e \u003ci\u003eFigure 3.\u003c/i\u003e Login page for first access. \u003c/p\u003e\n\n\n### Login with Password\n\n\u003cdiv align=\"center\"\u003e\n    \u003cimg \n        align=\"center\" \n        src=\"./resources/login_with_password.png\" \n        alt=\"Login with password\" \n    /\u003e\n    \u003c/div\u003e\n\u003cp align=\"center\"\u003e \u003ci\u003eFigure 4.\u003c/i\u003e Login page for quick access via password (after first access). \u003c/p\u003e\n\n\n### Explore Page\n\n\u003cdiv align=\"center\"\u003e\n    \u003cimg \n        align=\"center\" \n        src=\"./resources/explore.png\" \n        alt=\"Explore Page\" \n    /\u003e\n    \u003c/div\u003e\n\u003cp align=\"center\"\u003e \u003ci\u003eFigure 5.\u003c/i\u003e Explore page which shows requests made by other users. \u003c/p\u003e\n\n### Requests Page\n\n\u003cdiv align=\"center\"\u003e\n    \u003cimg \n        align=\"center\" \n        src=\"./resources/requests.png\" \n        alt=\"Requests Page\" \n    /\u003e\n    \u003c/div\u003e\n\u003cp align=\"center\"\u003e \u003ci\u003eFigure 6.\u003c/i\u003e Requests page which shows the requests made by the logged in user. \u003c/p\u003e\n\n### Handshakes Page\n\n\u003cdiv align=\"center\"\u003e\n    \u003cimg \n        align=\"center\" \n        src=\"./resources/handshakes.png\" \n        alt=\"Handshakes Page\" \n    /\u003e\n    \u003c/div\u003e\n\u003cp align=\"center\"\u003e \u003ci\u003eFigure 7.\u003c/i\u003e Handshakes page which shows the handshakes where the logged in user participates as a dealer or bidder. \u003c/p\u003e\n\n## Development Rules\n\n### Commit\n\nSee how a minor change to your commit message style can make you a better programmer.\nBoilerplate\nFormat: `\u003ctype\u003e(\u003cscope\u003e): \u003csubject\u003e`\n\n`\u003cscope\u003e` is optional\n\n#### Example\n\n```\n[feat]: add hat wobble\n^----^  ^------------^\n|     |\n|     +-\u003e Summary in present tense.\n|\n+-------\u003e Type: chore, docs, feat, fix, refactor, style, or test.\n```\n\nMore Examples:\n\n- `feat`: (new feature for the user, not a new feature for build script)\n- `fix`: (bug fix for the user, not a fix to a build script)\n- `docs`: (changes to the documentation)\n- `style`: (formatting, missing semicolons, etc.; no production code change)\n- `refactor`: (refactoring production code, e.g., renaming a variable)\n- `test`: (adding missing tests, refactoring tests; no production code change)\n- `chore`: (updating grunt tasks etc.; no production code change)\n\n**References**:\n\n- [Conventional Commits](https://www.conventionalcommits.org/)\n- [Semantic Commit Messages](https://seesparkbox.com/foundry/semantic_commit_messages)\n- [Git Commit Msg](http://karma-runner.github.io/1.0/dev/git-commit-msg.html)\n\n### Branch\n\n- The _master_ branch must be used for releases only.\n- There is a dev branch, used to merge all sub dev branch.\n- Avoid long descriptive names for long-lived branches.\n- No CamelCase.\n- Use grouping tokens (words) at the beginning of your branch names (in a similar way to the `type` of commit).\n- Define and use small lead tokens to differentiate branches in a meaningful way to your workflow.\n- Use slashes to separate parts of your branch names.\n- Remove branch after merge if it is not essential.\n\nExamples:\n\n    git branch -b docs/README\n    git branch -b test/one-function\n    git branch -b feat/side-bar\n    git branch -b style/header\n\n## License\n\nThis repository is released under the [GNU-GPL3](https://github.com/Innovation-Advisory-Links-Foundation/DigitalHandshake-Frontend/blob/master/LICENSE) License.\n\n---\n\nDigital Handshake Frontend © 2021+, [LINKS Foundation](https://linksfoundation.com/)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FInnovation-Advisory-Links-Foundation%2FDigitalHandshake-Frontend","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FInnovation-Advisory-Links-Foundation%2FDigitalHandshake-Frontend","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FInnovation-Advisory-Links-Foundation%2FDigitalHandshake-Frontend/lists"}