feat: adding a frontend confidential transfer example (#25)

Author: poppyseedDev

confidentialTransfer/.env.example

@@ -0,0 +1,10 @@
+# don't change
+VITE_ACL_ADDRESS=0xFee8407e2f5e3Ee68ad77cAE98c434e637f516e5
+VITE_KMS_ADDRESS=0x9D6891A6240D6130c54ae243d8005063D05fE14b
+VITE_GATEWAY_URL=https://gateway.sepolia.zama.ai/
+
+# get from https://reown.com/
+VITE_PROJECT_ID=""
+
+# change based on what you deployed
+VITE_CONF_TOKEN_ADDRESS=""

confidentialTransfer/.github/workflows/test.yml

@@ -0,0 +1,25 @@
+name: Test
+
+on:
+  pull_request:
+    branches:
+      - main
+  push:
+    branches:
+      - main
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [20.x]
+    steps:
+      - uses: actions/checkout@v3
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v3
+        with:
+          node-version: ${{ matrix.node-version }}
+      - run: npm ci
+      - run: npm run prettier:check
+      - run: npm run build

confidentialTransfer/.gitignore

@@ -0,0 +1,26 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+.env
+.vscode

confidentialTransfer/.prettierrc

@@ -0,0 +1,3 @@
+{
+  "singleQuote": true
+}

confidentialTransfer/README.md

@@ -0,0 +1,114 @@
+# Fhevm React Template
+
+A modern React template for building decentralized applications (dApps) with Fully Homomorphic Encryption (FHE) capabilities using fhevmjs.
+
+## Features
+
+- **fhevmjs**: Fully Homomorphic Encryption for Ethereum Virtual Machine
+- **React**: Modern UI framework for building interactive interfaces
+- **Vite**: Next-generation frontend build tool
+- **Wagmi**: React hooks for Ethereum
+- **Tailwind**: Utility-first CSS framework for rapid UI development
+- **@reown/appkit**: Comprehensive toolkit for Web3 authentication including social logins and multi-wallet support
+- **@radix-ui**: Unstyled, accessible UI components for building high-quality design systems and web apps
+
+## Prerequisites
+
+- Node.js (v20 or higher)
+- npm, yarn, or pnpm package manager
+- MetaMask or another Ethereum wallet
+
+## Getting Started
+
+1. Fork the following repository:
+   [https://github.com/zama-ai/fhevm-react-template](https://github.com/zama-ai/fhevm-react-template)
+
+2. Clone your repository:
+
+```bash
+git clone https://github.com/your-username/fhevm-react-template
+cd fhevm-react-template
+```
+
+1. Install dependencies:
+
+```bash
+npm install
+# or
+yarn install
+pnpm install
+```
+
+1. Configure environment variables:
+
+```bash
+cp .env.example .env
+```
+
+Update `.env` with your specific configuration:
+
+- `VITE_ACL_ADDRESS`: fhevm specific
+- `VITE_KMS_ADDRESS`: fhevm specific
+- `VITE_GATEWAY_URL`: fhevm specific
+- `VITE_PROJECT_ID`: Obtain your project ID by signing up at [reown.com](https://reown.com/). This enables social login and multi-wallet support.
+- `VITE_CONF_TOKEN_ADDRESS`: The address of your deployed confidential ERC20 token contract on Sepolia testnet. You'll get this after deploying the smart contract.
+
+## Development
+
+Start the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+pnpm dev
+```
+
+Visit [http://localhost:5173/](http://localhost:5173/) to view your application.
+
+## Production Build
+
+Create a production-ready build:
+
+```bash
+npm run build
+# or
+yarn build
+pnpm build
+```
+
+## Development Options
+
+### Using the Mocked Coprocessor
+
+For faster development without testnet tokens, you can use a mocked fhevm:
+
+1. Check out the `ConfidentialERC20` example in the [`mockedFrontend` branch](https://github.com/zama-ai/fhevm-react-template/tree/mockedFrontend)
+2. Follow the branch-specific README for setup instructions
+3. Develop and test your dApp locally before deploying to Sepolia
+
+### Using Sepolia Testnet
+
+For testing with real network conditions, deploy your dApp to Sepolia testnet:
+
+1. Ensure you have Sepolia testnet ETH
+2. Configure your `.env` with Sepolia network details
+3. Deploy and test your contracts
+
+## Learn More
+
+- [fhevm Documentation](https://docs.zama.ai/fhevm)
+- [React Documentation](https://reactjs.org/)
+- [Vite Documentation](https://vitejs.dev/)
+- [Wagmi Documentation](https://wagmi.sh/)
+
+## Support
+
+For questions and support:
+
+- [fhevm Discord Community](https://discord.gg/zamaai)
+- [GitHub Issues](https://github.com/zama-ai/fhevm-react-template/issues)
+
+## License
+
+This project is licensed under the MIT License - see the LICENSE file for details.

confidentialTransfer/components.json

@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "default",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.ts",
+    "css": "src/index.css",
+    "baseColor": "slate",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  }
+}

confidentialTransfer/eslint.config.js

@@ -0,0 +1,29 @@
+import js from '@eslint/js';
+import globals from 'globals';
+import reactHooks from 'eslint-plugin-react-hooks';
+import reactRefresh from 'eslint-plugin-react-refresh';
+import tseslint from 'typescript-eslint';
+
+export default tseslint.config(
+  { ignores: ['dist'] },
+  {
+    extends: [js.configs.recommended, ...tseslint.configs.recommended],
+    files: ['**/*.{ts,tsx}'],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+    plugins: {
+      'react-hooks': reactHooks,
+      'react-refresh': reactRefresh,
+    },
+    rules: {
+      ...reactHooks.configs.recommended.rules,
+      'react-refresh/only-export-components': [
+        'warn',
+        { allowConstantExport: true },
+      ],
+      '@typescript-eslint/no-unused-vars': 'off',
+    },
+  },
+);

confidentialTransfer/index.html

@@ -0,0 +1,25 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Fhevm React Template</title>
+    <meta
+      name="description"
+      content="React starter template that allows you to interact with Zama's fhevm."
+    />
+    <meta name="author" content="zama.ai" />
+    <meta property="og:image" content="/og-image.png" />
+  </head>
+
+  <body>
+    <div id="root"></div>
+    <!-- IMPORTANT: DO NOT REMOVE THIS SCRIPT TAG OR THIS VERY COMMENT! -->
+    <script src="https://cdn.gpteng.co/gptengineer.js" type="module"></script>
+    <script
+      src="https://cdn.zama.ai/fhevmjs/0.6.2/fhevmjs.umd.cjs"
+      type="text/javascript"
+    ></script>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>