diff --git a/src/lib/components/providers/token-provider.svelte b/src/lib/components/providers/token-provider.svelte
index 2f33ef4a..b3ed610e 100644
--- a/src/lib/components/providers/token-provider.svelte
+++ b/src/lib/components/providers/token-provider.svelte
@@ -8,7 +8,12 @@
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);
@@ -16,39 +21,6 @@
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,10 +34,18 @@
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;
@@ -73,8 +53,7 @@
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;
diff --git a/src/lib/trpc/router.ts b/src/lib/trpc/router.ts
index 6bc632d2..eaeaf432 100644
--- a/src/lib/trpc/router.ts
+++ b/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,
diff --git a/src/lib/trpc/routes/asset.ts b/src/lib/trpc/routes/asset.ts
index 674ef4f5..c3b58feb 100644
--- a/src/lib/trpc/routes/asset.ts
+++ b/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;
});
diff --git a/src/lib/trpc/routes/deprecated-image.ts b/src/lib/trpc/routes/deprecated-image.ts
new file mode 100644
index 00000000..e7a3186d
--- /dev/null
+++ b/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 ?? "";
+ }
+ });
diff --git a/src/lib/trpc/routes/search-assets.ts b/src/lib/trpc/routes/search-assets.ts
new file mode 100644
index 00000000..8c5b6a83
--- /dev/null
+++ b/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;
+ });
diff --git a/src/lib/trpc/routes/token2022.ts b/src/lib/trpc/routes/token2022.ts
deleted file mode 100644
index 6c542864..00000000
--- a/src/lib/trpc/routes/token2022.ts
+++ /dev/null
@@ -1,57 +0,0 @@
-import { t } from "$lib/trpc/t";
-import { getRPCUrl } from "$lib/util/get-rpc-url";
-import { PublicKey } from "@solana/web3.js";
-import { z } from "zod";
-
-import { HELIUS_API_KEY } from "$env/static/private";
-
-export const token2022 = t.procedure
- .input(z.tuple([z.string(), z.boolean()]))
- .query(async ({ input }) => {
- const [wallet, isMainnet] = input;
- const TOKEN_2022_PROGRAM_ID = new PublicKey(
- "TokenzQdBNbLqP5VEhdkAS6EPFLC1PHnBqCXEpPxuEb"
- );
-
- const walletPublicKey = new PublicKey(wallet);
- const url = getRPCUrl(`?api-key=${HELIUS_API_KEY}`, isMainnet);
- const response = await fetch(url, {
- body: JSON.stringify({
- id: "accounts",
- jsonrpc: "2.0",
- method: "getTokenAccountsByOwner",
- params: [
- walletPublicKey,
- {
- programId: TOKEN_2022_PROGRAM_ID,
- },
- {
- commitment: "confirmed",
- encoding: "jsonParsed",
- },
- ],
- }),
- headers: {
- "Content-Type": "application/json",
- },
- method: "POST",
- }).then((res) => res.json());
-
- type Accounts = {
- amount: number;
- mint: string;
- };
-
- // TODO: any type on this
- const accounts: Accounts[] = response?.result?.value?.map(
- (account: any) => {
- return {
- amount: account.account.data.parsed.info.tokenAmount
- .uiAmount,
- mint: account.account.data.parsed.info.mint,
- };
- }
- );
-
- return accounts;
- });
diff --git a/src/routes/account/[account]/tokens/+page.svelte b/src/routes/account/[account]/tokens/+page.svelte
index cb5b3a33..36651935 100644
--- a/src/routes/account/[account]/tokens/+page.svelte
+++ b/src/routes/account/[account]/tokens/+page.svelte
@@ -15,19 +15,15 @@
const params = new URLSearchParams(window.location.search);
const network = params.get("network");
const isMainnetValue = network !== "devnet";
- const balances = client.balances.createQuery([account, isMainnetValue]);
- const token2022 = client.token2022.createQuery([account, isMainnetValue]);
+ const tokens = client.searchAssets.createQuery({
+ account,
+ isMainnet: isMainnetValue,
+ nativeBalance: true,
+ tokenType: "fungible",
+ });
const sol = client.price.createQuery(SOL);
-
- $: sorted = $balances?.data?.tokens
- // @ts-ignore
- ?.filter(({ decimals, amount }) => decimals && amount)
- // @ts-ignore
- .sort(({ amount: a, decimals: ad }, { amount: b, decimals: bd }) =>
- a / 10 ** ad < b / 10 ** bd ? 1 : -1
- );
</script>
<div>
@@ -49,10 +45,11 @@
<h4 class="font-semibold md:text-sm">SOL</h4>
</div>
<div>
- {#if $balances.data?.nativeBalance}
+ {#if $tokens.data?.nativeBalance.lamports}
<h4 class="font-semibold md:text-sm">
{(
- $balances.data?.nativeBalance / LAMPORTS_PER_SOL
+ $tokens.data?.nativeBalance.lamports /
+ LAMPORTS_PER_SOL
).toLocaleString()}
</h4>
{/if}
@@ -60,7 +57,7 @@
<h4 class="text-xs opacity-50">
{#if $sol.data}
{formatMoney(
- ($sol.data * $balances.data?.nativeBalance) /
+ ($sol.data * $tokens.data?.nativeBalance.lamports) /
LAMPORTS_PER_SOL
)}
{/if}
@@ -69,59 +66,20 @@
</div>
</a>
- {#if $token2022.data}
- {#each $token2022.data as token}
- <TokenProvider
- address={token.mint}
- let:metadata
- >
- <a
- class="mb-4 grid grid-cols-12 items-center gap-3 rounded-lg border px-3 py-2 hover:border-primary"
- href="/token/{token.mint}"
- >
- <div class="col-span-2 p-1 md:col-span-1">
- <!-- background so that if it doesn't load you dont' get ugly no image icons -->
- <div
- style="background-image: url('{metadata.image}')"
- class="aspect-square w-full rounded-lg bg-cover"
- />
- </div>
- <div
- class="col-span-10 flex items-center justify-between text-right md:col-span-11"
- >
- <div>
- <h4 class="font-semibold md:text-sm">
- {metadata.name || ""}
- </h4>
- </div>
- <div>
- <h4 class="font-semibold md:text-sm">
- {token.amount.toLocaleString()}
- </h4>
- <!-- <h4 class="text-xs opacity-50">
- {#if metadata.price}
- {formatMoney(
- (metadata.price * token.amount) /
- 10 ** token.decimals
- )}
- {/if}
- </h4> -->
- </div>
- </div>
- </a>
- </TokenProvider>
- {/each}
- {/if}
- {#if sorted}
- {#each sorted as token (token.mint)}
- {#if token.decimals > 0 && token.mint !== SOL}
+ {#if $tokens.data}
+ {#each $tokens.data.items as token}
+ {#if token.token_info.decimals > 0 && token.id !== SOL}
<TokenProvider
- address={token.mint}
+ {token}
+ status={{
+ isError: $tokens.isError,
+ isLoading: $tokens.isLoading,
+ }}
let:metadata
>
<a
class="mb-4 grid grid-cols-12 items-center gap-3 rounded-lg border px-3 py-2 hover:border-primary"
- href="/token/{token.mint}"
+ href="/token/{token.id}"
>
<div class="col-span-2 p-1 md:col-span-1">
<!-- background so that if it doesn't load you dont' get ugly no image icons -->
@@ -141,15 +99,17 @@
<div>
<h4 class="font-semibold md:text-sm">
{(
- token.amount /
- 10 ** token.decimals
+ token.token_info.balance /
+ 10 ** token.token_info.decimals
).toLocaleString()}
</h4>
<h4 class="text-xs opacity-50">
- {#if metadata.price}
+ {#if token.token_info.price_info}
{formatMoney(
- (metadata.price * token.amount) /
- 10 ** token.decimals
+ (token.token_info?.price_info
+ ?.price_per_token *
+ token.token_info.balance) /
+ 10 ** token.token_info.decimals
)}
{/if}
</h4>