chore: save progress

unionlabs · May 22, 2024 · 2ce5f1a · 2ce5f1a
1 parent 4bc8ead
commit 2ce5f1a
Show file tree

Hide file tree

Showing 9 changed files with 104 additions and 66 deletions.
diff --git a/app/app.nix b/app/app.nix
@@ -9,7 +9,7 @@
     {
       packages = {
         app = unstablePkgs.buildNpmPackage {
-          npmDepsHash = "sha256-sUUs9Z0f03cZXRYvnIC09OetVH50xzFQa4UzoGctOMY=";
+          npmDepsHash = "sha256-33VI+y9QxErD4gqy9d26+KIMwZbtRgDK9Aq+VhAC+n4=";
           src = ./.;
           sourceRoot = "app";
           npmFlags = [ "--legacy-peer-deps" ];

diff --git a/app/package-lock.json b/app/package-lock.json
diff --git a/app/package.json b/app/package.json
@@ -33,6 +33,8 @@
     "@union/client": "npm:@jsr/union__client@^0.0.1-rc.9",
     "@urql/exchange-graphcache": "^7.1.0",
     "@urql/exchange-persisted": "^4.3.0",
+    "@urql/exchange-refocus": "^1.1.0",
+    "@urql/exchange-request-policy": "^1.2.0",
     "@urql/exchange-retry": "^1.3.0",
     "@urql/svelte": "^4.2.0",
     "@wagmi/connectors": "^5.0.3",

diff --git a/app/src/lib/graphql/client.ts b/app/src/lib/graphql/client.ts
@@ -9,8 +9,10 @@ import {
 import { URLS } from "$lib/constants"
 import { devtoolsExchange } from "@urql/devtools"
 import { retryExchange } from "@urql/exchange-retry"
+import { refocusExchange } from "@urql/exchange-refocus"
 import type { TadaPersistedDocumentNode } from "gql.tada"
 import { persistedExchange } from "@urql/exchange-persisted"
+import { requestPolicyExchange } from "@urql/exchange-request-policy"
 import { createClient as createWSClient, type SubscribePayload } from "graphql-ws"
 
 const isDevelopment = import.meta.env.DEV
@@ -50,7 +52,19 @@ export const graphqlClient = new Client({
   requestPolicy: import.meta.env.DEV ? "network-only" : "cache-and-network",
   exchanges: [
     devtoolsExchange,
-    ...productionOnlyExchanges,
+    refocusExchange(),
+    requestPolicyExchange({
+      ttl: 60 * 1_000, // 1 minute
+      shouldUpgrade: operation => operation.context.requestPolicy !== "cache-first"
+    }),
+    cacheExchange,
+    persistedExchange({
+      enableForMutation: true,
+      enableForSubscriptions: true,
+      enforcePersistedQueries: true,
+      preferGetForPersistedQueries: true,
+      generateHash: async (_, document) => (document as TadaPersistedDocumentNode).documentId
+    }),
     fetchExchange,
     subscriptionExchange({
       forwardSubscription: operation => ({
@@ -64,7 +78,7 @@ export const graphqlClient = new Client({
       maxDelayMs: 15_000,
       maxNumberAttempts: 2,
       initialDelayMs: 1_000,
-      retryIf: error => !!error?.networkError?.message
+      retryIf: error => !!error?.networkError
     }),
     debugExchange
   ],

diff --git a/app/src/lib/utilities/index.ts b/app/src/lib/utilities/index.ts
@@ -2,6 +2,18 @@ export function raise(error: unknown): never {
   throw typeof error === "string" ? new Error(error) : error
 }
 
+// remove duplicates from an array of objects by a key
+export const removeArrayDuplicates = <T>(array: Array<T>, key: keyof T): Array<T> =>
+  array.reduce(
+    (accumulator, current) => {
+      if (!accumulator.find(item => item[key] === current[key])) {
+        accumulator.push(current)
+      }
+      return accumulator
+    },
+    [] as Array<T>
+  )
+
 export const elementHasFocus = (element: Element | null): element is HTMLElement =>
   element === document.activeElement
 

diff --git a/app/src/routes/+page.svelte b/app/src/routes/+page.svelte
@@ -1,77 +1,63 @@
 <script lang="ts">
 import {
   flexRender,
-  type Updater,
-  type FilterFn,
   type ColumnDef,
   getCoreRowModel,
-  ColumnFiltering,
   type TableOptions,
-  type SortingState,
   createSvelteTable,
   getFilteredRowModel,
   getPaginationRowModel
 } from "@tanstack/svelte-table"
-import {
-  type Range,
-  Virtualizer,
-  createVirtualizer,
-  observeElementRect,
-  defaultKeyExtractor
-} from "@tanstack/svelte-virtual"
-import {
-  cosmosBlocksQuery,
-  cosmosBlocksSubscription
-} from "$lib/graphql/documents/cosmos-blocks.ts"
 import { Shine } from "svelte-ux"
 import { URLS } from "$lib/constants"
 import { writable } from "svelte/store"
 import { CHAIN_MAP } from "$lib/constants/chains"
 import * as Table from "$lib/components/ui/table"
+import { removeArrayDuplicates } from "$lib/utilities"
 import { rankItem } from "@tanstack/match-sorter-utils"
 import type { Override } from "$lib/utilities/types.ts"
-import { afterUpdate, onDestroy, onMount } from "svelte"
-import * as Card from "$lib/components/ui/card/index.ts"
 import { cn, flyAndScale } from "$lib/utilities/shadcn.ts"
-import ChevronLeft from "virtual:icons/lucide/chevron-left"
-import * as Select from "$lib/components/ui/select/index.ts"
+import { createVirtualizer } from "@tanstack/svelte-virtual"
 import Button from "$lib/components/ui/button/button.svelte"
 import ChevronRight from "virtual:icons/lucide/chevron-right"
 import DoubleArrowLeft from "virtual:icons/lucide/chevrons-left"
 import DoubleArrowRight from "virtual:icons/lucide/chevrons-right"
 import { dollarize, relativeTime } from "$lib/utilities/format.ts"
+import { cosmosBlocksQuery } from "$lib/graphql/documents/cosmos-blocks.ts"
 import { getContextClient, queryStore, subscriptionStore } from "@urql/svelte"
 
-// $: cosmosBlocks = subscriptionStore({
-//   client: getContextClient(),
-//   query: cosmosBlocksSubscription,
-//   variables: { limit: 25 },
-// })
+$: initialCosmosBlocks = queryStore({
+  query: cosmosBlocksQuery,
+  variables: { limit: 10 },
+  client: getContextClient(),
+  context: { url: URLS.GRAPHQL }
+})
 
-$: queryBlocksCount = 10
+$: initialBlocksData = $initialCosmosBlocks?.data?.data ?? []
 
 $: cosmosBlocks = queryStore({
   query: cosmosBlocksQuery,
   client: getContextClient(),
   context: { url: URLS.GRAPHQL },
   variables: { limit: 1 }
 })
-onMount(() => {
-  return () => (queryBlocksCount = 1)
-})
-// refetch every 6 seconds
-setInterval(() => {
-  cosmosBlocks.reexecute({ requestPolicy: "network-only" })
-}, 6_500)
 
-$: blocksData = $cosmosBlocks?.data?.data ?? []
+$: [blockData] = $cosmosBlocks?.data?.data ?? []
 /**
  * we use this constructed type because importing the generated graphql types is too slow given the file size
  */
-type CosmosBlock = Override<(typeof blocksData)[number], { time: string }>
+type CosmosBlock = Override<typeof blockData, { time: string }>
 
-$: blocks = writable<any>([])
-$: if ($cosmosBlocks?.data) blocks.update(() => [...$blocks, ...blocksData])
+$: blocksStore = writable<Array<CosmosBlock>>(initialBlocksData as Array<CosmosBlock>)
+$: if ($cosmosBlocks?.data) {
+  blocksStore.update(currentBlocks =>
+    removeArrayDuplicates([blockData as CosmosBlock, ...currentBlocks], "height")
+  )
+}
+// refetch every 6 seconds
+setInterval(() => {
+  cosmosBlocks.reexecute({ requestPolicy: "network-only" })
+}, 6_000)
 
 const defaultColumns: Array<ColumnDef<CosmosBlock>> = [
   {
@@ -86,7 +72,7 @@ const defaultColumns: Array<ColumnDef<CosmosBlock>> = [
     cell: info =>
       flexRender(Button, {
         variant: "link",
-        class: "",
+        class: "hover:cursor-pointer",
         href: `https://api.testnet.bonlulu.uno/cosmos/base/tendermint/v1beta1/blocks/${info.getValue()}`,
         target: "_blank",
         rel: "noopener noreferrer",
@@ -114,11 +100,11 @@ const defaultColumns: Array<ColumnDef<CosmosBlock>> = [
 ]
 
 const options = writable<TableOptions<CosmosBlock>>({
-  data: $blocks as unknown as Array<CosmosBlock>,
-  columns: defaultColumns,
+  data: $blocksStore,
   // debugTable: true,
   enableHiding: true,
   enableFilters: true,
+  columns: defaultColumns,
   autoResetPageIndex: true, // Automatically update pagination when data or page size changes
   enableColumnFilters: true,
   enableColumnResizing: true,
@@ -131,21 +117,21 @@ const options = writable<TableOptions<CosmosBlock>>({
 let virtualListElement: HTMLDivElement
 
 const rerender = () =>
-  options.update(options => ({ ...options, data: $blocks as unknown as Array<CosmosBlock> }))
+  options.update(options => ({ ...options, data: $blocksStore as unknown as Array<CosmosBlock> }))
 
 const table = createSvelteTable(options)
 
-$: blocks.subscribe(() => {
-  if (!$blocks) return
-  $table.setPageSize($blocks.length)
+$: blocksStore.subscribe(() => {
+  if (!$blocksStore) return
+  $table.setPageSize($blocksStore.length)
   rerender()
 })
 
 $: rows = $table.getRowModel().rows
 
 $: virtualizer = createVirtualizer<HTMLDivElement, HTMLTableRowElement>({
-  count: rows.length,
   overscan: 20,
+  count: rows.length,
   estimateSize: () => 34,
   getScrollElement: () => virtualListElement
 })
@@ -172,7 +158,7 @@ $: virtualizer = createVirtualizer<HTMLDivElement, HTMLTableRowElement>({
       )}
     >
       <Table.Root class="overflow-auto size-full mx-auto bg-black/70 rounded-md max-w-[1000px]">
-        <Table.Header class="outline outline-1 outline-union-accent-400/20 sticky">
+        <Table.Header class="outline outline-1 outline-union-accent-400/50 sticky">
           {#each $table.getHeaderGroups() as headerGroup}
             <Table.Row class="font-bold text-md">
               {#each headerGroup.headers as header}
@@ -190,7 +176,11 @@ $: virtualizer = createVirtualizer<HTMLDivElement, HTMLTableRowElement>({
         <Table.Body>
           {#each $virtualizer.getVirtualItems() as row, index (row.index)}
             <Table.Row
-              class={cn('h-5', 'border-b-[1px] border-solid border-b-union-accent-400/10')}
+              class={cn(
+                'h-5',
+                'border-b-[1px] border-solid border-b-union-accent-400/10',
+                index % 2 === 0 ? 'bg-background' : 'border-gray-950',
+              )}
             >
               {#each rows[row.index].getVisibleCells() as cell (cell.id)}
                 <Table.Cell class="px-4 py-0">

diff --git a/app/src/routes/faucet/+page.svelte b/app/src/routes/faucet/+page.svelte
@@ -74,7 +74,7 @@ const superFormResults = superForm(
           duration: 5_000,
           className: "text-sm p-2.5"
         })
-      }, debounceDelay)(event),
+      }, debounceDelay)(),
     delayMs: 7_500,
     timeoutMs: 10_000,
     resetForm: false,
@@ -140,13 +140,14 @@ $: newTransfers =
     method="POST"
     class={cn(
       'space-y-8 max-w-[580px]',
-      $cosmosStore.address ? 'sm:w-[480px] w-[425px]' : 'sm:w-[460px] w-[400px]',
+      $cosmosStore.address ? 'sm:w-[480px] w-[380px]' : 'sm:w-[460px] w-[400px]',
+      'px-1',
       ($delayed || $submitting || $message?.status === 'success') && 'invisible',
     )}
   >
     <Form.Field form={superFormResults} name="address">
       <Form.Control let:attrs>
-        <Form.Label class="text-lg">Address</Form.Label>
+        <Form.Label class="sm:text-lg text-md">Address</Form.Label>
         <div class="relative">
           <Input
             {...attrs}
@@ -173,7 +174,7 @@ $: newTransfers =
             class={cn(
               'peer',
               submissionStatus === 'submitting' && 'animate-pulse',
-              'sm:text-md text-sm w-full h-10 sm:h-11 disabled:opacity-90 disabled:bg-stone-900',
+              'sm:text-md text-xs w-full h-10 sm:h-11 disabled:opacity-90 disabled:bg-stone-950',
               'rounded-md border border-slate-800 bg-neutral-950 p-3.5 text-slate-100 transition-colors placeholder:select-none placeholder:text-neutral-600 focus:border-[#8678F9]',
               'focus:outline-none outline-transparent focus-visible:outline-none ring-0 focus:ring-0 focus-visible:ring-0',
             )}
@@ -211,7 +212,7 @@ $: newTransfers =
         </div>
       </Form.Control>
       <Form.FieldErrors class="field-errors peer" />
-      <Form.Description class="block peer-[&:not(:empty)]:hidden text-sm">
+      <Form.Description class="block peer-[&:not(:empty)]:hidden sm:text-sm text-xs ml-2">
         A valid Union wallet address
       </Form.Description>
     </Form.Field>
@@ -220,7 +221,7 @@ $: newTransfers =
         disabled={$submitting || $form.address.length === 0}
         class={cn(
           submissionStatus === 'submitting' && 'animate-pulse',
-          'text-md font-bold w-full max-w-32 tracking-wider',
+          'sm:text-md text-sm font-bold w-full sm:max-w-32 max-w-20 tracking-wider ml-1',
         )}
       >
         Submit
@@ -234,21 +235,13 @@ $: newTransfers =
         target="_blank"
         rel="noopener noreferrer"
         href="https://git-faucets.web.val.run"
-        class="text-sm font-bold px-0 my-auto !text-neutral-300"
+        class="sm:text-sm text-xs font-bold px-0 my-auto !text-neutral-300"
       >
         Faucets for other assets & chains
         <ExternalLinkIcon class="size-4 ml-2" />
       </Button>
     </div>
   </form>
-
-  {#if $unionTransfers?.status === 'success'}
-    {#each newTransfers as transfer}
-      <pre>{transfer?.timestamp}</pre>
-    {/each}
-  {/if}
-
-  <section class="mt-6 hidden sm:block w-full max-w-[520px] text-sm"></section>
 </main>
 
 <style lang="postcss">

diff --git a/app/src/styles/index.css b/app/src/styles/index.css
@@ -2,7 +2,7 @@
 @import url('./reset.css');
 @import url('./tailwind.css');
 
-@media not print {
+/* @media not print {
   @media(min-width: 500px) {
     html {
       zoom: 100%;
@@ -14,7 +14,7 @@
     }
   }
 
-}
+} */
 
 /* source: https://heropatterns.com */
 body {

diff --git a/dictionary.txt b/dictionary.txt
@@ -347,6 +347,7 @@ consensuskeeper
 consensusparamkeeper
 consensusparamtypes
 consensys
+consola
 consts
 conv
 converstion