@b3dotfun/sdk 0.0.1-alpha.1

package/src/shared/utils/thirdweb-insights.ts

@@ -0,0 +1,338 @@
+import { defineChain } from "thirdweb";
+import { getWalletBalance } from "thirdweb/wallets";
+import { supportedChainNetworks } from "../constants/chains/supported";
+import { client } from "./thirdweb";
+
+// Types for Thirdweb Insights API responses
+export interface TokenData {
+  chain_id?: number;
+  token_address?: string;
+  contract_address?: string;
+  name?: string;
+  symbol?: string;
+  decimals?: number;
+  balance?: string;
+  description?: string;
+  image_url?: string;
+  video_url?: string;
+  animation_url?: string;
+  background_color?: string;
+  external_url?: string;
+  status?: string;
+  owner_addresses?: string[];
+  token_id?: string;
+  collection?: {
+    name?: string;
+    description?: string;
+    image_url?: string;
+    banner_image_url?: string;
+    featured_image_url?: string;
+    external_link?: string;
+    extra_metadata?: {
+      image_original_url?: string;
+      [key: string]: any;
+    };
+  };
+  contract?: {
+    type?: "ERC20" | "ERC721" | "ERC1155" | "erc20" | "erc721" | "erc1155";
+    name?: string;
+    symbol?: string;
+  };
+  extra_metadata?: {
+    image_original_url?: string;
+    metadata_original_url?: string;
+    attributes?: Array<{
+      trait_type?: string;
+      value?: string | number;
+      display_type?: string;
+    }>;
+    properties?: Record<string, any>;
+    [key: string]: any;
+  };
+  metadata_url?: string;
+  metadata?: {
+    name?: string;
+    description?: string;
+    image?: string;
+    [key: string]: any;
+  };
+}
+
+export interface TokenBalancesResponse {
+  data: TokenData[];
+  continuation?: string;
+}
+
+export interface TokenBalancesOptions {
+  chainIds?: number[];
+  tokenType?: "erc20" | "erc721" | "erc1155";
+  limit?: number;
+  continuation?: string;
+  metadata?: boolean;
+  page?: number;
+  includeSpam?: boolean;
+}
+
+// Interface for NFTs by contract response
+export interface NFTsByContractResponse {
+  data: TokenData[];
+  meta: {
+    chain_id: number;
+    address: string;
+    page: number;
+    limit: number;
+    total_items: number;
+    total_pages: number;
+  };
+}
+
+// Options for fetching NFTs by contract
+export interface NFTsByContractOptions {
+  limit?: number;
+  page?: number;
+}
+
+export interface FungibleAssetByContractOptions {
+  limit?: number;
+  page?: number;
+  fungibleId?: string;
+}
+
+const INSIGHTS_BASE_URL = "https://insight.thirdweb.com/v1";
+
+export async function getTokenBalances(
+  ownerAddress: string,
+  options: TokenBalancesOptions = {}
+): Promise<TokenBalancesResponse> {
+  const { chainIds, tokenType, limit = 100, continuation, metadata = true, page = 0, includeSpam = false } = options;
+
+  const queryParams = new URLSearchParams();
+
+  // Add chain parameters for each chainId
+  if (chainIds?.length) {
+    chainIds.forEach(chainId => {
+      queryParams.append("chain", chainId.toString());
+    });
+  }
+
+  if (limit !== undefined) {
+    queryParams.append("limit", limit.toString());
+  }
+  if (continuation !== undefined) {
+    queryParams.append("continuation", continuation);
+  }
+  if (metadata !== undefined) {
+    queryParams.append("metadata", metadata.toString());
+  }
+  if (page !== undefined) {
+    queryParams.append("page", page.toString());
+  }
+  if (includeSpam !== undefined) {
+    queryParams.append("include_spam", includeSpam.toString());
+  }
+  // Add clientId to query parameters
+  if (client.clientId !== undefined) {
+    queryParams.append("clientId", client.clientId);
+  }
+
+  // Construct the endpoint based on token type
+  let endpoint: string;
+  if (tokenType) {
+    endpoint = `/tokens/${tokenType}/${ownerAddress}`;
+  } else {
+    endpoint = `/tokens/${ownerAddress}`;
+  }
+
+  const url = `${INSIGHTS_BASE_URL}${endpoint}?${queryParams.toString()}`;
+
+  const response = await fetch(url, {
+    headers: {
+      ...(client.clientId ? { "x-client-id": client.clientId } : {}),
+      ...(client.secretKey ? { "x-secret-key": client.secretKey } : {})
+    }
+  });
+
+  if (!response.ok) {
+    throw new Error(`Failed to fetch token balances: ${response.statusText}`);
+  }
+
+  return response.json();
+}
+
+// Function to get ERC20 token balances
+export async function getERC20Balances(
+  ownerAddress: string,
+  options: Omit<TokenBalancesOptions, "tokenType"> = {}
+): Promise<TokenBalancesResponse> {
+  return getTokenBalances(ownerAddress, { ...options, tokenType: "erc20" });
+}
+
+// Function to get NFT balances (ERC721 and ERC1155)
+export async function getNFTBalances(
+  ownerAddress: string,
+  options: Omit<TokenBalancesOptions, "tokenType"> = {}
+): Promise<TokenBalancesResponse> {
+  const erc721Response = await getTokenBalances(ownerAddress, {
+    ...options,
+    tokenType: "erc721"
+  });
+  const erc1155Response = await getTokenBalances(ownerAddress, {
+    ...options,
+    tokenType: "erc1155"
+  });
+
+  return {
+    data: [...erc721Response.data, ...erc1155Response.data],
+    continuation: erc1155Response.continuation
+  };
+}
+
+/**
+ * Fetches NFTs for a specific contract address
+ * @param chainId The chain ID where the contract is deployed
+ * @param contractAddress The NFT contract address
+ * @param options Additional options for the request
+ * @returns NFT data for the specified contract
+ */
+export async function getNFTsByContract(
+  chainId: number,
+  contractAddress: string,
+  options: NFTsByContractOptions = {}
+): Promise<NFTsByContractResponse> {
+  const { limit = 20, page = 0 } = options;
+
+  const queryParams = new URLSearchParams();
+
+  queryParams.append("chain", chainId.toString());
+
+  if (limit) {
+    queryParams.append("limit", limit.toString());
+  }
+  if (page !== undefined) {
+    queryParams.append("page", page.toString());
+  }
+  // Add clientId to query parameters
+  if (client.clientId) {
+    queryParams.append("clientId", client.clientId);
+  }
+
+  const endpoint = `/nfts/${contractAddress}/1`;
+  const url = `${INSIGHTS_BASE_URL}${endpoint}?${queryParams.toString()}`;
+
+  const response = await fetch(url, {
+    headers: {
+      ...(client.clientId ? { "x-client-id": client.clientId } : {}),
+      ...(client.secretKey ? { "x-secret-key": client.secretKey } : {}),
+      "x-chain-id": chainId.toString()
+    }
+  });
+
+  if (!response.ok) {
+    throw new Error(`Failed to fetch NFTs by contract: ${response.statusText}`);
+  }
+
+  return response.json();
+}
+
+// This function replaces the simplehash fungible/assets function just in one place - EditGameTOken
+//  I'm not sure if that's the best way to do it, maybe wait for thirdweb to provide a multi id endpoint
+export async function getFungibleAssetByContract(
+  chainId: number,
+  contractAddress: string,
+  options: FungibleAssetByContractOptions = {}
+): Promise<TokenData> {
+  const { limit = 20, page = 0, fungibleId = 0 } = options;
+
+  const queryParams = new URLSearchParams();
+
+  queryParams.append("chain", chainId.toString());
+
+  if (limit) {
+    queryParams.append("limit", limit.toString());
+  }
+  if (page !== undefined) {
+    queryParams.append("page", page.toString());
+  }
+  // Add clientId to query parameters
+  if (client.clientId) {
+    queryParams.append("clientId", client.clientId);
+  }
+
+  const endpoint = `/nfts/${contractAddress}/${fungibleId}`;
+  const url = `${INSIGHTS_BASE_URL}${endpoint}?${queryParams.toString()}`;
+
+  const response = await fetch(url, {
+    headers: {
+      ...(client.clientId ? { "x-client-id": client.clientId } : {}),
+      ...(client.secretKey ? { "x-secret-key": client.secretKey } : {}),
+      "x-chain-id": chainId.toString()
+    }
+  });
+
+  if (!response.ok) {
+    throw new Error(`Failed to fetch NFTs by contract: ${response.statusText}`);
+  }
+
+  const data = await response.json();
+
+  return data.data?.[0] || null;
+}
+
+/**
+ * Gets native token balance for a specific chain
+ * @param address Wallet address
+ * @param chainId Chain ID to get native balance for
+ * @returns Native token balance data or null if error
+ */
+export async function getNativeTokenBalance(address: string, chainId: number): Promise<TokenData | null> {
+  if (!address) {
+    return null;
+  }
+
+  try {
+    // Find chain info from supported chains
+    const chainInfo = supportedChainNetworks.find(chain => chain.id === chainId);
+
+    // Create a chain object from the chainId
+    const chain = defineChain({
+      id: chainId,
+      name: chainInfo?.name || `Chain ${chainId}`,
+      rpc: "",
+      nativeCurrency: {
+        name: chainInfo?.nativeCurrency?.name || "Native Currency",
+        symbol: chainInfo?.nativeCurrency?.symbol || "ETH",
+        decimals: chainInfo?.nativeCurrency?.decimals || 18
+      }
+    });
+
+    // Get native token balance
+    const balance = await getWalletBalance({
+      address,
+      client,
+      chain
+    });
+
+    // Format to match TokenData structure
+    return {
+      chain_id: chainId,
+      token_address: "0x0000000000000000000000000000000000000000",
+      contract_address: "0x0000000000000000000000000000000000000000",
+      name: balance.name,
+      symbol: balance.symbol,
+      decimals: balance.decimals,
+      balance: balance.value.toString(),
+      metadata: {
+        logoURI:
+          chainInfo?.icon?.url ||
+          "https://raw.githubusercontent.com/trustwallet/assets/master/blockchains/ethereum/info/logo.png"
+      },
+      // Add native token info in extra_metadata
+      extra_metadata: {
+        is_native: true
+      }
+    };
+  } catch (error) {
+    console.error(`Error fetching native balance for chain ${chainId}:`, error);
+    return null;
+  }
+}

