tmp2

src/lib/client/graphql.ts

@@ -1,4 +1,4 @@
-import { Client, cacheExchange, fetchExchange, gql, setContextClient } from '@urql/svelte'
+import { Client, cacheExchange, fetchExchange, gql } from '@urql/core'
 import type { Fetch } from './types'
 
 export function createClient(fetch?: Fetch) {
@@ -9,10 +9,6 @@ export function createClient(fetch?: Fetch) {
   })
 }
 
-export function initializeGraphQL() {
-  setContextClient(createClient())
-}
-
 const fragments = {
   event: gql`
     fragment EventFragment on Event {
@@ -77,6 +73,22 @@ export const query = {
       }
     }
 
+    ${fragments.event}
+    ${fragments.token}
+  `,
+  account: gql`
+    query AccountQuery($address: String!, $first: Int = 5) {
+      account(id: $address) {
+        id
+        tokens(first: $first, orderBy: created, orderDirection: desc) {
+          ...TokenFragment
+          event {
+            ...EventFragment
+          }
+        }
+      }
+    }
+
     ${fragments.event}
     ${fragments.token}
   `,

src/lib/client/poap.ts

@@ -1,5 +1,10 @@
 import { getContextClient } from '@urql/svelte'
-import type { POAPEventMetadata, POAPEventWithTokens, POAPTokenWithEvent } from '$lib/types/poap'
+import type {
+  POAPAccountWithTokens,
+  POAPEventMetadata,
+  POAPEventWithTokens,
+  POAPTokenWithEvent,
+} from '$lib/types/poap'
 import { Cache } from './cache'
 import { query } from './graphql'
 import { fetchJson } from './json'
@@ -18,6 +23,7 @@ export async function fetchPOAPMetadata(eventId: string) {
 
 export interface FetchPOAPEventsVariables {
   ids: number[]
+  first?: number
 }
 
 export interface FetchPOAPEventsData {
@@ -26,6 +32,7 @@ export interface FetchPOAPEventsData {
 
 export function queryPOAPEvents(
   ids: FetchPOAPEventsVariables['ids'],
+  first: FetchPOAPEventsVariables['first'],
   initialData?: FetchPOAPEventsData,
 ) {
   return withPolling<FetchPOAPEventsData, FetchPOAPEventsVariables>(
@@ -34,6 +41,7 @@ export function queryPOAPEvents(
       query: query.events,
       variables: {
         ids,
+        first,
       },
     },
     initialData,
@@ -69,7 +77,7 @@ export interface FetchPOAPTokenVariables {
 }
 
 export interface FetchPOAPTokenData {
-  token: POAPTokenWithEvent
+  token?: POAPTokenWithEvent | null
 }
 
 export function queryPOAPToken(
@@ -87,3 +95,30 @@ export function queryPOAPToken(
     initialData,
   )
 }
+
+export interface FetchPOAPAccountVariables {
+  address: string
+  first?: number
+}
+
+export interface FetchPOAPAccountData {
+  account?: POAPAccountWithTokens | null
+}
+
+export function queryPOAPAccount(
+  address: FetchPOAPAccountVariables['address'],
+  first: FetchPOAPAccountVariables['first'],
+  initialData?: FetchPOAPAccountData,
+) {
+  return withPolling<FetchPOAPAccountData>(
+    {
+      client: getContextClient(),
+      query: query.account,
+      variables: {
+        address: address.toLowerCase(),
+        first,
+      },
+    },
+    initialData,
+  )
+}

src/lib/components/EventTokens/event-tokens.svelte

@@ -1,11 +1,12 @@
 <script lang="ts">
+  import { MaxItems } from '$lib/client/constants'
   import type { POAPEventMetadata, POAPEventWithTokens, POAPToken } from '$lib/types/poap'
   import { collectItems } from '$lib/utils/items'
   import { Token } from '../Token'
 
   export let events: POAPEventWithTokens[]
   export let metadata: Record<string, POAPEventMetadata>
-  export let max = 25
+  export let max = MaxItems
 
   const set = new Set<string>()
 
@@ -22,9 +23,7 @@
 </script>
 
 <div class="grid grid-cols-1 auto-rows-min gap-2 py-2 w-full">
-  {#each tokens as token}
-    {#key token.id}
-      <Token {token} event={eventMap[token.event.id]} metadata={metadata[token.event.id]} />
-    {/key}
+  {#each tokens as token (token.id)}
+    <Token {token} event={eventMap[token.event.id]} metadata={metadata[token.event.id]} />
   {/each}
 </div>

src/lib/components/Loadable/index.ts

@@ -0,0 +1,2 @@
+export { default as Loadable } from './loadable.svelte'
+export { default as LoadableQuery } from './loadable-query.svelte'

src/lib/components/Loadable/loadable-query.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+  import type { OperationResultStore } from '@urql/svelte'
+  import Loadable from './loadable.svelte'
+
+  type Data = $$Generic
+  // not sure why this is needed, but svelte cannot type the forwarded slot prop without it
+  type $$Slots = { default: { loaded: Data } }
+
+  export let query: OperationResultStore<Data>
+</script>
+
+<Loadable error={$query.error} data={$query.data} let:loaded>
+  <slot {loaded} />
+</Loadable>

src/lib/components/Loadable/loadable.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+  import { ErrorMessage } from '../ErrorMessage'
+  import { Loading } from '../Loading'
+
+  type T = $$Generic
+
+  export let error: unknown
+  export let data: T | null | undefined
+
+  $: loaded = data as T
+</script>
+
+<div class="grid h-full">
+  {#if error}
+    <ErrorMessage {error} />
+  {:else if loaded}
+    <slot {loaded} />
+  {:else}
+    <div class="place-self-center">
+      <Loading />
+    </div>
+  {/if}
+</div>

src/lib/components/Token/account.svelte

@@ -12,9 +12,7 @@
   <a
     class="text-indigo-700 hover:brightness-110 hover:underline transition-all"
     class:font-mono={!ens.name}
-    href="https://www.ondora.xyz/network/ethereum/accounts/{account.id}"
-    target="_blank"
-    rel="noopener noreferrer"
+    href="/account/{ens.name || account.id}"
   >
     {address}
   </a>

src/lib/components/Tokens/index.ts

@@ -0,0 +1 @@
+export { default as Tokens } from './tokens.svelte'

src/lib/components/Tokens/tokens.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+  import { MaxItems } from '$lib/client/constants'
+  import type { FetchPOAPTokensData } from '$lib/client/poap'
+  import type { POAPEventMetadata, POAPTokenWithEvent } from '$lib/types/poap'
+  import { collectItems } from '$lib/utils/items'
+  import { Token } from '../Token'
+
+  export let tokenData: FetchPOAPTokensData
+  export let metadata: Record<string, POAPEventMetadata> = {}
+  export let max = MaxItems
+
+  const set = new Set<string>()
+
+  let tokens: POAPTokenWithEvent[] = []
+
+  $: tokens = collectItems(set, max, tokens, tokenData.tokens, ({ id }) => id).sort(
+    (a, b) => Number(b.created) - Number(a.created),
+  )
+</script>
+
+<div class="grid grid-cols-1 auto-rows-min gap-2 py-2 w-full">
+  {#each tokens as token (token.id)}
+    <Token {token} event={token.event} metadata={metadata[token.event.id]} />
+  {/each}
+</div>

src/lib/server/ens.ts

@@ -1,6 +1,6 @@
 import { createPublicClient, http, isAddress } from 'viem'
 import { mainnet } from 'viem/chains'
-import { getEnsAvatar, getEnsName, normalize, getEnsText } from 'viem/ens'
+import { getEnsAvatar, getEnsName, normalize, getEnsText, getEnsAddress } from 'viem/ens'
 import type { ENSRecords } from '$lib/types/ens'
 
 const client = createPublicClient({
@@ -37,3 +37,9 @@ export async function fetchENS(address: string): Promise<ENSRecords> {
     return `https://metadata.ens.domains/mainnet/avatar/${name}`
   }
 }
+
+export function fetchReverseENS(address: string) {
+  if (isAddress(address)) return Promise.resolve(address)
+
+  return getEnsAddress(client, { name: normalize(address) })
+}

src/lib/server/poap.ts

@@ -1,9 +1,12 @@
 import { createClient, query } from '$lib/client/graphql'
 import { fetchJson } from '$lib/client/json'
 import type {
+  FetchPOAPAccountData,
+  FetchPOAPAccountVariables,
   FetchPOAPEventsData,
   FetchPOAPEventsVariables,
   FetchPOAPTokenData,
+  FetchPOAPTokenVariables,
   FetchPOAPTokensData,
   FetchPOAPTokensVariables,
 } from '$lib/client/poap'
@@ -25,16 +28,39 @@ export function fetchPOAPMetadata(eventId: number, fetch: Fetch) {
   })
 }
 
-export function fetchPOAPEvents(ids: FetchPOAPEventsVariables['ids'], fetch: Fetch) {
-  return createClient(fetch).query<FetchPOAPEventsData>(query.events, { ids }).toPromise()
+export function fetchPOAPEvents(
+  ids: FetchPOAPEventsVariables['ids'],
+  first: FetchPOAPEventsVariables['first'],
+  fetch: Fetch,
+) {
+  return createClient(fetch)
+    .query<FetchPOAPEventsData, FetchPOAPEventsVariables>(query.events, { ids, first })
+    .toPromise()
 }
 
 export function fetchPOAPTokens(first: FetchPOAPTokensVariables['first'], fetch: Fetch) {
-  return createClient(fetch).query<FetchPOAPTokensData>(query.tokens, { first }).toPromise()
+  return createClient(fetch)
+    .query<FetchPOAPTokensData, FetchPOAPTokensVariables>(query.tokens, { first })
+    .toPromise()
+}
+
+export function fetchPOAPToken(id: FetchPOAPTokenVariables['id'], fetch: Fetch) {
+  return createClient(fetch)
+    .query<FetchPOAPTokenData, FetchPOAPTokenVariables>(query.token, { id })
+    .toPromise()
 }
 
-export function fetchPOAPToken(id: number, fetch: Fetch) {
-  return createClient(fetch).query<FetchPOAPTokenData>(query.token, { id }).toPromise()
+export function fetchPOAPAccount(
+  address: FetchPOAPAccountVariables['address'],
+  first: FetchPOAPAccountVariables['first'],
+  fetch: Fetch,
+) {
+  return createClient(fetch)
+    .query<
+      FetchPOAPAccountData,
+      FetchPOAPAccountVariables
+    >(query.account, { address: address.toLowerCase(), first })
+    .toPromise()
 }
 
 export function fetchLatestEventPOAPTokens(eventIds: number[], fetch: Fetch) {
@@ -58,7 +84,7 @@ export function fetchLatestEventPOAPTokens(eventIds: number[], fetch: Fetch) {
 
 export function fetchLatestAccountPOAPToken(address: string, fetch: Fetch) {
   return createClient(fetch)
-    .query<{ account: { id: string; tokens: { id: string }[] } }>(
+    .query<{ account: { id: string; tokens: { id: string }[] } | null | undefined }>(
       gql`
         query LatestEventToken($address: String!) {
           account(id: $address) {
@@ -69,7 +95,7 @@ export function fetchLatestAccountPOAPToken(address: string, fetch: Fetch) {
           }
         }
       `,
-      { address },
+      { address: address.toLowerCase() },
     )
     .toPromise()
 }

src/lib/types/poap.ts

@@ -30,6 +30,11 @@ export interface POAPEventWithTokens extends POAPEvent {
   tokens: POAPToken[]
 }
 
+export interface POAPAccountWithTokens {
+  id: string
+  tokens: POAPTokenWithEvent[]
+}
+
 export interface POAPEventMetadata {
   id: number
   fancy_id: string

src/routes/+layout.svelte

@@ -1,8 +1,9 @@
 <script lang="ts">
-  import { initializeGraphQL } from '$lib/client/graphql'
+  import { setContextClient } from '@urql/svelte'
+  import { createClient } from '$lib/client/graphql'
   import '$lib/styles/app.css'
 
-  initializeGraphQL()
+  setContextClient(createClient())
 </script>
 
 <div class="flex flex-col min-h-[100dvh] max-h-[100dvh]">

src/routes/+page.server.ts

@@ -1,4 +1,4 @@
-import { MaxItems } from '$lib/server/constants'
+import { MaxItems } from '$lib/client/constants'
 import { fetchPOAPTokens } from '$lib/server/poap'
 import type { PageServerLoad } from './$types'
 

src/routes/+page.svelte

@@ -1,37 +1,17 @@
 <script lang="ts">
   import { queryPOAPTokens } from '$lib/client/poap'
   import { AppFrame } from '$lib/components/AppFrame'
-  import { ErrorMessage } from '$lib/components/ErrorMessage'
-  import { Loading } from '$lib/components/Loading'
-  import { Token } from '$lib/components/Token'
-  import type { POAPTokenWithEvent } from '$lib/types/poap'
-  import { collectItems } from '$lib/utils/items'
+  import { LoadableQuery } from '$lib/components/Loadable'
+  import { Tokens } from '$lib/components/Tokens'
   import type { PageData } from './$types'
 
   export let data: PageData
 
   const query = queryPOAPTokens(data.max, data.initialData).poll()
-  const set = new Set<string>()
-
-  let tokens: POAPTokenWithEvent[] = []
-
-  $: tokens = collectItems(set, data.max, tokens, $query.data?.tokens, ({ id }) => id)
 </script>
 
-<AppFrame context={{ tokenId: tokens[0].id }}>
-  <div class="grid h-full">
-    {#if $query.error}
-      <ErrorMessage error={$query.error} />
-    {:else if tokens}
-      <div class="grid grid-cols-1 auto-rows-min gap-2 py-2 w-full">
-        {#each tokens as token (token.id)}
-          <Token {token} event={token.event} />
-        {/each}
-      </div>
-    {:else}
-      <div class="place-self-center">
-        <Loading />
-      </div>
-    {/if}
-  </div>
+<AppFrame context={{ tokenId: $query.data?.tokens[0].id }}>
+  <LoadableQuery {query} let:loaded>
+    <Tokens tokenData={loaded} max={data.max} />
+  </LoadableQuery>
 </AppFrame>