Skip to content

Commit

Permalink
feat: simplify configuration and request copied in frontend and contract
Browse files Browse the repository at this point in the history
  • Loading branch information
@leosayous21
leosayous21 committed Jul 18, 2023
1 parent 7b6fa34 commit 881eb89
Show file tree
Hide file tree
Showing 5 changed files with 120 additions and 220 deletions.
87 changes: 0 additions & 87 deletions abi/Airdrop.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
15 changes: 9 additions & 6 deletions front/src/app/components/Header.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
84 changes: 11 additions & 73 deletions front/src/app/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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[];
Expand All @@ -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);
Expand All @@ -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);
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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
Expand Down
83 changes: 83 additions & 0 deletions front/src/app/sismo-connect-config.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,83 @@
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,
},
];

export const SIGNATURE_REQUEST: SignatureRequest = {
message: "I love Sismo!",
isSelectableByUser: true,
};
Loading

0 comments on commit 881eb89

Please sign in to comment.