feat: adds wagmi, examples for encryption, decryption, and transfer and ability to connect to different wallet accounts

.env.example

@@ -1,3 +1,10 @@
+# don't change
 VITE_ACL_ADDRESS=0xFee8407e2f5e3Ee68ad77cAE98c434e637f516e5
 VITE_KMS_ADDRESS=0x9D6891A6240D6130c54ae243d8005063D05fE14b
-VITE_GATEWAY_URL=https://gateway.sepolia.zama.ai/
+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=""

.github/workflows/test.yml

@@ -23,3 +23,9 @@ jobs:
       - run: npm ci
       - run: npm run prettier:check
       - run: npm run build
+        env:
+          NEXT_PUBLIC_ACL_ADDRESS: '0xFee8407e2f5e3Ee68ad77cAE98c434e637f516e5'
+          NEXT_PUBLIC_KMS_ADDRESS: '0x9D6891A6240D6130c54ae243d8005063D05fE14b'
+          NEXT_PUBLIC_GATEWAY_URL: 'https://gateway.sepolia.zama.ai/'
+          NEXT_PUBLIC_PROJECT_ID: '00000000000000000000000000000000'
+          NEXT_PUBLIC_CONF_TOKEN_ADDRESS: '0x0000000000000000000000000000000000000000'

.gitignore

@@ -22,4 +22,5 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
-.env
+.env
+.vscode

README.md

@@ -1,35 +1,114 @@
-# fhevmjs-react-template
+# Fhevm React Template
 
-This is a simple template to show how to use fhevmjs with Vite + React.
+A modern React template for building decentralized applications (dApps) with Fully Homomorphic Encryption (FHE) capabilities using fhevmjs.
 
-## Getting started
+## 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
 ```
 
-## Configuration
+Update `.env` with your specific configuration:
 
-Copy `.env.example` to `.env` and update the gateway URL, ACL address, and KMS address to match the fhEVM you're using.
+- `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
 ```
 
-The server listens on [http://localhost:5173/](http://localhost:5173/)
+Visit [http://localhost:5173/](http://localhost:5173/) to view your application.
 
-## Build
+## Production Build
+
+Create a production-ready build:
 
 ```bash
 npm run build
+# or
+yarn build
+pnpm build
 ```
 
-## Using the mocked coprocessor for front end
+## 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:
 
-As an alternative to use the real coprocessor deployed on Sepolia, to help you develop your dApp faster and without needing testnet tokens, you can use a mocked fhevm. Currently, we recommend you to use the `ConfidentialERC20` dApp example available on the [`mockedFrontend` branch of this repository](https://github.com/zama-ai/fhevm-react-template/tree/mockedFrontend). Follow the README on this branch, and you will be able to deploy exactly the same dApp both on Sepolia as well as on the mocked coprocessor seamlessly.
+- [fhevm Discord Community](https://discord.gg/zamaai)
+- [GitHub Issues](https://github.com/zama-ai/fhevm-react-template/issues)
 
-## Documentation
+## License
 
-For more information about fhevmjs, you can [read the documentation](https://docs.zama.ai/fhevm).
+This project is licensed under the MIT License - see the LICENSE file for details.

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"
+  }
+}

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',
+    },
+  },
+);

index.html

@@ -2,16 +2,24 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <script
-      src="https://cdn.zama.ai/fhevmjs/0.6.2/fhevmjs.umd.cjs"
-      type="text/javascript"
-    ></script>
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>fhEVM React demo</title>
+    <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>