Merge pull request #246 from joeetwork/jet/token2022-support

Token2022 support

src/lib/components/providers/token-provider.svelte

@@ -8,47 +8,19 @@
 
     import IntersectionObserver from "svelte-intersection-observer";
 
-    export let address: string;
+    export let address: string | undefined = undefined;
+
+    export let token: any | undefined = undefined;
+
+    export let status: { isLoading: boolean; isError: boolean } | undefined =
+        undefined;
 
     let intersecting = false;
     const params = new URLSearchParams(window.location.search);
     const network = params.get("network");
     const isMainnetValue = network !== "devnet";
     const client = trpcWithQuery($page);
 
-    const token = client.token.createQuery([address, isMainnetValue], {
-        refetchOnMount: false,
-        refetchOnWindowFocus: false,
-    });
-
-    const accountInfo = client.accountInfo.createQuery(
-        [address, isMainnetValue],
-        {
-            refetchOnMount: false,
-            refetchOnWindowFocus: false,
-        }
-    );
-
-    const token2022Metadata: {
-        [key: string]: {
-            description: string;
-            image: string;
-            name: string;
-        };
-    } = {
-        "2kMpEJCZL8vEDZe7YPLMCS9Y3WKSAMedXBn7xHPvsWvi": {
-            description: "Solana's 1 true moonshot. TW: @SolarMoonSol",
-            image: "https://gateway.ipfscdn.io/ipfs/bafkreifwdwgcv6fnh5icz3wkefokatsemsojck4hftsnuf4xcfjcvagsva/",
-            name: "SolarMoon (MOON)",
-        },
-        CKfatsPMUf8SkiURsDXs7eK6GWb4Jsd6UDbs7twMCWxo: {
-            description:
-                "BonkEarn is the first of many experiments on the Token2022 standard, Bernzy sends his regards",
-            image: "https://i.imgur.com/nd9AVZ4.jpeg",
-            name: "BonkEarn (BERN)",
-        },
-    };
-
     export const metadata: UITokenMetadata = {
         address: "",
         attributes: [],
@@ -62,19 +34,26 @@
         sellerFeeBasisPoints: 0,
     };
 
