Skip to content

Commit

Permalink
feat: clean wording in frontend to make button behavior more evident
Browse files Browse the repository at this point in the history
  • Loading branch information
@yum0e
yum0e committed Jul 18, 2023
1 parent 44f6704 commit fb7f84f
Showing 1 changed file with 74 additions and 89 deletions.
163 changes: 74 additions & 89 deletions front/src/app/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -71,27 +71,27 @@ export const CONFIG: Omit<SismoConnectConfig, "appId"> = {
const CHAIN = mumbaiFork;

export default function Home() {
const [appState, setAppState] = useState<{
pageState: string;
amountClaimed: string;
sismoConnectConfig: { appId: string | undefined; vault: VaultConfig | {} };
claimRequests: ClaimRequest[] | undefined;
authRequests: AuthRequest[] | undefined;
const [pageState, setPageState] = useState<string>("init");
const [sismoConnectConfig, setSismoConnectConfig] = useState<SismoConnectConfig>({
appId: "",
});
const [sismoConnectRequest, setSismoConnectRequest] = useState<{
auths: AuthRequest[] | undefined;
claims: ClaimRequest[] | undefined;
}>({
auths: undefined,
claims: undefined,
});
const [sismoConnectVerifiedResult, setSismoConnectVerifiedResult] = useState<{
verifiedClaims: VerifiedClaim[] | undefined;
verifiedAuths: VerifiedAuth[] | undefined;
verifiedSignedMessage: string | undefined;
amountClaimed: string;
}>({
pageState: "init",
amountClaimed: "",
sismoConnectConfig: {
appId: undefined,
vault: {},
},
claimRequests: undefined,
authRequests: undefined,
verifiedClaims: undefined,
verifiedAuths: undefined,
verifiedSignedMessage: undefined,
amountClaimed: "",
});
const [responseBytes, setResponseBytes] = useState<string | null>(null);
const [claimError, setClaimError] = useState<string | null>(null);
Expand Down Expand Up @@ -119,45 +119,40 @@ export default function Home() {
const { authRequests, claimRequests } =
getAuthRequestsAndClaimRequestsFromSismoConnectRequest(sismoConnectRequest);

setAppState((prev) => {
return {
...prev,
// we impersonate accounts if the impersonation mode is set to true in the contract
sismoConnectConfig: {
appId,
vault: (isImpersonationMode === true ? CONFIG.vault : {}) as VaultConfig,
},
authRequests,
claimRequests,
};
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();
}, [appState.pageState]);
}, [pageState]);

useEffect(() => {
if (!responseBytes) return;
setAppState((prev) => {
return { ...prev, pageState: "responseReceived" };
});
setPageState("responseReceived");
setClaimError(error);
}, [responseBytes, error, claimError]);

/* ************************* Reset state **************************** */
function resetApp() {
setAppState({
pageState: "init",
amountClaimed: "",
sismoConnectConfig: {
appId: undefined,
vault: {},
},
claimRequests: undefined,
authRequests: undefined,
setPageState("init");
setSismoConnectConfig({
appId: "",
});
setSismoConnectRequest({
auths: undefined,
claims: undefined,
});
setSismoConnectVerifiedResult({
verifiedClaims: undefined,
verifiedAuths: undefined,
verifiedSignedMessage: undefined,
amountClaimed: "",
});
setClaimError("");
const url = new URL(window.location.href);
Expand All @@ -172,13 +167,9 @@ export default function Home() {
setClaimError("");
try {
if (chain?.id !== CHAIN.id) await switchNetworkAsync?.(CHAIN.id);
setAppState((prev) => {
return { ...prev, pageState: "confirmingTransaction" };
});
setPageState("confirmingTransaction");
const hash = await airdropContract.write.claimWithSismo([responseBytes, address]);
setAppState((prev) => {
return { ...prev, pageState: "verifying" };
});
setPageState("verifying");
let txReceipt = await waitingForTransaction(hash);
if (txReceipt?.status === "success") {
const amountClaimed = formatEther(
Expand All @@ -188,23 +179,18 @@ export default function Home() {
const verifiedAuths = (await airdropContract.read.getVerifiedAuths()) as VerifiedAuth[];
const verifiedSignedMessage =
(await airdropContract.read.getVerifiedSignedMessage()) as string;
setAppState((prev) => {
return {
...prev,
amountClaimed,
verifiedClaims,
verifiedAuths,
verifiedSignedMessage,
pageState: "verified",
};
setPageState("verified");
setSismoConnectVerifiedResult({
verifiedClaims,
verifiedAuths,
verifiedSignedMessage,
amountClaimed,
});
}
} catch (e: any) {
setClaimError(formatError(e));
} finally {
setAppState((prev) => {
return { ...prev, pageState: "responseReceived" };
});
setPageState("responseReceived");
}
}

Expand All @@ -221,26 +207,23 @@ export default function Home() {
<>
<>
{" "}
{appState.pageState != "init" && <button onClick={() => resetApp()}>Reset</button>}
{pageState != "init" && <button onClick={() => resetApp()}>Reset</button>}
<p>
<b>{`Chain: ${chain?.name} [${chain?.id}]`}</b>
<br />
<b>Your airdrop destination address is: {address}</b>
</p>
</>
{appState.pageState == "init" && (
{pageState == "init" && (
<>
<SismoConnectButton
config={{
...(appState.sismoConnectConfig as { appId: string; vault: VaultConfig }),
}}
// Auths = Data Source Ownership Requests. (e.g Wallets, Github, Twitter, Github)
auths={appState.authRequests}
// Claims = prove group membership of a Data Source in a specific Data Group.
// (e.g ENS DAO Voter, Minter of specific NFT, etc.)
// Data Groups = [{[dataSource1]: value1}, {[dataSource1]: value1}, .. {[dataSource]: value}]
// Existing Data Groups and how to create one: https://factory.sismo.io/groups-explorer
claims={appState.claimRequests}
// 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}
// 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 All @@ -254,21 +237,19 @@ export default function Home() {
)}
{claimError !== null && (
<div className="status-wrapper">
{appState.pageState == "responseReceived" && (
{pageState == "responseReceived" && (
<button onClick={() => claimAirdrop()}>{"Claim"}</button>
)}
{appState.pageState == "confirmingTransaction" && (
{pageState == "confirmingTransaction" && (
<button disabled={true}>{"Confirm tx in wallet"}</button>
)}
{appState.pageState == "verifying" && (
{pageState == "verifying" && (
<span className="verifying"> Verifying ZK Proofs onchain... </span>
)}
{appState.pageState == "verified" && (
<span className="verified"> ZK Proofs Verified! </span>
)}
{pageState == "verified" && <span className="verified"> ZK Proofs Verified! </span>}
</div>
)}
{isConnected && !appState.amountClaimed && claimError && (
{isConnected && !sismoConnectVerifiedResult.amountClaimed && claimError && (
<>
<p style={{ color: "#ff6347" }}>{claimError}</p>
{claimError.slice(0, 50) ===
Expand All @@ -285,10 +266,11 @@ export default function Home() {
)}
{/* Table of the Sismo Connect requests and verified result */}
{/* Table for Verified Auths */}
{appState.verifiedAuths && (
{sismoConnectVerifiedResult.verifiedAuths && (
<>
<p>
{appState.amountClaimed} tokens were claimed in total on {address}.
{sismoConnectVerifiedResult.amountClaimed} tokens were claimed in total on{" "}
{address}.
</p>
<h3>Verified Auths</h3>
<table>
Expand All @@ -299,7 +281,7 @@ export default function Home() {
</tr>
</thead>
<tbody>
{appState.verifiedAuths.map((auth, index) => (
{sismoConnectVerifiedResult.verifiedAuths.map((auth, index) => (
<tr key={index}>
<td>{AuthType[auth.authType]}</td>
<td>
Expand All @@ -315,7 +297,7 @@ export default function Home() {
)}
<br />
{/* Table for Verified Claims */}
{appState.verifiedClaims && (
{sismoConnectVerifiedResult.verifiedClaims && (
<>
<h3>Verified Claims</h3>
<table>
Expand All @@ -327,7 +309,7 @@ export default function Home() {
</tr>
</thead>
<tbody>
{appState.verifiedClaims.map((claim, index) => (
{sismoConnectVerifiedResult.verifiedClaims.map((claim, index) => (
<tr key={index}>
<td>
<a
Expand Down Expand Up @@ -359,14 +341,17 @@ export default function Home() {
</tr>
</thead>
<tbody>
{appState?.authRequests?.map((auth, index) => (
{sismoConnectRequest?.auths?.map((auth, index) => (
<tr key={index}>
<td>{AuthType[auth.authType]}</td>
<td>{auth.userId || "No userId requested"}</td>
<td>{auth.isOptional ? "optional" : "required"}</td>
{appState.verifiedAuths ? (
{sismoConnectVerifiedResult.verifiedAuths ? (
<td>
{getProofDataForAuth(appState.verifiedAuths, auth.authType)!.toString()}
{getProofDataForAuth(
sismoConnectVerifiedResult.verifiedAuths,
auth.authType
)!.toString()}
</td>
) : (
<td> ZK proof not generated yet </td>
Expand All @@ -390,7 +375,7 @@ export default function Home() {
</tr>
</thead>
<tbody>
{appState?.claimRequests?.map((claim, index) => (
{sismoConnectRequest?.claims?.map((claim, index) => (
<tr key={index}>
<td>
<a
Expand All @@ -404,11 +389,11 @@ export default function Home() {
<td>{claim.value ? claim.value : "1"}</td>
<td>{claim.isSelectableByUser ? "yes" : "no"}</td>
<td>{claim.isOptional ? "optional" : "required"}</td>
{appState.verifiedClaims ? (
{sismoConnectVerifiedResult.verifiedClaims ? (
<td>
{
getProofDataForClaim(
appState.verifiedClaims!,
sismoConnectVerifiedResult.verifiedClaims!,
claim.claimType || 0,
claim.groupId!,
claim.value || 1
Expand All @@ -435,8 +420,8 @@ export default function Home() {
<tr>
<td>{{ message: signMessage(address!) }.message}</td>
<td>
{appState.verifiedSignedMessage
? appState.verifiedSignedMessage
{sismoConnectVerifiedResult.verifiedSignedMessage
? sismoConnectVerifiedResult.verifiedSignedMessage
: "ZK Proof not verified"}
</td>
</tr>
Expand Down

0 comments on commit fb7f84f

Please sign in to comment.