update to react template and add did (#14)

* mini change

* internal added

* adding did to dapp

* adding the frontend template from react-examples

* adding frontend and frontend visual

* updated did

.gitignore

@@ -1,31 +1,2 @@
-# directories
-.coverage_artifacts
-.coverage_cache
-.coverage_contracts
-artifacts
-build
-cache
-coverage
-dist
-node_modules
-types
-deployments
-kms-fhe-keys/
-network-fhe-keys/
-fhevmTemp/
-abi/
-
-# files
-*.env
-*.log
-.env.docker
 .DS_Store
-.pnp.*
-coverage.json
-package-lock.json
-yarn.lock
-
-res/
-running_node/
-
-docker-compose/docker-compose-full.yml
+.env

README.md

@@ -1,185 +1,51 @@
-# Hardhat Template [![Open in Gitpod][gitpod-badge]][gitpod] [![Github Actions][gha-badge]][gha] [![Hardhat][hardhat-badge]][hardhat] [![License: MIT][license-badge]][license]
-
-[gitpod]: https://gitpod.io/#https://github.com/zama-ai/fhevm-hardhat-template
-[gitpod-badge]: https://img.shields.io/badge/Gitpod-Open%20in%20Gitpod-FFB45B?logo=gitpod
-[gha]: https://github.com/zama-ai/fhevm-hardhat-template/actions
-[gha-badge]: https://github.com/zama-ai/fhevm-hardhat-template/actions/workflows/ci.yml/badge.svg
-[hardhat]: https://hardhat.org/
-[hardhat-badge]: https://img.shields.io/badge/Built%20with-Hardhat-FFDB1C.svg
-[license]: https://opensource.org/licenses/MIT
-[license-badge]: https://img.shields.io/badge/License-MIT-blue.svg
-
-A Hardhat-based template for developing Solidity smart contracts, with sensible defaults.
-
-- [Hardhat](https://github.com/nomiclabs/hardhat): compile, run and test smart contracts
-- [TypeChain](https://github.com/ethereum-ts/TypeChain): generate TypeScript bindings for smart contracts
-- [Ethers](https://github.com/ethers-io/ethers.js/): renowned Ethereum library and wallet implementation
-- [Solhint](https://github.com/protofire/solhint): code linter
-- [Solcover](https://github.com/sc-forks/solidity-coverage): code coverage
-- [Prettier Plugin Solidity](https://github.com/prettier-solidity/prettier-plugin-solidity): code formatter
-
-## Getting Started
-
-Click the [`Use this template`](https://github.com/zama-ai/fhevm-hardhat-template/generate) button at the top of the
-page to create a new repository with this repo as the initial state.
-
-## Features
-
-This template builds upon the frameworks and libraries mentioned above, so for details about their specific features,
-please consult their respective documentations.
-
-For example, for Hardhat, you can refer to the [Hardhat Tutorial](https://hardhat.org/tutorial) and the
-[Hardhat Docs](https://hardhat.org/docs). You might be in particular interested in reading the
-[Testing Contracts](https://hardhat.org/tutorial/testing-contracts) section.
-
-### Sensible Defaults
-
-This template comes with sensible default configurations in the following files:
-
-```text
-├── .editorconfig
-├── .eslintignore
-├── .eslintrc.yml
-├── .gitignore
-├── .prettierignore
-├── .prettierrc.yml
-├── .solcover.js
-├── .solhint.json
-└── hardhat.config.ts
-```
-
-### VSCode Integration
-
-This template is IDE agnostic, but for the best user experience, you may want to use it in VSCode alongside Nomic
-Foundation's [Solidity extension](https://marketplace.visualstudio.com/items?itemName=NomicFoundation.hardhat-solidity).
-
-### GitHub Actions
-
-This template comes with GitHub Actions pre-configured. Your contracts will be linted and tested on every push and pull
-request made to the `main` branch.
+# fhevm-react-template
 
-Note though that to make this work, you must use your `INFURA_API_KEY` and your `MNEMONIC` as GitHub secrets.
+This is an example dApp made with React.js to let users do transfers of a `ConfidentialERC20` token on fhEVM. It contains also a button to request the decryption of an encrypted secret value.
 
-You can edit the CI script in [.github/workflows/ci.yml](./.github/workflows/ci.yml).
+## How to use this repo
 
-## Usage
+You can either deploy the dApp on the real fhEVM coprocessor on the Ethereum Sepolia testnet, or on a local Hardhat node (i.e a mocked corpocessor).
 
-### Pre Requisites
+### How to deploy on Sepolia
 
-Install [pnpm](https://pnpm.io/installation)
+First, before launching the React app, you must deploy the `ConfidentialERC20` smart contract and mint the first few tokens.
+To do this, go to the `hardhat/` directory, and follow all the instructions from the [`README`](/hardhat/README.md) there to deploy and mint the first tokens with Alice's account, i.e until you are able to run the following command:
 
-Before being able to run any command, you need to create a `.env` file and set a BIP-39 compatible mnemonic as the `MNEMONIC`
-environment variable. You can follow the example in `.env.example` or start with the following command:
-
-```sh
-cp .env.example .env
 ```
-
-If you don't already have a mnemonic, you can use this [website](https://iancoleman.io/bip39/) to generate one. An alternative, if you have [foundry](https://book.getfoundry.sh/getting-started/installation) installed is to use the `cast wallet new-mnemonic` command.
-
-Then, install all needed dependencies - please **_make sure to use Node v20_** or more recent:
-
-```sh
-pnpm install
+npm run deploy-sepolia
 ```
 
-### Compile
+> **Note:** Be careful to use your own private mnemonic key in this case, in the `.env` file (do not reuse the public values from `.env.example`!).
 
-Compile the smart contracts with Hardhat:
+After you succesfully run the Sepolia deployment script, go to the `frontend/` directory, and just run those two commands:
 
-```sh
-pnpm compile
 ```
-
-### TypeChain
-
-Compile the smart contracts and generate TypeChain bindings:
-
-```sh
-pnpm typechain
+npm install
+npm run dev
 ```
 
-### Test
-
-Run the tests with Hardhat - this will run the tests on a local hardhat node in mocked mode (i.e the FHE operations and decryptions will be simulated by default):
-
-```sh
-pnpm test
-```
+This will launch the front-end of the dApp from a local Vite server, which will be available at the following URL: [`http://localhost:4173/`](http://localhost:4173/) . You can connect to the dApp with a Web3 wallet such as Metamask and start transferring tokens, reencrypt and read your balance, or request the decryption of the encrypted secret on Sepolia.
 
-### Lint Solidity
+### How to use in Mocked mode
 
-Lint the Solidity code:
+First go to the `hardhat/` directory : define a new `.env` file - in mocked mode, simply doing a copy `cp .env.example .env` is doable, but you can also you your own private mnemonic - then install all packages with
+`npm i`. Now you can launch the hardhat local node with:
 
-```sh
-pnpm lint:sol
 ```
-
-### Lint TypeScript
-
-Lint the TypeScript code:
-
-```sh
-pnpm lint:ts
+npx hardhat node
 ```
 
+This will also launch a mocked instance of the coprocessor.
 
-### Clean
-
-Delete the smart contract artifacts, the coverage reports and the Hardhat cache:
+You can then go to the `frontend/` directory, and just run those two commands:
 
-```sh
-pnpm clean
 ```
-
-### Mocked mode
-
-The mocked mode allows faster testing and the ability to analyze coverage of the tests. In this mocked version,
-encrypted types are not really encrypted, and the tests are run on the original version of the EVM, on a local hardhat
-network instance. To run the tests in mocked mode, you can use directly the following command:
-
-```bash
-pnpm test
-```
-
-To analyze the coverage of the tests (in mocked mode necessarily, as this cannot be done on the real fhEVM node), you
-can use this command :
-
-```bash
-pnpm coverage
-```
-
-Then open the file `coverage/index.html`. You can see there which line or branch for each contract which has been
-covered or missed by your test suite. This allows increased security by pointing out missing branches not covered yet by
-the current tests.
-
-> [!Note]
-> Due to intrinsic limitations of the original EVM, the mocked version differs in rare edge cases from the real fhEVM, the main difference is the gas consumption for the FHE operations (native gas is around 5% underestimated in mocked mode). This means that before deploying to production, developers should still run the tests with the original fhEVM node, as a final check - i.e in non-mocked mode (see next section).
-
-### Non-mocked mode
-
-To run your test on a real fhevm node, you can use the coprocessor deployed on the Sepolia test network. To do this, ensure you are using a valid value `SEPOLIA_RPC_URL` in your `.env` file. Then you should use the following command:
-
-```bash
-npx hardhat test [PATH_TO_YOUR_TEST] --network sepolia
+npm install
+npm run dev-mocked
 ```
 
-The `--network sepolia` flag will make your test run on a real fhevm coprocessor.
-
-> [!Note]
-> For this test to succeed, first ensure you set your own private `MNEMONIC` variable in the `.env` file and then  ensure you have funded your test accounts on Sepolia. For example you can use the following command to get the corresponding private keys associated with the first `5` accounts derived from the mnemonic: 
-```
-npx hardhat get-accounts --num-accounts 5
-```
-This will let you add them to the Metamask app, to easily fund them from your personal wallet. 
-
-If you don't own already Sepolia test tokens, you can for example use a free faucet such as [https://sepolia-faucet.pk910.de/](https://sepolia-faucet.pk910.de/).
-
-### Syntax Highlighting
-
-If you use VSCode, you can get Solidity syntax highlighting with the
-[hardhat-solidity](https://marketplace.visualstudio.com/items?itemName=NomicFoundation.hardhat-solidity) extension.
+The dApp will be available again at: [`http://localhost:4173/`](http://localhost:4173/) . You can connect to the dApp with a Web3 wallet such as Metamask and start transferring tokens, reencrypt and read your balance, or request the decryption of the encrypted. This time, the only difference is that it will ask you to connect to the Hardhat network instead of Sepolia, so make sure to have added the Hardhat network to your Metamask wallet in order to be able to use the dApp with the mocked coprocessor. You can find instructions to configure Metamask adequatly [here](https://support.chainstack.com/hc/en-us/articles/4408642503449-Using-MetaMask-with-a-Hardhat-node).
 
-## License
+#### Troubleshooting
 
-This project is licensed under MIT.
+**_Invalid nonce errors:_** This is a common issue everytime you restart your local Hardhat node and you want to reuse the same accounts in Metamask. You should remember to reset the nonce of the accounts you used the last time with Hardhat. To reset the account's transaction history and the nonce, open Metamask and select the Hardhat network, click on your account followed by `Settings -> Advanced -> Clear activity tab data`.