-    const asset = client.asset.createQuery([address, isMainnetValue], {
-        refetchOnMount: false,
-        refetchOnWindowFocus: false,
-    });
+    let asset: any | undefined;
+
+    let deprecatedImage: any;
+
+    if (address) {
+        asset = client.asset.createQuery([address, isMainnetValue], {
+            refetchOnMount: false,
+            refetchOnWindowFocus: false,
+        });
+    }
+
+    $: data = $asset?.data || token;
 
     let element: HTMLDivElement;
 
     $: if (address === SOL) {
         metadata.name = "SOL";
         metadata.image = "/media/tokens/solana.png";
         metadata.address = SOL;
-    } else if ($asset?.data?.compressed) {
-        const data = $asset?.data;
+    } else if (data?.compressed) {
         metadata.address = data?.address || "";
         metadata.attributes = data?.attributes || [];
         metadata.creators = data?.creators || [];
@@ -94,45 +73,37 @@
         metadata.tree = data?.tree || "";
         metadata.seq = data?.seq || 0;
         metadata.leafId = data?.leafId || 0;
-    }
-    // TODO Property 'program' does not exist on type 'Buffer | ParsedAccountData'.
-    // @ts-ignore
-    else if ($accountInfo?.data?.value?.data?.program === "spl-token-2022") {
-        // const data = $accountInfo?.data?.value;
-        const data = token2022Metadata[address];
-        metadata.name = data.name || "";
-        metadata.description = data.description || "";
-        metadata.image = data.image || "";
-        metadata.address = address || "";
-    } else {
-        // Kicks off the query
-        const data = $token?.data?.length ? $token.data[0] : {};
-        metadata.address = data?.account;
-        metadata.attributes = data?.offChainMetadata?.metadata?.attributes;
-        metadata.sellerFeeBasisPoints =
-            data?.onChainMetadata?.metadata?.data?.sellerFeeBasisPoints || 0;
-        metadata.creators = data?.onChainMetadata?.metadata?.data?.creators;
-        metadata.description = data?.offChainMetadata?.metadata?.description;
-        metadata.collectionKey =
-            data?.onChainMetadata?.metadata?.collection?.key;
+    } else if (data?.compression.compressed == false) {
+        metadata.address = data?.id;
+        // metadata.attributes = data?.offChainMetadata?.metadata?.attributes;
+        metadata.sellerFeeBasisPoints = data?.royalty.basis_points || 0;
+        metadata.creators = data?.creators;
+        metadata.description = data?.content.metadata?.description;
+        // metadata.collectionKey =
+        //     data?.onChainMetadata?.metadata?.collection?.key;
         metadata.image =
-            data?.offChainMetadata?.metadata?.image ||
-            data?.onChainMetadata?.metadata?.data.image ||
-            data?.legacyMetadata?.logoURI;
-        metadata.name =
-            data?.offChainMetadata?.metadata?.name ||
-            data?.legacyMetadata?.name ||
-            data?.onChainMetadata?.metadata?.data.name;
-        metadata.files = data?.offChainMetadata?.metadata?.properties?.files;
-        // Checking all files to see if a video exists
-        metadata.video_uri =
-            data?.offChainMetadata?.metadata?.properties?.files?.find(
-                (file: any) => file.type.startsWith("video/")
+            data?.content.links?.image ||
+            data?.content.files?.find((file: any) =>
+                file.mime?.startsWith("image/")
             )?.uri;
+        metadata.name = data?.content.metadata?.name;
+        metadata.files = data?.content.files;
+        // Checking all files to see if a video exists
+        metadata.video_uri = data?.content.files?.find((file: any) =>
+            file.mime?.startsWith("video/")
+        )?.uri;
+    }
+
+    $: if (data?.id && !metadata.image) {
+        deprecatedImage = client.deprecatedImage.createQuery(data?.id);
+
+        metadata.image = $deprecatedImage?.data;
     }
 
-    $: tokenIsLoading = address !== SOL && $token.isLoading;
-    $: tokenFailed = $token.isError;
+    $: tokenIsLoading =
+        (address !== SOL && $asset?.isLoading) ||
+        (address !== SOL && status?.isLoading);
+    $: tokenFailed = $asset?.isError || status?.isError;
 
     // This could be better
     $: isNFT = metadata?.attributes && metadata?.attributes?.length > 0;

src/lib/trpc/router.ts

@@ -8,10 +8,11 @@ import { asset } from "$lib/trpc/routes/asset";
 import { balances } from "$lib/trpc/routes/balances";
 import { concurrentMerkleTree } from "$lib/trpc/routes/concurrent-merkle-tree";
 import { currentSlot } from "$lib/trpc/routes/current-slot";
+import { deprecatedImage } from "./routes/deprecated-image";
 import { price } from "$lib/trpc/routes/price";
 import { rawTransaction } from "$lib/trpc/routes/raw-transaction";
+import { searchAssets } from "./routes/search-assets";
 import { token } from "$lib/trpc/routes/token";
-import { token2022 } from "$lib/trpc/routes/token2022";
 import { tps } from "$lib/trpc/routes/tps";
 import { transaction } from "$lib/trpc/routes/transaction";
 import { transactions } from "$lib/trpc/routes/transactions";
@@ -31,10 +32,11 @@ export const router = t.router({
     cnftTransactions,
     concurrentMerkleTree,
     currentSlot,
+    deprecatedImage,
     price,
     rawTransaction,
+    searchAssets,
     token,
-    token2022,
     tps,
     transaction,
     transactions,

src/lib/trpc/routes/asset.ts

@@ -5,6 +5,7 @@ import { z } from "zod";
 import { HELIUS_API_KEY } from "$env/static/private";
 
 import { getRPCUrl } from "$lib/util/get-rpc-url";
+import type { UITokenMetadata } from "$lib/types";
 
 // TODO: add output validation once this merges with the token endpoint
 export const asset = t.procedure
@@ -18,7 +19,12 @@ export const asset = t.procedure
                 id: "asset",
                 jsonrpc: "2.0",
                 method: "getAsset",
-                params: [asset],
+                params: {
+                    displayOptions: {
+                        showFungible: true,
+                    },
+                    id: asset,
+                },
             }),
             headers: {
                 "Content-Type": "application/json",
@@ -27,27 +33,7 @@ export const asset = t.procedure
         });
 
         const data = await response.json();
