feat(site): faucet checkbox

Signed-off-by: aeryz <abdullaheryz@protonmail.com>

site/package.json

@@ -45,6 +45,7 @@
 		"@sveltejs/adapter-static": "^2.0.3",
 		"cosmjs-types": "^0.8.0",
 		"ethers": "6.7.1",
+		"get-browser-fingerprint": "3.0.0",
 		"graphql": "^16.8.1",
 		"patch-package": "^8.0.0",
 		"postinstall-postinstall": "^2.1.0"

site/src/routes/blog/start-of-the-endgame/FaucetButton.svelte

@@ -1,19 +1,47 @@
 <script lang="ts">
+	import { onMount } from 'svelte';
 	import DemoButton from "$lib/DemoButton.svelte";
 	import TerminalContainer from "$lib/TerminalContainer.svelte";
 	import PulseSpinner from "$lib/PulseSpinner.svelte";
 	import { getUnoFromFaucet } from "$lib/transferDemo";
+	import { gql } from "@apollo/client/core";
 	import { get, writable } from "svelte/store";
 	import type { Writable } from "svelte/store";
-	import { connectedToUnion } from "$lib/stores/wallets";
+	import { connectedToUnion, unionAccount, apolloClient } from "$lib/stores/wallets";
 	import { unionUnoBalance } from "$lib/stores/wallets"; 
 	import AddressesAndBalances from "./AddressesAndBalances.svelte";
 	import { toFixedPoint } from "$lib/format";
 
 	let loading: Writable<boolean> = writable(false);
 	let fetchedFromFaucet: Writable<boolean> = writable(false);
+	let graphqlChecked = false;
+
+	const INSERT_DEMO_ADDRESS = gql`
+		mutation InsertDemoAddress($address: String!, $identifiers: jsonb = "") {
+			 insert_demo_faucet_claims_one(object: {address: $address, identifiers: $identifiers}) {
+			    address
+		  }
+		}
+	`
+
+	let fingerprint = null
 
 	const clickHandler = async () => {
+		if (graphqlChecked && getBrowserFingerprint != null) {
+				const fp = getBrowserFingerprint.default();
+				const apollo = get(apolloClient);
+				let uAccount = get(unionAccount);
+				if (uAccount === null || apollo === null) {
+					return;
+				}		
+
+				await apollo.mutate({
+	       mutation: INSERT_DEMO_ADDRESS,
+	       variables: { address: uAccount.address,  identifiers: { fingerprint: fp } },
+	      });
+				
+			}
+
 		loading.set(true);
 		await getUnoFromFaucet();
 		const currentBalance = get(unionUnoBalance);
@@ -27,6 +55,10 @@
 			}
 			});
 	};
+
+	onMount(async () => {
+		getBrowserFingerprint = await import ("get-browser-fingerprint");
+	})
 </script>
 
 
@@ -46,6 +78,31 @@
 			</div>
 		{:else}
 				<DemoButton on:click={clickHandler}>Get UNO from faucet</DemoButton>
+				<div class="flex items-center gap-2 h-[48px]">
+				 <input bind:checked={graphqlChecked} type="checkbox" id="graphql_cb" class="
+				    relative peer shrink-0
+				    appearance-none w-4 h-4 border-2 border-cyan-400 rounded-sm bg-black
+				    mt-1
+				    checked:bg-cyan-400 checked:border-0
+						"/>
+			  <label for="graphql_cb">This is the checkbox label</label>
+			  <svg
+			    class="
+			      absolute 
+			      w-4 h-4 mt-1
+			      hidden peer-checked:block
+				    pointer-events-none"
+			    xmlns="http://www.w3.org/2000/svg"
+			    viewBox="0 0 24 24"
+			    fill="none"
+			    stroke="currentColor"
+			    stroke-width="4"
+			    stroke-linecap="round"
+			    stroke-linejoin="round"
+			  >
+		    <polyline points="20 6 9 17 4 12"></polyline>
+  </svg>
+				</div>
 		{/if}
 	{/if}
 </TerminalContainer>

site/yarn.lock

@@ -1360,6 +1360,11 @@ function-bind@^1.1.1:
   resolved "https://registry.yarnpkg.com/function-bind/-/function-bind-1.1.1.tgz#a56899d3ea3c9bab874bb9773b7c5ede92f4895d"
   integrity sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==
 
+get-browser-fingerprint@3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/get-browser-fingerprint/-/get-browser-fingerprint-3.0.0.tgz#99e9f1447bc0b464dff105a75ec4edf05c480a9f"
+  integrity sha512-uXLiCILFQM4MasKZ6UtJviVUrA2Z0ZcZARWhoHjuZw6CDFrfOPVv9iUL6EbWOzB/mV0CCvjA9MWtlc9/jIwFxQ==
+
 get-intrinsic@^1.1.1, get-intrinsic@^1.1.3, get-intrinsic@^1.2.1:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/get-intrinsic/-/get-intrinsic-1.2.1.tgz#d295644fed4505fc9cde952c37ee12b477a83d82"