package/src/shared/utils/thirdweb.ts

@@ -0,0 +1,11 @@
+import { createThirdwebClient } from "thirdweb";
+import { THIRDWEB_CLIENT_ID, THIRDWEB_SECRET_KEY } from "../constants";
+
+const clientId = THIRDWEB_CLIENT_ID;
+const secretKey = THIRDWEB_SECRET_KEY;
+
+if (!clientId && !secretKey) {
+  throw new Error("Either NEXT_PUBLIC_THIRDWEB_CLIENT_ID or THIRDWEB_SECRET_KEY must be provided");
+}
+
+export const client = createThirdwebClient({ clientId, secretKey });

package/src/styles/index.css

@@ -0,0 +1,279 @@
+/* B3 Fonts */
+/* See https://docs.b3.fun/brand-kit for more information */
+
+@font-face {
+  font-family: "Pack";
+  src: url("https://cdn.b3.fun/fonts/pack.ttf") format("truetype");
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Neue Montreal Bold";
+  src:
+    url("https://cdn.b3.fun/fonts/ppneuemontreal-bold-webfont.woff2") format("woff2"),
+    url("https://cdn.b3.fun/fonts/ppneuemontreal-bold-webfont.woff") format("woff");
+  font-weight: normal;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: "Neue Montreal Regular";
+  src:
+    url("https://cdn.b3.fun/fonts/ppneuemontreal-regular-webfont.woff2") format("woff2"),
+    url("https://cdn.b3.fun/fonts/ppneuemontreal-regular-webfont.woff") format("woff");
+  font-weight: normal;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: "Neue Montreal Book";
+  src:
+    url("https://cdn.b3.fun/fonts/ppneuemontreal-book-webfont.woff2") format("woff2"),
+    url("https://cdn.b3.fun/fonts/ppneuemontreal-book-webfont.woff") format("woff");
+  font-weight: normal;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: "Neue Montreal Medium";
+  src:
+    url("https://cdn.b3.fun/fonts/ppneuemontreal-medium-webfont.woff2") format("woff2"),
+    url("https://cdn.b3.fun/fonts/ppneuemontreal-medium-webfont.woff") format("woff");
+  font-weight: normal;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: "Neue Montreal Semibold";
+  src:
+    url("https://cdn.b3.fun/fonts/ppneuemontreal-semibold-webfont.woff2") format("woff2"),
+    url("https://cdn.b3.fun/fonts/ppneuemontreal-semibold-webfont.woff") format("woff");
+  font-weight: normal;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: "Calibre Bold";
+  src:
+    url("https://cdn.b3.fun/fonts/calibre2-bold-webfont.woff2") format("woff2"),
+    url("https://cdn.b3.fun/fonts/calibre2-bold-webfont.woff") format("woff");
+  font-weight: normal;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: "Calibre Heavy";
+  src:
+    url("https://cdn.b3.fun/fonts/calibre2-heavy-webfont.woff2") format("woff2"),
+    url("https://cdn.b3.fun/fonts/calibre2-heavy-webfont.woff") format("woff");
+  font-weight: normal;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: "Calibre Regular";
+  src:
+    url("https://cdn.b3.fun/fonts/calibre2-regular-webfont.woff2") format("woff2"),
+    url("https://cdn.b3.fun/fonts/calibre2-regular-webfont.woff") format("woff");
+  font-weight: normal;
+  font-style: normal;
+}
+
+.b3-root {
+  /* Light theme variables */
+  --b3-react-background: 0 0% 100%; /* white background */
+  --b3-react-foreground: 0 0% 10%; /* nearly black text */
+  --b3-react-card: 0 0% 98%; /* very light gray for cards */
+  --b3-react-card-foreground: 0 0% 15%; /* dark text on cards */
+  --b3-react-subtle: 0 0% 96%; /* subtle background (gray-50 equivalent) */
+  --b3-react-secondary-foreground: 0 0% 30%; /* secondary text color (neutral-700 equivalent) */
+  --b3-react-primary: 210 80% 45%; /* blue (splash of color) */
+  --b3-react-primary-foreground: 0 0% 100%; /* white text on blue */
+  --b3-react-muted-foreground: 0 0% 50%; /* medium gray for muted text */
+  --b3-react-border: 0 0% 90%; /* light gray borders */
+  --b3-react-muted: 256 16% 23%;
+  --b3-react-popover: 260 13% 9%;
+  --b3-react-ring: 256 16% 23%;
+
+  /* Anyspend, we get this from apps/anyspend-web/app/globals.css */
+  --as-primary: 204 9% 11%;
+  --as-on-surface-1: 0 0% 99%;
+  --as-on-surface-2: 0 0% 94%;
+  --as-on-surface-3: 210 9% 91%;
+  --as-stroke: 0 0% 94%;
+  --as-n-8: 0 0% 96%;
+  --as-brand: 215 90% 48%;
+  --as-light-brand: 215 90% 70%;
+  --as-yellow: 32 96% 64%;
+  --as-secondary: 212 6% 46%;
+  --as-red: 14 88% 52%;
+  --as-on-surface-disabled: 0 0% 78%;
+  --as-on-disabled: 0 0% 44%;
+
+  /* Override relay colors */
+  --relay-colors-focus-color: hsl(215, 90%, 48%) !important;
+}
+
+html[data-theme="dark"] .b3-root,
+.b3-root[data-theme="dark"] {
+  /* Dark theme variables */
+  --b3-react-background: 0 0% 10%;
+  --b3-react-foreground: 0 0% 90%;
+  --b3-react-card: 0 0% 15%;
+  --b3-react-card-foreground: 0 0% 90%;
+  --b3-react-subtle: 0 0% 18%; /* subtle background for dark mode */
+  --b3-react-secondary-foreground: 0 0% 70%; /* secondary text color for dark mode */
+  --b3-react-primary: 210 80% 45%;
+  --b3-react-primary-foreground: 0 0% 100%;
+  --b3-react-muted-foreground: 0 0% 50%;
+  --b3-react-border: 0 0% 25%; /* darker border for dark mode */
+  --b3-react-muted: 256 16% 23%;
+  --b3-react-popover: 260 13% 9%;
+  --b3-react-ring: 256 16% 23%;
+
+  /* Anyspend, we get this from apps/anyspend-web/app/globals.css, convert to hsl */
+  --as-primary: 0 0% 99%;
+  --as-on-surface-1: 204 9% 11%;
+  --as-on-surface-2: 213 10% 17%;
+  --as-on-surface-3: 203 8% 21%;
+  --as-stroke: 213 10% 17%;
+  --as-n-8: 210 11% 7%;
+  --as-brand: 215 90% 48%;
+  --as-light-brand: 215 90% 70%;
+  --as-yellow: 32 96% 64%;
+  --as-secondary: 212 6% 46%;
+  --as-red: 14 88% 52%;
+  --as-on-surface-disabled: 0 0% 78%;
+  --as-on-disabled: 0 0% 44%;
+
+  /* Override relay colors */
+  --relay-colors-focus-color: hsl(215, 90%, 48%) !important;
+
+  /* Uncomment color variables below to see what user see on bsmnt */
+  /* --as-brand: 263 90% 63%;
+    --as-light-brand: 255 10% 16%;
+    --border: 256 16% 23%; */
+}
+
+/* src/tailwind.css */
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/* Custom component styles */
+.b3-modal {
+  @apply bg-b3-react-background text-b3-react-foreground rounded-2xl border;
+  border: 1px solid var(--border);
+  overflow: hidden;
+  outline: none;
+}
+
+.b3-modal-freestyle {
+  background: transparent !important;
+  padding: 0 !important;
+}
+
+.b3-modal-back-button:hover {
+  @apply border-none !text-black;
+}
+
+.b3-modal-back-button:focus {
+  outline: none;
+}
+
+.b3-modal-back-button {
+  @apply text-b3-react-muted-foreground border-none;
+}
+
+.bg-b3-react-card {
+  /* Apply the background color using the custom property */
+  background-color: var(--b3-react-card);
+  @apply rounded-lg border p-4;
+  border: 1px solid var(--border);
+}
+
+.b3-text-primary {
+  @apply text-b3-react-primary;
+}
+
+.b3-text-muted {
+  @apply text-b3-react-muted-foreground;
+}
+
+.b3-button-primary {
+  @apply bg-b3-react-primary text-b3-react-primary-foreground hover:bg-b3-react-primary/90 rounded-xl;
+}
+
+.b3-address-tag {
+  @apply bg-b3-react-background rounded-md border px-3 py-2 font-mono text-sm;
+}
+
+.b3-permission-item {
+  @apply bg-b3-react-card rounded-xl border p-4;
+}
+
+/**
+Dark version
+**/
+
+/*
+  Changes to TW Connect Modal
+*/
+
+/*
+  Hide title text and image. Currently the "header" props in ConnectEmbed do nothing
+*/
+.b3-modal .css-1r76jxl {
+  @apply bg-b3-react-background;
+}
+.b3-modal .css-1m9ejup,
+.b3-modal .css-1cv2836,
+.b3-modal .css-1d4s0we img[width="24"] {
+  display: none !important;
+}
+
+.b3-modal .css-1r76jxl {
+  border: none;
+}
+
+/* END TW Connect Modal */
+
+/* Divider */
+.divider {
+  height: 2px;
+  display: block;
+  background: hsl(var(--b3-react-background));
+}
+
+.divider:after {
+  content: "";
+  display: block;
+  height: 1px;
+  background: radial-gradient(circle, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.1) 80%, rgba(0, 0, 0, 0) 100%);
+}
+
+.font-sf-rounded {
+  letter-spacing: 0.05rem;
+}
+
+.label-style {
+  @apply font-sf-rounded font-semibold uppercase;
+}
+
+/* Hide scrollbar for Chrome, Safari and Opera */
+.no-scrollbar::-webkit-scrollbar {
+  display: none;
+}
+/* Hide scrollbar for IE, Edge and Firefox */
+.no-scrollbar {
+  -ms-overflow-style: none; /* IE and Edge */
+  scrollbar-width: none; /* Firefox */
+}
+
+.text-nano {
+  font-size: 10px;
+  letter-spacing: 0.05em;
+  font-family: "SFCompact", sans-serif;
+}

package/src/styles/index.ts

@@ -0,0 +1,24 @@
+/**
+ * @fileoverview CSS Styles Entry Point for @b3dotfun/sdk
+ *
+ * This file serves as the TypeScript entry point for importing the SDK's CSS styles.
+ * It enables consumers to import styles using: `import "@b3dotfun/sdk/styles"`
+ *
+ * @example
+ * ```typescript
+ * // In your app's main file:
+ * import "@b3dotfun/sdk/styles";
+ * ```
+ *
+ * Technical Notes:
+ * - This is a side-effect import that loads CSS into the page
+ * - The TypeScript file is required for proper module resolution in monorepos
+ * - The actual CSS is processed by the build system (PostCSS) and output to dist/styles/
+ * - Contains B3 design system variables, fonts, and component styles
+ */
+
+// Side-effect import of the main CSS file
+import "./index.css";
+
+// Export empty object to make this a valid ES module
+export {};