-        let metadata = {
-            address: "",
-            assetHash: "",
-            attributes: [],
-            collectionKey: "",
-            compressed: false,
-            creatorHash: "",
-            creators: [],
-            dataHash: "",
-            delegate: "",
-            description: "",
-            frozen: false,
-            image: "",
-            leafId: 0,
-            mutable: false,
-            name: "",
-            owner: "",
-            sellerFeeBasisPoints: 0,
-            seq: 0,
-            tree: "",
-        };
+        let metadata: UITokenMetadata | undefined;
 
         if (data?.result?.compression?.compressed === true) {
             const assetData = await fetch(data.result.content.json_uri);
@@ -78,5 +64,5 @@ export const asset = t.procedure
                 tree: data?.result?.compression?.tree,
             };
         }
-        return metadata;
+        return metadata ?? data?.result;
     });

src/lib/trpc/routes/deprecated-image.ts

@@ -0,0 +1,33 @@
+import { z } from "zod";
+
+import { t } from "$lib/trpc/t";
+import { getAPIUrl } from "$lib/util/get-api-url";
+import { HELIUS_API_KEY } from "$env/static/private";
+
+export const deprecatedImage = t.procedure
+    .input(z.string())
+    .query(async ({ input: account }) => {
+        const response = await fetch(
+            `https://github.com/solana-labs/token-list/blob/main/assets/mainnet/${account}/logo.png?raw=true`
+        );
+
+        const contentType = response.headers.get("content-type");
+
+        if (contentType?.includes("image/png")) {
+            return `https://github.com/solana-labs/token-list/blob/main/assets/mainnet/${account}/logo.png?raw=true`;
+        } else {
+            const url = getAPIUrl(
+                `/v0/token-metadata/?api-key=${HELIUS_API_KEY}`,
+                true
+            );
+            const response = await fetch(url, {
+                body: JSON.stringify({
+                    includeOffChain: true,
+                    mintAccounts: [account],
+                }),
+                method: "POST",
+            });
+            const json = await response.json();
+            return json[0]?.legacyMetadata?.logoURI ?? "";
+        }
+    });

src/lib/trpc/routes/search-assets.ts

@@ -0,0 +1,54 @@
+import { t } from "$lib/trpc/t";
+
+import { z } from "zod";
+
+import { HELIUS_API_KEY } from "$env/static/private";
+import { getRPCUrl } from "$lib/util/get-rpc-url";
+
+export const searchAssets = t.procedure
+    .input(
+        z.object({
+            account: z.string(),
+            cursor: z.number().optional(),
+            isMainnet: z.boolean(),
+            nativeBalance: z.boolean().optional(),
+            tokenType: z.string().optional(),
+        })
+    )
+    .query(async ({ input }) => {
+        const {
+            account,
+            cursor = 1,
+            isMainnet,
+            tokenType = "all",
+            nativeBalance = false,
+        } = input;
+
+        const url = getRPCUrl(`/?api-key=${HELIUS_API_KEY}`, isMainnet);
+
+        const response = await fetch(url, {
+            body: JSON.stringify({
+                id: "my-id",
+                jsonrpc: "2.0",
+                method: "searchAssets",
+                params: {
+                    displayOptions: {
+                        showFungible: true,
+                        showNativeBalance: nativeBalance,
+                    },
+                    limit: 1000,
+                    ownerAddress: account,
+                    page: cursor,
+                    sortBy: { sortBy: "id", sortDirection: "asc" },
+                    tokenType,
+                },
+            }),
+            headers: {
+                "Content-Type": "application/json",
+            },
+            method: "POST",
+        });
+        const { result } = await response.json();
+
+        return result;
+    });