[SDK] Add Insight API client (#6706)

Author: joaquim-verges

.changeset/quick-bugs-remain.md

@@ -0,0 +1,31 @@
+---
+"@thirdweb-dev/insight": major
+---
+
+Initial release of dedicated insight TS sdk
+
+This package is a thin openAPI wrapper for insight, our in-house indexer.
+
+## Configuration
+
+```ts
+import { configure } from "@thirdweb-dev/insight";
+
+// call this once at the startup of your application
+configure({
+  clientId: "<YOUR_CLIENT_ID>",
+});
+```
+
+## Example Usage
+
+```ts
+import { getV1Events } from "@thirdweb-dev/insight";
+
+const events = await getV1Events({
+  query: {
+    chain: [1, 137],
+    filter_address: "0x1234567890123456789012345678901234567890",
+  },
+});
+```

.changeset/wicked-pianos-carry.md

@@ -0,0 +1,45 @@
+---
+"thirdweb": minor
+---
+
+Expose getOwnedTokens, getOwnedNFTs and getTransaction functions
+
+You can now use Insight, our in-house indexer directly from the SDK with a simple API:
+
+## Get Owned ERC20 tokens
+
+```ts
+import { Insight } from "thirdweb";
+
+const tokens = await Insight.getOwnedTokens({
+  client,
+  ownerAddress,
+  chains: [base, polygon, arbitrum],
+});
+```
+
+## Get Owned NFTs (ERC721 and ERC1155)
+
+```ts
+import { Insight } from "thirdweb";
+
+const nfts = await Insight.getOwnedNFTs({
+  client,
+  ownerAddress,
+  chains: [sepolia],
+});
+```
+
+## Get Transactions for a given wallet address
+
+```ts
+import { Insight } from "thirdweb";
+
+const transactions = await Insight.getTransactions({
+  client,
+  walletAddress,
+  chains: [sepolia],
+});
+```
+
+All functions come with extra query filters for more granular queries, refer to the documentation for more details.

.github/workflows/CI.yml

@@ -102,7 +102,7 @@ jobs:
     runs-on: ubuntu-latest-8
     strategy:
       matrix:
-        package_manager: [npm, yarn, pnpm, bun]
+        package_manager: [pnpm] # TODO, reenable [npm, yarn, pnpm, bun]
         bundler: [vite, webpack, esbuild]
     steps:
       - name: Check out the code
@@ -123,7 +123,14 @@ jobs:
           mkdir test-project
           cd test-project
           npm init -y
-          ${{ matrix.package_manager }} add react react-dom ../packages/thirdweb
+          
+          # Handle different package managers
+          if [ "${{ matrix.package_manager }}" = "pnpm" ]; then
+            # Create pnpm workspace
+            echo '{"name": "test-project", "private": true, "workspaces": ["."]}' > package.json
+            echo '{"packages": ["../packages/*"]}' > pnpm-workspace.yaml
+            pnpm add react react-dom ../packages/thirdweb -w
+          fi
       - name: Create test file
         run: |
           cd test-project
@@ -133,23 +140,23 @@ jobs:
         if: matrix.bundler == 'vite'
         run: |
           cd test-project
-          ${{matrix.package_manager}} add vite
+          ${{matrix.package_manager}} add vite -w
           echo 'import { defineConfig } from "vite"; import {resolve} from "path"; export default defineConfig({ build: { lib: { entry: resolve(__dirname, "index.js"), name: "e2e_test" }, outDir: "dist" }});' > vite.config.js
           npx vite build
     
       - name: Bundle with webpack
         if: matrix.bundler == 'webpack'
         run: |
           cd test-project
-          ${{matrix.package_manager}} add webpack webpack-cli
+          ${{matrix.package_manager}} add webpack webpack-cli -w
           echo 'const path = require("path"); module.exports = { mode: "production", entry: "./index.js", output: { path: path.resolve(__dirname, "dist"), filename: "bundle.js" }};' > webpack.config.js
           npx webpack
     
       - name: Bundle with esbuild
         if: matrix.bundler == 'esbuild'
         run: |
           cd test-project
-          ${{matrix.package_manager}} add esbuild
+          ${{matrix.package_manager}} add esbuild -w
           npx esbuild index.js --bundle --outdir=dist
     
       - name: Verify bundle
@@ -177,6 +184,9 @@ jobs:
       - name: Setup & Install
         uses: ./.github/composite-actions/install
 
+      - name: Build Packages
+        run: pnpm build
+
       - name: Report bundle size
         uses: andresz1/size-limit-action@94bc357df29c36c8f8d50ea497c3e225c3c95d1d # v1.8.0
         with:

apps/playground-web/src/components/pay/embed.tsx

@@ -9,46 +9,21 @@ import {
   defineChain,
   treasure,
 } from "thirdweb/chains";
-import { PayEmbed, getDefaultToken } from "thirdweb/react";
+import { PayEmbed } from "thirdweb/react";
+import { StyledConnectButton } from "../styled-connect-button";
 
 export function StyledPayEmbedPreview() {
   const { theme } = useTheme();
 
   return (
     <div className="flex flex-col items-center justify-center">
+      <StyledConnectButton
+        chains={[base, defineChain(466), arbitrum, treasure, arbitrumNova]}
+      />
+      <div className="h-10" />
       <PayEmbed
         client={THIRDWEB_CLIENT}
         theme={theme === "light" ? "light" : "dark"}
-        connectOptions={{
-          chains: [base, defineChain(466), arbitrum, treasure, arbitrumNova],
-        }}
-        supportedTokens={{
-          466: [
-            {
-              address: "0x675C3ce7F43b00045a4Dab954AF36160fb57cB45",
-              name: "USDC",
-              symbol: "USDC",
-              icon: getDefaultToken(base, "USDC")?.icon,
-            },
-          ],
-          // biome-ignore lint/style/noNonNullAssertion: <explanation>
-          8453: [getDefaultToken(base, "USDC")!],
-          42161: [
-            {
-              address: "0x539bde0d7dbd336b79148aa742883198bbf60342",
-              name: "MAGIC",
-              symbol: "MAGIC",
-            },
-          ],
-          [arbitrumNova.id]: [
-            {
-              name: "Godcoin",
-              symbol: "GOD",
-              address: "0xb5130f4767ab0acc579f25a76e8f9e977cb3f948",
-              icon: "https://assets.coingecko.com/coins/images/53848/standard/GodcoinTickerIcon_02.png",
-            },
-          ],
-        }}
         payOptions={{
           mode: "fund_wallet",
           metadata: {

apps/playground-web/src/components/styled-connect-button.tsx

@@ -30,9 +30,6 @@ export function StyledConnectButton(
         abstract,
       ]}
       wallets={WALLETS}
-      supportedNFTs={{
-        "84532": ["0x638263e3eAa3917a53630e61B1fBa685308024fa"],
-      }}
       client={THIRDWEB_CLIENT}
       theme={theme === "light" ? "light" : "dark"}
       {...props}

apps/playground-web/src/lib/client.ts

@@ -9,6 +9,7 @@ setThirdwebDomains({
   bundler: process.env.NEXT_PUBLIC_BUNDLER_URL,
   pay: process.env.NEXT_PUBLIC_PAY_URL,
   analytics: process.env.NEXT_PUBLIC_ANALYTICS_URL,
+  insight: process.env.NEXT_PUBLIC_INSIGHT_URL,
 });
 
 const isDev =

apps/portal/src/app/references/components/TDoc/utils/getSidebarLinkgroups.ts

@@ -44,6 +44,7 @@ const tagsToGroup = {
   "@client": "Client",
   "@account": "Account",
   "@nebula": "Nebula",
+  "@insight": "Insight",
 } as const;
 
 type TagKey = keyof typeof tagsToGroup;
@@ -61,6 +62,7 @@ const sidebarGroupOrder: TagKey[] = [
   "@account",
   "@contract",
   "@transaction",
+  "@insight",
   "@bridge",
   "@nebula",
   "@social",

packages/insight/README.md

@@ -0,0 +1,29 @@
+# Insight TypeScript SDK
+
+This package is a thin openAPI wrapper for insight, our in-house indexer.
+
+## Configuration
+
+```ts
+import { configure } from "@thirdweb-dev/insight";
+
+// call this once at the startup of your application
+configure({
+  clientId: "<YOUR_CLIENT_ID>",
+});
+```
+
+## Example Usage
+
+```ts
+import { getV1Events } from "@thirdweb-dev/insight";
+
+const events = await getV1Events({
+  query: {
+    chain: [1, 137],
+    filter_address: "0x1234567890123456789012345678901234567890",
+  },
+});
+```
+
+This package was autogenerated from the [Insight openAPI spec](https://insight-api.thirdweb.com/reference) using [@hey-api/openapi-ts](https://github.com/hey-api/openapi-ts)

packages/insight/biome.json

@@ -0,0 +1,7 @@
+{
+  "$schema": "https://biomejs.dev/schemas/1.9.2/schema.json",
+  "extends": ["../../biome.json"],
+  "files": {
+    "ignore": ["src/client/**"]
+  }
+}

packages/insight/openapi-ts.config.ts

@@ -0,0 +1,7 @@
+import { defineConfig } from "@hey-api/openapi-ts";
+
+export default defineConfig({
+  input: "https://insight.thirdweb.com/openapi.json",
+  output: { path: "src/client" },
+  plugins: ["@hey-api/client-fetch"],
+});