Merge pull request #57 from gnosischain/dev

feat: set up envio indexer in production

.env.example

@@ -1 +1,2 @@
-NEXT_PUBLIC_WC_PROJECT_ID=
+NEXT_PUBLIC_WC_PROJECT_ID=
+NEXT_PUBLIC_GRAPHQL_URL=http://localhost:8080/v1/graphql

.github/workflows/dev_deploy.yml

@@ -39,7 +39,7 @@ jobs:
           pip install awscli --upgrade --user
 
       - name: Build App
-        run: yarn update-deposits && yarn build
+        run: yarn build
 
       - name: Install Playwright Browsers
         run: yarn playwright install

app/connected/page.tsx

@@ -10,53 +10,43 @@ import { Suspense } from "react";
 export default function Page() {
   return (
     <Suspense fallback={<div>Loading...</div>}>
-      <main className="flex h-full lg:h-screen flex-col items-center justify-center">
-        <div className="w-full lg:w-[775px] bg-[#133629CC] h-screen md:h-full lg:h-auto backdrop-blur-sm p-4 lg:rounded-2xl flex gap-y-6 flex-col justify-start items-center">
-          <div className="w-full gap-x-4 flex justify-between">
-            <NavigationTab value="deposit" />
-            <NavigationTab value="dappnode" />
-            <NavigationTab value="withdrawal" />
-            <NavigationTab value="validator" />
+      <main className='flex min-h-screen lg:h-screen flex-col items-center justify-center'>
+        <div className='w-full lg:w-[775px] bg-[#133629CC] h-full md:h-full lg:h-auto backdrop-blur-sm p-4 lg:rounded-2xl flex gap-y-6 flex-col justify-start items-center'>
+          <div className='w-full gap-x-4 flex justify-between'>
+            <NavigationTab value='deposit' />
+            <NavigationTab value='dappnode' />
+            <NavigationTab value='withdrawal' />
+            <NavigationTab value='validator' />
           </div>
           <Dashboard />
-          <div className="w-full flex justify-between">
-            <div className="w-1/4 hidden lg:flex">
-              <Image src="/logo.svg" alt="Gnosis Logo" width={45} height={24} />
-              <div className="flex flex-col ml-2">
+          <div className='w-full flex flex-col-reverse sm:flex-row justify-between'>
+            <div className='flex justify-center sm:justify-start mt-4 sm:mt-0'>
+              <Image src='/logo.svg' alt='Gnosis Logo' width={45} height={24} />
+              <div className='flex flex-col ml-2 justify-center'>
                 <Image
-                  src="/gnosis.svg"
-                  alt="Gnosis Text"
+                  src='/gnosis.svg'
+                  alt='Gnosis Text'
                   width={100}
                   height={24}
+                  className='mb-1 mt-0.5'
                 />
-                <p className="text-[6px] lg:text-[8px] mt-2">
+                <p className='text-[6px] leading-[6px] sm:text-[8px] sm:leading-[8px] mt-1 '>
                   BEACON CHAIN DEPOSIT
                 </p>
               </div>
             </div>
-            <Link
-              target="_blank"
-              className="w-2/4 flex justify-center text-sm lg:text-base items-center underline hover:text-slate-200"
-              href={"https://docs.gnosischain.com/node/"}
-            >
-              Learn more about the Gnosis Beacon Chain
-            </Link>
-            <div className="w-2/4 lg:w-1/4 flex justify-center items-center">
-              <DropDown />
-            </div>
-          </div>
-          <div className="w-full flex lg:hidden justify-center">
-            <Image src="/logo.svg" alt="Gnosis Logo" width={45} height={24} />
-            <div className="flex flex-col ml-2">
-              <Image
-                src="/gnosis.svg"
-                alt="Gnosis Text"
-                width={100}
-                height={24}
-              />
-              <p className="text-[6px] lg:text-[8px] mt-2">
-                BEACON CHAIN DEPOSIT
-              </p>
+
+            <div className='flex flex-1'>
+              <Link
+                target='_blank'
+                className='flex flex-1 justify-center text-sm lg:text-base items-center underline hover:text-slate-200'
+                href={'https://docs.gnosischain.com/node/'}
+              >
+                Learn more about the Gnosis Beacon Chain
+              </Link>
+              <div className='flex justify-center items-center'>
+                <DropDown />
+              </div>
             </div>
           </div>
         </div>

app/page.tsx

@@ -3,7 +3,7 @@ import Link from "next/link";
 
 export default function Page() {
   return (
-    <main className="flex h-screen flex-col items-center justify-center">
+    <main className="flex min-h-screen flex-col items-center justify-center">
       <div className="w-full lg:w-[625px] h-full lg:h-auto bg-green backdrop-blur-sm p-8 lg:rounded-2xl flex gap-y-4 flex-col justify-start items-center">
         <div className="w-full lg:w-[550px] h-60 border-b flex gap-y-2 flex-col justify-end items-center pb-2">
           <Image src="/logo.svg" alt="Gnosis Logo" width={100} height={24} />

app/providers.tsx

@@ -4,13 +4,22 @@ import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { useState, type ReactNode } from "react";
 import { WagmiProvider } from "wagmi";
 import { config } from "@/wagmi";
+import { ApolloClient, InMemoryCache } from '@apollo/client';
+import { ApolloProvider } from '@apollo/client/react';
+
+const client = new ApolloClient({
+  uri: process.env.NEXT_PUBLIC_GRAPHQL_URL,
+  cache: new InMemoryCache(),
+});
 
 export function Providers(props: { children: ReactNode }) {
   const [queryClient] = useState(() => new QueryClient());
 
   return (
     <WagmiProvider config={config}>
-      <QueryClientProvider client={queryClient}>{props.children}</QueryClientProvider>
+      <ApolloProvider client={client}>
+        <QueryClientProvider client={queryClient}>{props.children}</QueryClientProvider>
+      </ApolloProvider>
     </WagmiProvider>
   );
 }

components/dashboard.tsx

@@ -129,7 +129,7 @@ export default function Dashboard() {
           ? "Check Validators Status"
           : "Gnosis Beacon Chain Deposit"}
       </p>
-      <div className="w-full flex flex-col-reverse lg:flex-row mt-4">
+      <div className="w-full h-full flex flex-col-reverse lg:flex-row mt-4">
         <div className="w-full lg:w-2/6 flex flex-col text-base">
           <div
             id="accounts"
@@ -192,7 +192,7 @@ export default function Dashboard() {
           </div>
         </div>
         <div
-          className={`w-full ${
+          className={`w-full h-full ${
             searchParams.get("state") === "deposit" ? "block" : "hidden"
           }`}
         >
@@ -214,7 +214,7 @@ export default function Dashboard() {
           />
         </div>
         <div
-          className={`w-full ${
+          className={`w-full h-full ${
             searchParams.get("state") === "withdrawal" ? "block" : "hidden"
           }`}
         >
@@ -225,7 +225,7 @@ export default function Dashboard() {
           />
         </div>
         <div
-          className={`w-full ${
+          className={`w-full h-full ${
             searchParams.get("state") === "validator" ? "block" : "hidden"
           }`}
         >

components/dropdown.tsx

@@ -9,28 +9,50 @@ import Image from "next/image";
 
 export default function DropDown() {
   return (
-    <div className="w-56 text-right">
-      <Menu as="div" className="relative inline-block text-left">
-        <Transition as={Fragment} enter="transition ease-out duration-100" enterFrom="transform opacity-0 scale-95" enterTo="transform opacity-100 scale-100" leave="transition ease-in duration-75" leaveFrom="transform opacity-100 scale-100" leaveTo="transform opacity-0 scale-95">
-          <MenuItems className="absolute right-0 bottom-0 mb-10 w-56 origin-bottom-right rounded-md bg-white shadow-lg ring-1 ring-black/5 focus:outline-none">
-            <div className="px-1 py-1 ">
+    <div className='text-right'>
+      <Menu as='div' className='relative inline-block text-left'>
+        <Transition
+          as={Fragment}
+          enter='transition ease-out duration-100'
+          enterFrom='transform opacity-0 scale-95'
+          enterTo='transform opacity-100 scale-100'
+          leave='transition ease-in duration-75'
+          leaveFrom='transform opacity-100 scale-100'
+          leaveTo='transform opacity-0 scale-95'
+        >
+          <MenuItems className='absolute right-0 bottom-0 mb-10 w-56 origin-bottom-right rounded-md bg-white shadow-lg ring-1 ring-black/5 focus:outline-none'>
+            <div className='px-1 py-1 '>
               <MenuItem>
-                  <Link target="_blank" className="text-gray-900 group flex w-full items-center rounded-md px-2 py-2 text-sm data-[focus]:bg-stone-100" href={"https://docs.gnosischain.com/faq/Node%20FAQs/generalQuestions"}>
-                    <QuestionMarkCircleIcon className="h-5 w-5 mr-2" />
-                    FAQ
-                  </Link>
+                <Link
+                  target='_blank'
+                  className='text-gray-900 group flex w-full items-center rounded-md px-2 py-2 text-sm data-[focus]:bg-stone-100'
+                  href={
+                    'https://docs.gnosischain.com/faq/Node%20FAQs/generalQuestions'
+                  }
+                >
+                  <QuestionMarkCircleIcon className='h-5 w-5 mr-2' />
+                  FAQ
+                </Link>
               </MenuItem>
               <MenuItem>
-                  <Link target="_blank" className="text-gray-900 group flex w-full items-center rounded-md px-2 py-2 text-sm data-[focus]:bg-stone-100" href={"https://docs.gnosischain.com/node"}>
-                    <DocumentIcon className="h-5 w-5 mr-2" />
-                    Official Docs
-                  </Link>
+                <Link
+                  target='_blank'
+                  className='text-gray-900 group flex w-full items-center rounded-md px-2 py-2 text-sm data-[focus]:bg-stone-100'
+                  href={'https://docs.gnosischain.com/node'}
+                >
+                  <DocumentIcon className='h-5 w-5 mr-2' />
+                  Official Docs
+                </Link>
               </MenuItem>
               <MenuItem>
-                  <Link target="_blank" className="text-gray-900 group flex w-full items-center rounded-md px-2 py-2 text-sm data-[focus]:bg-stone-100" href={"https://gnosisvalidator.substack.com"}>
-                    <NewspaperIcon className="h-5 w-5 mr-2" />
-                    Validator Newsletter
-                  </Link>
+                <Link
+                  target='_blank'
+                  className='text-gray-900 group flex w-full items-center rounded-md px-2 py-2 text-sm data-[focus]:bg-stone-100'
+                  href={'https://gnosisvalidator.substack.com'}
+                >
+                  <NewspaperIcon className='h-5 w-5 mr-2' />
+                  Validator Newsletter
+                </Link>
               </MenuItem>
               <MenuItem>
                   <Link target="_blank" className="text-gray-900 group flex w-full items-center rounded-md px-2 py-2 text-sm data-[focus]:bg-stone-100" href={"https://discord.gg/gnosis"}>
@@ -42,9 +64,12 @@ export default function DropDown() {
           </MenuItems>
         </Transition>
         <div>
-          <Menu.Button className="inline-flex w-full justify-center items-center rounded-md bg-white text-black px-4 py-2 text-xs lg:text-sm font-medium hover:bg-stone-100 focus:outline-none focus-visible:ring-2 focus-visible:ring-white/75">
+          <Menu.Button className='inline-flex w-full justify-center items-center rounded-md bg-white text-black px-4 py-2 text-xs lg:text-sm font-medium hover:bg-stone-100 focus:outline-none focus-visible:ring-2 focus-visible:ring-white/75 whitespace-nowrap'>
             Stay Updated
-            <ChevronUpIcon className="-mr-1 ml-2 h-5 w-5 text-violet-200 hover:text-violet-100" aria-hidden="true" />
+            <ChevronUpIcon
+              className='-mr-1 ml-2 h-5 w-5 text-violet-200 hover:text-violet-100'
+              aria-hidden='true'
+            />
           </Menu.Button>
         </div>
       </Menu>

components/navigation-tab.tsx

@@ -21,7 +21,7 @@ export default function NavigationTab({ value }: NavigationTabProps) {
   const { replace } = useRouter();
 
   const handleClick = () => {
-    const params = new URLSearchParams(searchParams);
+    const params = new URLSearchParams(Array.from(searchParams.entries()));
     params.set("state", value);
     replace(`${pathname}?${params.toString()}`);
   };

data/deposit_data-1717082979 copy.json

@@ -0,0 +1 @@
+[{"pubkey": "86af20cf388d49a62d12598432cf78857124044a69c9b515eefba9cbf2612003c026659b204a5b7b4785dd1f47049c2b", "withdrawal_credentials": "01000000000000000000000097d2eeb65da0c37dc0f43ff4691e521673efadfd", "amount": 32000000000, "signature": "a8b2ba848500995f6da3898514dd123b7d99d46c7650e0b6938ef45ca52690776a0f8fceae54bf00100bd6a410680364170ed63cce99ce332bac0539650728448b79f6c026633f0fcb7dcb9c1ac3640bf9de6dd0773b7fe8cf4f27e98099199b", "deposit_message_root": "67992c51eb8ce1dce9d62558a366e806418489701330365f6f36de08f20639b9", "deposit_data_root": "62a79a7858aa9a8cff313b285d5a40c8938aeee38b84130ce32670a37c2505e1", "fork_version": "0000006f", "network_name": "chiado", "deposit_cli_version": "2.3.0"}, {"pubkey": "851fcc82b615dca7f8e40e589f6b3d3384a0b60edf280d816c459558def2ea7bd41e7c8d8086806036e7dfc48f739cc5", "withdrawal_credentials": "01000000000000000000000097d2eeb65da0c37dc0f43ff4691e521673efadfd", "amount": 32000000000, "signature": "b1b5349c185ea7821e1e8bb54eebddc6f88410ed5cef3038d31629ed7b66cb7fcc40aa322b8150348df4be988ebfb207051f0c80260738313a4a99b711a1ce04ab8a9da6b55e5c7fa4e1e745152c97b9ea65cace2372e1355baa115c5f770701", "deposit_message_root": "f0d2f2c34e66c4548fd9a1ac65e690288decc0e70642fbe1c39704c70b804882", "deposit_data_root": "bef8e75409487ea86aad4548e07903d13c2782cc4e9d6f7efb68e137fe9c3971", "fork_version": "0000006f", "network_name": "chiado", "deposit_cli_version": "2.3.0"}, {"pubkey": "9925577c4bc84b62cacf451bebbb6260330e1e17b254a2ce7601b7f7efb8e90f44a79f74edfec263264c2ef72c65d7ee", "withdrawal_credentials": "01000000000000000000000097d2eeb65da0c37dc0f43ff4691e521673efadfd", "amount": 32000000000, "signature": "980e296ab176cb0fbec193926d09d40655c0c351a836d9f8f4b24e57f4c3a5d0d4c439669b54efbf3acb19f1efc2ac021230ca92b4179b9f3a6d94b1ba392bbae0cd6ab91bb13b7150adf627bf8f9b0602ff66b780c471075f4b7e4d73b6c493", "deposit_message_root": "07a062586c499166c44d9b915ae9d7a738526ced3d78ed17300d8c9fd3dd75af", "deposit_data_root": "b5aba8ce4fc53982e20dadf01446dcb01b92ef25341537458d66179acd366c70", "fork_version": "0000006f", "network_name": "chiado", "deposit_cli_version": "2.3.0"}, {"pubkey": "866a30b859e2d8a0eafdc727033d380dc6620ae7ec13270fd2c4fd69ef97a43b43574386a23d040f75bb93a3f7a87829", "withdrawal_credentials": "01000000000000000000000097d2eeb65da0c37dc0f43ff4691e521673efadfd", "amount": 32000000000, "signature": "b59ebda8dd528e4b7ee3bb58b6a77a58a63594444c67c17402bf81e8eb16e8c6a45f5ccb6df19a3889403128b4c87eb01235417e4ff2af349336fbedb7763c6395fed39798a7b1293fad8efa2422dbb10fe48a468af58c9120ff448ee30a729a", "deposit_message_root": "08aaf06ac3b3450426c8b2da5c9a91906050acf8fd354285b616000d5a4c6850", "deposit_data_root": "bbe27d7c91ac3787e3ec47ae2dc5af1e347537415689f8a310624edf34da0f0d", "fork_version": "0000006f", "network_name": "chiado", "deposit_cli_version": "2.3.0"}, {"pubkey": "b1a63c5cf30185413a4736b0a0cda02e12abaefe11bce98b97da5518d7926ea3b931b9dc1ad4b9ac75c3d6516c6a3c06", "withdrawal_credentials": "01000000000000000000000097d2eeb65da0c37dc0f43ff4691e521673efadfd", "amount": 32000000000, "signature": "a5838820751810d96758b5fdc9e228fe7028e68d39bed53bcb0f8747b2e615c8c9e99d0ca8f30fbbb6407359423f6141003e2830d19c63d231b2564c8d433a6bad80f5744d04d79ef3a4e8f75a1d143f00d156a8239f7e6596a7658245474ad8", "deposit_message_root": "bed00910a7959fbed5564ce4c03a38717510840d664aace87d70b986eae4dd35", "deposit_data_root": "6e59c54e34f922e368b8660d762779a9eaf3f5bdb0720de87114b3799edbf16f", "fork_version": "0000006f", "network_name": "chiado", "deposit_cli_version": "2.3.0"}, {"pubkey": "97362fc02f993f9f0e43efeb7c4ab95506e79dfc87de551a7096e561967498e79059a3465c5a90a8a126646eb7d0c269", "withdrawal_credentials": "01000000000000000000000097d2eeb65da0c37dc0f43ff4691e521673efadfd", "amount": 32000000000, "signature": "aa1d1bcfb23e75cf42a10105ddb46d05909f1e71cd585119356c19114be317b2818ca229a2a171c6b056a74eb7b9a3ba0066062b1c7a5f6f4db5aa78549d995533dd6a7af329c70cdcae0415bd79f5c1b5f0cd509ce19b42d4c36bbea844c12a", "deposit_message_root": "4fede17101a2542be0658296162788982b45bc35e1d843b1349d3d59ac001ed6", "deposit_data_root": "ee4613ad45919ad400ca40a5f66f6d10572326d4811d19870f58ab937f4127c1", "fork_version": "0000006f", "network_name": "chiado", "deposit_cli_version": "2.3.0"}, {"pubkey": "aaae1c216a41b1b491e871cd1dc837727da2efddced25bbd5dea6797db53f4dbfb2c7bb12b5a473b756352e4687058df", "withdrawal_credentials": "01000000000000000000000097d2eeb65da0c37dc0f43ff4691e521673efadfd", "amount": 32000000000, "signature": "8133d9a7077ff29387c1b909837a4b75891581c0464aa0d2d7a4a46efa1b9ebd6d1b80edb33f24ef393007add7fd88970fc691c7e7a79468508a9248d0087a4a318750877855e0197cd9870bbad7ff14d954e118d148447ba87b3f5ee1cf92ec", "deposit_message_root": "fd41b223884f4f5a78ef14db4a935cf6e049ab541ce82379b2779e36348e1e53", "deposit_data_root": "6d86b1887940829c4f7a28640be709cfc40da9281a3d410c5a7b540a0b3383fa", "fork_version": "0000006f", "network_name": "chiado", "deposit_cli_version": "2.3.0"}, {"pubkey": "a87cba597ac05a8ab831c6fce74fdefeaf92164f570e7f0619073fcb749efbc205a2b4a9fbd80b3b94ee972b76a8ce43", "withdrawal_credentials": "01000000000000000000000097d2eeb65da0c37dc0f43ff4691e521673efadfd", "amount": 32000000000, "signature": "970bec4bd46657aa889c85fe7b5d7bd3d27bed97f56cdc550eebc6aeb5ddbf892baeb58d989584033eea8a5bda49bf8007b6e75d8443fba32a75a8e274d460b3089a4820b1c055ebe6a1c2a61401fee0cd1ebd9cd4d1d58a80ae6e78e69db74f", "deposit_message_root": "368b47a8b4c785b948c0f22dda7cb454522e9bb1a72aa992afee790dd31b13cd", "deposit_data_root": "bc3c53a51c0bb0db692cebb47cf50b21681741a6c2b07bc30bc09459f0303f7c", "fork_version": "0000006f", "network_name": "chiado", "deposit_cli_version": "2.3.0"}, {"pubkey": "93d54cb922d50c506606ec493326248d35d880cd1bbf60d4ef0de3357537bc9716b1308d1090cfa605d23e4d939c2d09", "withdrawal_credentials": "01000000000000000000000097d2eeb65da0c37dc0f43ff4691e521673efadfd", "amount": 32000000000, "signature": "880f13ed4d7a55d91e18956a5ed87b58e6f461326719df3ca2220d9c3651d8f690db8094628d7de11941a8de05de3eab144cb79c18270f77be948c7a6a6cbc2b870555cb9f45740409a42b54c93eb110bd298fc032a65b0d7993f6a562f7eb04", "deposit_message_root": "a25a01a9cef46fe5b391cdf1b1d5c88b75291041cee24fb54eeeab041774a243", "deposit_data_root": "44cbc6c9d70cfcc1c9ab76f67845a67b10a6d0351a745099ab1400393ad3f17b", "fork_version": "0000006f", "network_name": "chiado", "deposit_cli_version": "2.3.0"}, {"pubkey": "895c6dacda66346d38d6578b02314727637fceb959b6a52d9410ab2bb4ea895bdc7d555a8467d450150e5fd075bdcb81", "withdrawal_credentials": "01000000000000000000000097d2eeb65da0c37dc0f43ff4691e521673efadfd", "amount": 32000000000, "signature": "8cb620940b1df61521b26721942969bd57a12692bfe26d15ebbcb7ea9db0aa931ba96edc1a57460d81535825b50753700517d5d580e9131fd8c4e219c2acb42bc7bfb796e120ef716a6023d0b61a36def37a9c3d40d4e97dd9a52dd2a1342544", "deposit_message_root": "d3947f22f015a9a0d2b4c2e31a0ea9f637adb7bf9539e5b712edc5d554f3baf6", "deposit_data_root": "32aea820de3ce475e7d9e4bd3bd011b2d896e5e28f4382385fe3954d4d1c9bb8", "fork_version": "0000006f", "network_name": "chiado", "deposit_cli_version": "2.3.0"}]

envio/.env.example

@@ -0,0 +1,2 @@
+# To create or update a token visit https://envio.dev/app/api-tokens
+ENVIO_API_TOKEN="<YOUR-API-TOKEN>"

envio/.gitignore

@@ -0,0 +1,37 @@
+*.exe
+*.obj
+*.out
+*.compile
+*.native
+*.byte
+*.cmo
+*.annot
+*.cmi
+*.cmx
+*.cmt
+*.cmti
+*.cma
+*.a
+*.cmxa
+*.obj
+*~
+*.annot
+*.cmj
+*.bak
+lib/*
+*.mlast
+*.mliast
+.vscode
+.merlin
+.bsb.lock
+/node_modules/
+benchmarks/
+artifacts
+cache
+generated
+logs
+*.bs.js
+*.bs.mjs
+*.gen.ts
+build
+.env

envio/.npmrc

@@ -0,0 +1,5 @@
+# Needed for ts build folder to have
+# access to rescript node_modules
+shamefully-hoist=true
+# Needed so users can run `pnpm install` in the root of the repo without requiring the `-w` flag.
+ignore-workspace-root-check=true

envio/README.md

@@ -0,0 +1,3 @@
+## Envio Blank Template
+
+*Please refer to the [documentation website](https://docs.envio.dev) for a thorough guide on all Envio indexer features*