feat: simplify configuration and request copied in frontend and contr…

…act (#16)

abi/Airdrop.json

@@ -375,93 +375,6 @@
     "stateMutability": "nonpayable",
     "type": "function"
   },
-  {
-    "inputs": [],
-    "name": "getSismoConnectRequest",
-    "outputs": [
-      {
-        "components": [
-          {
-            "internalType": "enum AuthType",
-            "name": "authType",
-            "type": "uint8"
-          },
-          {
-            "internalType": "uint256",
-            "name": "userId",
-            "type": "uint256"
-          },
-          {
-            "internalType": "bool",
-            "name": "isAnon",
-            "type": "bool"
-          },
-          {
-            "internalType": "bool",
-            "name": "isOptional",
-            "type": "bool"
-          },
-          {
-            "internalType": "bool",
-            "name": "isSelectableByUser",
-            "type": "bool"
-          },
-          {
-            "internalType": "bytes",
-            "name": "extraData",
-            "type": "bytes"
-          }
-        ],
-        "internalType": "struct AuthRequest[]",
-        "name": "",
-        "type": "tuple[]"
-      },
-      {
-        "components": [
-          {
-            "internalType": "enum ClaimType",
-            "name": "claimType",
-            "type": "uint8"
-          },
-          {
-            "internalType": "bytes16",
-            "name": "groupId",
-            "type": "bytes16"
-          },
-          {
-            "internalType": "bytes16",
-            "name": "groupTimestamp",
-            "type": "bytes16"
-          },
-          {
-            "internalType": "uint256",
-            "name": "value",
-            "type": "uint256"
-          },
-          {
-            "internalType": "bool",
-            "name": "isOptional",
-            "type": "bool"
-          },
-          {
-            "internalType": "bool",
-            "name": "isSelectableByUser",
-            "type": "bool"
-          },
-          {
-            "internalType": "bytes",
-            "name": "extraData",
-            "type": "bytes"
-          }
-        ],
-        "internalType": "struct ClaimRequest[]",
-        "name": "",
-        "type": "tuple[]"
-      }
-    ],
-    "stateMutability": "view",
-    "type": "function"
-  },
   {
     "inputs": [],
     "name": "getSismoConnectVerifiedResult",

front/src/app/components/Header.tsx

@@ -24,19 +24,22 @@ const Header: React.FC = () => {
       </p>
       <div>
         <p>
-          <b className="code-snippet">src/front/app/page.tsx</b>: Frontend - Queries contract to know Sismo Connect Configuration and Request, requests ZK Proofs from users via Sismo Connect Button
+          <b className="code-snippet">front/src/app/page.tsx</b>: Frontend - Integrate Sismo Connect Button and make Sismo Connect request
         </p>
         <p>
-          <b className="code-snippet">src/Airdrop.sol</b>: Contract - Sets up the Sismo Connect Configuration and Request, verifies Sismo Connect response,
-          mints tokens and stores verified claims, auths and signed message
+          <b className="code-snippet">front/src/app/sismo-connect-config.ts</b>: Sismo Connect configuration and requests
+        </p>
+        <p>
+          <b className="code-snippet">src/Airdrop.sol</b>: Contract - verifies Sismo Connect response and stores verified claims, auths and signed message
         </p>
         <p className="callout">
           {" "}
           Notes: <br />
-          1. If you are using metamask and transactions hang. Go to settings > advanced > clear activity and nonce data <br />
-          2. First ZK Proof generation takes longer time, especially with bad internet as there is a
+          1. You should exactly the same Configuration (AppId and impersonation), AuthRequests and ClaimsRequests in the frontend and in your contract <br />
+          2. If you are using metamask and transactions hang. Go to settings > advanced > clear activity and nonce data <br />
+          3. First ZK Proof generation takes longer time, especially with bad internet as there is a
           zkey file to download once in the data vault connection <br />
-          3. The more proofs you request, the longer it takes to generate them (about 2 secs per
+          4. The more proofs you request, the longer it takes to generate them (about 2 secs per
           proof)
         </p>
       </div>

front/src/app/page.tsx

@@ -40,46 +40,14 @@ import {
   ClaimType,
   SismoConnectConfig,
 } from "@sismo-core/sismo-connect-react";
+import { AUTHS, CLAIMS, CONFIG } from "@/app/sismo-connect-config";
 
-/* **********************  Sismo Connect Config *************************** */
-// For development purposes insert the Data Sources that you want to impersonate
-// Never use this in production
-// the appId is not referenced here as it is set directly in the contract
-export const CONFIG: Omit<SismoConnectConfig, "appId"> = {
-  vault: {
-    // For development purposes insert the Data Sources that you want to impersonate
-    // Never use this in production
-    impersonate: [
-      // EVM Data Sources
-      "dhadrien.sismo.eth",
-      "0xA4C94A6091545e40fc9c3E0982AEc8942E282F38",
-      "0x1b9424ed517f7700e7368e34a9743295a225d889",
-      "0x82fbed074f62386ed43bb816f748e8817bf46ff7",
-      "0xc281bd4db5bf94f02a8525dca954db3895685700",
-      // Github Data Source
-      "github:dhadrien",
-      // Twitter Data Source
-      "twitter:dhadrien_",
-      // Telegram Data Source
-      "telegram:dhadrien",
-    ],
-  },
-  // displayRawResponse: true, // this enables you to get access directly to the
-  // Sismo Connect Response in the vault instead of redirecting back to the app
-};
 
 /* ********************  Defines the chain to use *************************** */
 const CHAIN = mumbaiFork;
 
 export default function Home() {
   const [pageState, setPageState] = useState<string>("init");
-  const [sismoConnectConfig, setSismoConnectConfig] = useState<SismoConnectConfig>({
-    appId: "",
-  });
-  const [sismoConnectRequest, setSismoConnectRequest] = useState<{
-    auths: AuthRequest[];
-    claims: ClaimRequest[];
-  } | null>(null);
   const [sismoConnectVerifiedResult, setSismoConnectVerifiedResult] = useState<{
     verifiedClaims: VerifiedClaim[];
     verifiedAuths: VerifiedAuth[];
@@ -100,34 +68,6 @@ export default function Home() {
 
   // Get the SismoConnectConfig and Sismo Connect Request from the contract
   // Set react state accordingly to display the Sismo Connect Button
-  useEffect(() => {
-    if (!isConnected) return;
-    if (chain?.id !== CHAIN.id) {
-      setSismoConnectRequest(null);
-      return;
-    }
-    async function getRequests() {
-      const appId = (await airdropContract.read.APP_ID()) as string;
-      const isImpersonationMode = (await airdropContract.read.IS_IMPERSONATION_MODE()) as boolean;
-      const sismoConnectRequest = (await airdropContract.read.getSismoConnectRequest()) as [
-        AuthRequest[],
-        ClaimRequest[]
-      ];
-      const { authRequests, claimRequests } =
-        getAuthRequestsAndClaimRequestsFromSismoConnectRequest(sismoConnectRequest);
-
-      setSismoConnectConfig({
-        appId,
-        // we impersonate accounts if the impersonation mode is set to true in the contract
-        vault: (isImpersonationMode === true ? CONFIG.vault : {}) as VaultConfig,
-      });
-      setSismoConnectRequest({
-        auths: authRequests,
-        claims: claimRequests,
-      });
-    }
-    getRequests();
-  }, [pageState, chain]);
 
   useEffect(() => {
     setClaimError(error);
@@ -138,8 +78,6 @@ export default function Home() {
   /* *************************  Reset state **************************** */
   function resetApp() {
     setPageState("init");
-    setSismoConnectConfig({ appId: "" });
-    setSismoConnectRequest(null);
     setSismoConnectVerifiedResult(null);
     setClaimError("");
     const url = new URL(window.location.href);
@@ -201,16 +139,16 @@ export default function Home() {
                 <b>Your airdrop destination address is: {address}</b>
               </p>
             </>
-            {pageState == "init" && sismoConnectRequest && (
+            {pageState == "init" && (
               <>
                 <SismoConnectButton
-                  // the setup of the Sismo Connect Config and Sismo Connect Request
-                  // can be seen in the contract Airdrop.sol
-                  // the frontend queries the contract to get the information needed
-                  // to setup the Sismo Connect Button
-                  config={sismoConnectConfig as SismoConnectConfig}
-                  auths={sismoConnectRequest.auths}
-                  claims={sismoConnectRequest.claims}
+                  config={CONFIG}
+                  // Auths = Data Source Ownership Requests
+                  auths={AUTHS}
+                  // Claims = prove groump membership of a Data Source in a specific Data Group.
+                  // Data Groups = [{[dataSource1]: value1}, {[dataSource1]: value1}, .. {[dataSource]: value}]
+                  // When doing so Data Source is not shared to the app.
+                  claims={CLAIMS}
                   // Signature = user can sign a message embedded in their zk proof
                   signature={{ message: signMessage(address!) }}
                   // responseBytes = the response from Sismo Connect, will be sent onchain
@@ -328,7 +266,7 @@ export default function Home() {
                 </tr>
               </thead>
               <tbody>
-                {sismoConnectRequest?.auths?.map((auth, index) => (
+                {AUTHS.map((auth, index) => (
                   <tr key={index}>
                     <td>{AuthType[auth.authType]}</td>
                     <td>{auth.userId || "No userId requested"}</td>
@@ -362,7 +300,7 @@ export default function Home() {
                 </tr>
               </thead>
               <tbody>
-                {sismoConnectRequest?.claims?.map((claim, index) => (
+                {CLAIMS.map((claim, index) => (
                   <tr key={index}>
                     <td>
                       <a

front/src/app/sismo-connect-config.ts

@@ -0,0 +1,78 @@
+import {
+  ClaimType,
+  AuthType,
+  SignatureRequest,
+  AuthRequest,
+  ClaimRequest,
+  SismoConnectConfig,
+} from "@sismo-core/sismo-connect-client";
+
+export { ClaimType, AuthType };
+
+// For development purposes insert the Data Sources that you want to impersonate
+// Never use this in production
+// the appId is not referenced here as it is set directly in the contract
+export const CONFIG: SismoConnectConfig = {
+  appId: "0x32403ced4b65f2079eda77c84e7d2be6",
+  vault: {
+    // For development purposes insert the Data Sources that you want to impersonate
+    // Never use this in production
+    impersonate: [
+      // EVM Data Sources
+      "dhadrien.sismo.eth",
+      "0xA4C94A6091545e40fc9c3E0982AEc8942E282F38",
+      "0x1b9424ed517f7700e7368e34a9743295a225d889",
+      "0x82fbed074f62386ed43bb816f748e8817bf46ff7",
+      "0xc281bd4db5bf94f02a8525dca954db3895685700",
+      // Github Data Source
+      "github:dhadrien",
+      // Twitter Data Source
+      "twitter:dhadrien_",
+      // Telegram Data Source
+      "telegram:dhadrien",
+    ],
+  },
+  // displayRawResponse: true, // this enables you to get access directly to the
+  // Sismo Connect Response in the vault instead of redirecting back to the app
+};
+
+export const AUTHS: AuthRequest[] = [
+  // Anonymous identifier of the vault for this app
+  // vaultId = hash(vaultSecret, appId).
+  // full docs: https://docs.sismo.io/sismo-docs/build-with-sismo-connect/technical-documentation/vault-and-proof-identifiers
+  { authType: AuthType.VAULT },
+  {
+    authType: AuthType.EVM_ACCOUNT,
+  },
+  { authType: AuthType.GITHUB, isOptional: true, isSelectableByUser: true },
+];
+
+export const CLAIMS: ClaimRequest[] = [
+  {
+    // claim on Sismo Hub GitHub Contributors Data Group membership: https://factory.sismo.io/groups-explorer?search=0xda1c3726426d5639f4c6352c2c976b87
+    // Data Group members          = contributors to sismo-core/sismo-hub
+    // value for each group member = number of contributions
+    // request user to prove membership in the group
+    groupId: "0xda1c3726426d5639f4c6352c2c976b87", // impersonated github:dhadrien has 1 contribution, eligible
+  },
+  {
+    // claim ENS DAO Voters Data Group membership: https://factory.sismo.io/groups-explorer?search=0x85c7ee90829de70d0d51f52336ea4722
+    // Data Group members          = voters in ENS DAO
+    // value for each group member = number of votes in ENS DAO
+    // request user to prove membership in the group with value >= 17
+    groupId: "0x85c7ee90829de70d0d51f52336ea4722",
+    claimType: ClaimType.GTE,
+    value: 4, // impersonated dhadrien.sismo.eth has 17 votes, eligible
+  },
+  {
+    // claim on Stand with Crypto NFT Minters Data Group membership: https://factory.sismo.io/groups-explorer?search=0xfae674b6cba3ff2f8ce2114defb200b1
+    // Data Group members          = minters of the Stand with Crypto NFT
+    // value for each group member = number of NFT minted
+    // request user to prove membership in the group with value = 10
+    groupId: "0xfae674b6cba3ff2f8ce2114defb200b1",
+    claimType: ClaimType.EQ,
+    value: 10, // dhadrin.sismo.eth minted exactly 10, eligible
+    isSelectableByUser: true, // can reveal more than 15 if they want
+    isOptional: true,
+  },
+];