Merge branch 'master' into docs/cbw-beta-link-update

Author: soheimam

apps/base-docs/docs/pages/identity/smart-wallet/guides/profiles.mdx

@@ -138,44 +138,79 @@ along with a transfer of 0.01 USDC to an address on Base Sepolia.
 ```tsx [app/page.tsx]
 "use client";
 
-import { ProviderInterface } from "@coinbase/wallet-sdk";
 import { useEffect, useState } from "react";
 import { encodeFunctionData, erc20Abi, numberToHex, parseUnits } from "viem";
-import { useAccount, useConnect, useDisconnect } from "wagmi";
+import { useConnect, useSendCalls } from "wagmi";
+
+interface DataRequest {
+  email: boolean;
+  address: boolean;
+}
+
+interface ProfileResult {
+  success: boolean;
+  email?: string;
+  address?: string;
+  error?: string;
+}
 
 export default function Home() {
-  const [provider, setProvider] = useState(undefined);
-  const [dataToRequest, setDataToRequest] = useState({
+  const [dataToRequest, setDataToRequest] = useState<DataRequest>({
     email: true,
     address: true
   });
-  const [isLoading, setIsLoading] = useState(false);
-  const [result, setResult] = useState(null);
+  const [result, setResult] = useState<ProfileResult | null>(null);
 
-  const account = useAccount();
-  const { connectors, connect, status, error } = useConnect();
-  const { disconnect } = useDisconnect();
+  const { sendCalls, data, error, isPending } = useSendCalls();
+  const { connect, connectors } = useConnect()
 
-  // Initialize provider when account connected
-  useEffect(() => {
-    async function getProvider() {
-      if (account.status === 'connected' && account.connector) {
-        const provider = await account.connector.getProvider();
-        setProvider(provider);
-      }
-    }
-    getProvider();
-  }, [account]);
 
   // Function to get callback URL - replace in production
   function getCallbackURL() {
     return "https://your-ngrok-url.ngrok-free.app/api/data-validation";
   }
 
+  // Handle response data when sendCalls completes
+  useEffect(() => {
+    if (data?.capabilities?.dataCallback) {
+      const callbackData = data.capabilities.dataCallback;
+      const newResult: ProfileResult = { success: true };
+
+      // Extract email if provided
+      if (callbackData.email) newResult.email = callbackData.email;
+
+      // Extract address if provided
+      if (callbackData.physicalAddress) {
+        const addr = callbackData.physicalAddress.physicalAddress;
+        newResult.address = [
+          addr.address1,
+          addr.address2,
+          addr.city,
+          addr.state,
+          addr.postalCode,
+          addr.countryCode
+        ].filter(Boolean).join(", ");
+      }
+
+      setResult(newResult);
+    } else if (data && !data.capabilities?.dataCallback) {
+      setResult({ success: false, error: "Invalid response - no data callback" });
+    }
+  }, [data]);
+
+  // Handle errors
+  useEffect(() => {
+    if (error) {
+      setResult({
+        success: false,
+        error: error.message || "Transaction failed"
+      });
+    }
+  }, [error]);
+
   // Handle form submission
   async function handleSubmit() {
     try {
-      setIsLoading(true);
       setResult(null);
 
       // Build requests array based on checkboxes
@@ -185,125 +220,79 @@ export default function Home() {
 
       if (requests.length === 0) {
         setResult({ success: false, error: "Select at least one data type" });
-        setIsLoading(false);
         return;
       }
 
-      // Request data from wallet
-      const response = await provider?.request({
-        method: "wallet_sendCalls",
-        params: [{
-          version: "1.0",
-          chainId: numberToHex(84532), // Base Sepolia
-          calls: [
-              {
-                to: "0x036CbD53842c5426634e7929541eC2318f3dCF7e", // USDC contract address on Base Sepolia
-                data: encodeFunctionData({
-                  abi: erc20Abi,
-                  functionName: "transfer",
-                  args: [
-                    "0xd8da6bf26964af9d7eed9e03e53415d37aa96045",
-                    parseUnits("0.01", 6),
-                  ],
-                }),
-              },
-            ], // Simple transfer of 0.01 USDC to the contract
-          capabilities: {
-            dataCallback: {
-              requests: requests,
-              callbackURL: getCallbackURL(),
-            },
+      // Send calls using wagmi hook
+      sendCalls({
+        connector: connectors[0],
+        account: null,
+        calls: [
+          {
+            to: "0x036CbD53842c5426634e7929541eC2318f3dCF7e", // USDC contract address on Base Sepolia
+            data: encodeFunctionData({
+              abi: erc20Abi,
+              functionName: "transfer",
+              args: [
+                "0xd8da6bf26964af9d7eed9e03e53415d37aa96045",
+                parseUnits("0.01", 6),
+              ],
+            }),
+          },
+        ],
+        chainId: 84532, // Base Sepolia
+        capabilities: {
+          dataCallback: {
+            requests: requests,
+            callbackURL: getCallbackURL(),
           },
-        }],
+        },
+      });
+    } catch (err) {
+      setResult({
+        success: false,
+        error: err instanceof Error ? err.message : "Unknown error occurred"
       });
-
-      // Process response
-      if (response?.capabilities?.dataCallback) {
-        const data = response.capabilities.dataCallback;
-        const result = { success: true };
-
-        // Extract email if provided
-        if (data.email) result.email = data.email;
-
-        // Extract address if provided
-        if (data.physicalAddress) {
-          const addr = data.physicalAddress.physicalAddress;
-          result.address = [
-            addr.address1,
-            addr.address2,
-            addr.city,
-            addr.state,
-            addr.postalCode,
-            addr.countryCode
-          ].filter(Boolean).join(", ");
-        }
-
-        setResult(result);
-      } else {
-        setResult({ success: false, error: "Invalid response" });
-      }
-    } catch (error) {
-      setResult({ success: false, error: error.message || "Transaction failed" });
-    } finally {
-      setIsLoading(false);
     }
   }
 
   return (
     <div style={{ maxWidth: "600px", margin: "0 auto", padding: "20px" }}>
       <h1>Profiles Demo</h1>
 
-      {/* Wallet Status */}
-      <div style={{ marginBottom: "20px" }}>
-        <p>Status: {account.status}</p>
-        {account.status === 'connected' ? (
-          <button onClick={disconnect}>Disconnect</button>
-        ) : (
-          connectors
-            .filter(c => c.name === 'Coinbase Wallet')
-            .map(connector => (
-              <button key={connector.uid} onClick={() => connect({ connector })}>
-                Connect Smart Wallet
-              </button>
-            ))
-        )}
-      </div>
-
       {/* Data Request Form */}
-      {account.status === 'connected' && (
-        <div style={{ marginTop: "20px" }}>
-          <h2>Checkout</h2>
-
-          <div>
-            <label>
-              <input
-                type="checkbox"
-                checked={dataToRequest.email}
-                onChange={() => setDataToRequest(prev => ({ ...prev, email: !prev.email }))}
-              />
-              Email Address
-            </label>
-          </div>
-
-          <div>
-            <label>
-              <input
-                type="checkbox"
-                checked={dataToRequest.address}
-                onChange={() => setDataToRequest(prev => ({ ...prev, address: !prev.address }))}
-              />
-              Physical Address
-            </label>
-          </div>
-
-          <button
-            onClick={handleSubmit}
-            disabled={isLoading || !provider}
-          >
-            {isLoading ? "Processing..." : "Checkout"}
-          </button>
+      <div style={{ marginTop: "20px" }}>
+        <h2>Checkout</h2>
+
+        <div>
+          <label>
+            <input
+              type="checkbox"
+              checked={dataToRequest.email}
+              onChange={() => setDataToRequest(prev => ({ ...prev, email: !prev.email }))}
+            />
+            Email Address
+          </label>
         </div>
-      )}
+
+        <div>
+          <label>
+            <input
+              type="checkbox"
+              checked={dataToRequest.address}
+              onChange={() => setDataToRequest(prev => ({ ...prev, address: !prev.address }))}
+            />
+            Physical Address
+          </label>
+        </div>
+
+        <button
+          onClick={handleSubmit}
+          disabled={isPending}
+        >
+          {isPending ? "Processing..." : "Checkout"}
+        </button>
+      </div>
 
       {/* Results Display */}
       {result && (
@@ -355,6 +344,16 @@ You can learn more about ngrok [here](https://ngrok.com/docs).
 
 </Callout>
 
+<Callout type="warning">
+**Important caveats about the validation API**
+
+If the API validation check is successful, you MUST return the original calls in the response of the API endpoint as it's shown in the [validation API section](#implementing-the-validation-api).
+If you don't, the wallet will return an error.
+
+You can also return a new set of calls to be made after the data is validated.
+
+</Callout>
+
 ### Implementing the Validation API
 
 Now, let's create an API endpoint to validate the data received from Smart Wallet.
@@ -414,9 +413,11 @@ export async function POST(request: Request) {
 
     // Success - no validation errors - you HAVE to return the original calls
     return Response.json({
+      request: {
         calls: requestData.calls,
         chainId: requestData.chainId,
-        capabilities: requestData.capabilities
+        version: requestData.version,
+      },
     });
 
   } catch (error) {

apps/base-docs/sidebar.ts

@@ -1086,6 +1086,10 @@ export const sidebar: Sidebar = [
         text: 'Security Council',
         link: '/chain/security-council',
       },
+      {
+        text: 'Block Building',
+        link: '/chain/block-building',
+      },
       {
         text: 'Tools',
         collapsed: true,

apps/web/app/api/registry/entries/route.ts

@@ -1,5 +1,5 @@
 import { NextRequest, NextResponse } from 'next/server';
-import { getDb } from 'apps/web/src/utils/datastores/rds';
+import { getDb } from 'apps/web/src/utils/datastores/postgres';
 import { getKv } from 'apps/web/src/utils/datastores/kv';
 import { logger } from 'apps/web/src/utils/logger';
 import { withTimeout } from 'apps/web/app/api/decorators';

apps/web/app/api/registry/featured/route.ts

@@ -1,5 +1,5 @@
 import { NextResponse } from 'next/server';
-import { getDb } from 'apps/web/src/utils/datastores/rds';
+import { getDb } from 'apps/web/src/utils/datastores/postgres';
 import { getKv } from 'apps/web/src/utils/datastores/kv';
 import { logger } from 'apps/web/src/utils/logger';
 import { withTimeout } from 'apps/web/app/api/decorators';

apps/web/src/utils/datastores/postgres/index.ts

@@ -0,0 +1,44 @@
+import { Kysely, PostgresDialect } from 'kysely';
+import { Pool } from 'pg';
+import { isDevelopment } from 'apps/web/src/constants';
+import { Database } from './types';
+import { logger } from 'apps/web/src/utils/logger';
+
+function createDefaultPostgresManager() {
+  const user = isDevelopment ? process.env.POSTGRES_USER_DEVELOPMENT : process.env.POSTGRES_USER;
+  const password = isDevelopment ? process.env.POSTGRES_PASSWORD_DEVELOPMENT : process.env.POSTGRES_PASSWORD;
+  const host = isDevelopment ? process.env.POSTGRES_HOST_DEVELOPMENT : process.env.POSTGRES_HOST;
+  const dbName = isDevelopment ? process.env.POSTGRES_DB_NAME_DEVELOPMENT : process.env.POSTGRES_DB_NAME;
+  const connectionString = `postgresql://${user}:${password}@${host}:5432/${dbName}`;
+  const poolConfig = isDevelopment
+    ? {
+        connectionString,
+      }
+    : {
+        connectionString,
+        ssl: {
+          rejectUnauthorized: false,
+        },
+      };
+
+  try {
+    const pool = new Pool(poolConfig);
+    const dialect = new PostgresDialect({ pool });
+    return new Kysely<Database>({ dialect });
+  } catch (error) {
+    if (isDevelopment) {
+      console.error('Failed to connect to postgres', error);
+    } else {
+      logger.error('Failed to connect to postgres', error);
+    }
+    throw new Error(`Failed to connect to postgres: ${error}`);
+  }
+}
+
+let db: Kysely<Database> | undefined = undefined;
+export function getDb() {
+  if (!db) {
+    db = createDefaultPostgresManager();
+  }
+  return db;
+}