Display NFTs for a Tezos wallet with Remix.

$addr.tsx

import { json, LoaderFunction, useCatch, useLoaderData } from 'remix'

type BCDBalance = {
  contract: string
  token_id: number
  name: string
  description: string
  artifact_uri: string
  display_uri: string
  thumbnail_uri: string
  balance: string
}

export let loader: LoaderFunction = async ({ params }) => {
  const data = await (
    await fetch(
      `https://api.better-call.dev/v1/account/mainnet/${params.addr}/token_balances`
    )
  ).json()

  if (!data.balances) {
    throw json({ addr: params.addr }, { status: 404 })
  }

  return {
    balances: data.balances.filter(
      (t: { balance: string }) => t.balance !== '0'
    ),
    addr: params.addr,
  }
}

type LoaderData = {
  balances: BCDBalance[]
  addr: string
}

export default function AddrPage() {
  let data = useLoaderData<LoaderData>()

  return (
    <div>
      <h1>{data.addr}</h1>
      <div>
        {data.balances.map((b) => (
          <div key={b.token_id}>
            <img
              src={b.display_uri.replace('ipfs://', 'https://ipfs.io/ipfs/')}
              width={200}
            />
            <h3>{b.name}</h3>
          </div>
        ))}
      </div>
    </div>
  )
}

export function CatchBoundary() {
  let caught = useCatch()

  let message: React.ReactNode
  console.log(caught.status, typeof caught.status)
  switch (caught.status) {
    case 404:
      message = (
        <>
          <p>Looks like you tried to view an address that doesn't exist.</p>
          <p>Check that {caught.data.addr} is a valid Tezos wallet address.</p>
        </>
      )
      break
    default:
      message = (
        <>
          <h3>
            {caught.status}: {caught.statusText}
          </h3>
          <p>There was a problem with your request!</p>
        </>
      )
  }

  return (
    <>
      <h1>Oops!</h1>
      {message}
    </>
  )
}