How to Integrate Retool with Coinbase API

Coinbase supports two authentication methods: API key plus secret (simpler, recommended for organizational accounts) and OAuth 2.0 (required for accessing data across multiple user accounts). For a single-organization portfolio dashboard, API key authentication is the right choice. Log in to your Coinbase account and navigate to Settings → API. Click New API Key. Give the key a descriptive name like 'Retool Portfolio Dashboard'. Under Permissions, select only the scopes your dashboard requires. For a read-only portfolio dashboard, enable: wallet:accounts:read (to list accounts and balances), wallet:transactions:read (to fetch transaction history), wallet:buys:read, and wallet:sells:read. If your Retool app needs to initiate transactions, additionally enable wallet:buys:create and wallet:sells:create — but only for apps used by authorized team members. Under Accounts, choose 'All' to access all wallets or select specific accounts. Complete the two-factor authentication step. Coinbase will display the API key and API secret only once at this point — copy both immediately and store them in a password manager. The API secret cannot be retrieved again; if lost, a new key must be generated. Note that Coinbase API keys also require a Client ID — this is visible on the API key detail page. You will need the API key, API secret, and the base URL https://api.coinbase.com for configuring the Retool resource.

In Retool, navigate to the Resources tab (the plug icon in the left sidebar or via the top navigation). Click Add Resource and select REST API from the resource type list. Give the resource a clear name like 'Coinbase API'. Set the Base URL to https://api.coinbase.com. For authentication, Coinbase's API key authentication uses a combination of headers that must be sent with every request: CB-ACCESS-KEY (your API key), CB-ACCESS-TIMESTAMP (current Unix timestamp), CB-ACCESS-SIGN (HMAC-SHA256 signature of timestamp + method + path + body), and CB-VERSION (API version date). Because the CB-ACCESS-SIGN header requires a computed HMAC signature that changes per request, you cannot configure it as a static header in the resource. Instead, configure the resource with the static headers: add CB-ACCESS-KEY as a default header with your API key value, and CB-VERSION with the value 2016-02-18. Store your API secret in a Retool Configuration Variable named COINBASE_API_SECRET (Settings → Configuration Variables, mark as secret). The CB-ACCESS-TIMESTAMP and CB-ACCESS-SIGN headers must be computed per-request using a JavaScript query or transformer. For simpler testing, note that Coinbase's prices and exchange rates endpoints are public and do not require authentication — begin with those to verify connectivity before adding auth header computation to your main queries. Click Save Resource after configuring the base URL and static headers.

1// JavaScript query to compute Coinbase HMAC signature headers
2// Run this before authenticated queries and reference its output
3const timestamp = Math.floor(Date.now() / 1000).toString();
4const method = 'GET';
5const path = '/v2/accounts';
6const body = '';
7const message = timestamp + method + path + body;
8
9// Note: Use Retool's built-in crypto or a Workflow for HMAC computation
10// This pattern runs as a JavaScript query to generate headers dynamically
11return {
12  'CB-ACCESS-KEY': retoolContext.configVars.COINBASE_API_KEY,
13  'CB-ACCESS-TIMESTAMP': timestamp,
14  'CB-ACCESS-SIGN': '{{ computedSignature }}',
15  'CB-VERSION': '2016-02-18'
16};

With the resource configured, create the core data queries your dashboard needs. In the Retool app editor, open the Code panel and create a new query named 'getAccounts'. Select the Coinbase API resource. Set Method to GET and Path to /v2/accounts. Add URL parameters: limit → 100 (to retrieve all accounts in one call). To handle the HMAC authentication requirement, create a preceding JavaScript query named 'computeAuthHeaders' that generates the timestamp and signature. In practice for read-only dashboards, many teams use a Retool Workflow running on a schedule to fetch and cache account data into a Retool Configuration Variable or Retool Database table, which sidesteps the per-request HMAC requirement. For live price queries, create a query named 'getBtcPrice'. Set Method to GET and Path to /v2/prices/BTC-USD/spot — this endpoint requires no authentication. Duplicate this query for ETH-USD, SOL-USD, and any other assets your dashboard tracks. Create a JavaScript query named 'calculatePortfolioValue' that references the getAccounts and price queries: it maps each account's native balance to the corresponding spot price and computes total USD portfolio value. Add a transformer to getAccounts that normalizes the paginated response — Coinbase wraps results in a data array with a pagination object. The transformer should return data.data mapped to cleaner objects with id, name, currency.code, balance.amount, and balance.currency.

1// Transformer: normalize Coinbase accounts response
2const accounts = data.data || [];
3return accounts
4  .filter(account => parseFloat(account.balance.amount) > 0)
5  .map(account => ({
6    id: account.id,
7    name: account.name,
8    currency: account.currency.code,
9    balance: parseFloat(account.balance.amount).toFixed(8),
10    balance_currency: account.balance.currency,
11    native_balance: parseFloat(account.native_balance.amount).toFixed(2),
12    native_currency: account.native_balance.currency,
13    updated_at: new Date(account.updated_at).toLocaleDateString()
14  }));

Transaction history is queried per account through Coinbase's paginated transactions endpoint. Create a query named 'getTransactions'. Set Method to GET and Path to /v2/accounts/{{ accountsTable.selectedRow.id }}/transactions. Add URL parameters: limit → {{ paginationComponent.pageSize || 50 }}, starting_after → {{ paginationComponent.page > 1 ? lastTransactionId.value : '' }}, expand[] → buy, expand[] → sell. The expand parameter hydrates buy and sell objects inline, avoiding separate API calls to retrieve transaction details. Create a transformer named 'normalizeTransactions' that maps the response data array. Each transaction object contains type (buy, sell, send, receive, trade), amount (native crypto), native_amount (in USD or local currency), created_at, and status. The transformer should humanize these: format the date, convert amounts to readable numbers, capitalize the type, and add a color property based on transaction type (green for buy/receive, red for sell/send). Add a Select component named 'txTypeFilter' with options for All, buy, sell, send, receive. Modify the transformer to filter by txTypeFilter.value when it is not empty. Add a DatePicker component named 'txDateRange' and filter transactions where new Date(tx.created_at) falls within the selected range. For the initial implementation, fetch the most recent 50 transactions per account and filter client-side in the transformer — this avoids the complexity of Coinbase's cursor-based pagination while still showing meaningful history for most accounts.

1// Transformer: normalize and filter Coinbase transactions
2const transactions = data.data || [];
3const typeFilter = txTypeFilter.value;
4const dateStart = txDateRange.value?.[0] ? new Date(txDateRange.value[0]) : null;
5const dateEnd = txDateRange.value?.[1] ? new Date(txDateRange.value[1]) : null;
6
7const TYPE_COLORS = {
8  buy: 'green', sell: 'red', send: 'orange',
9  receive: 'blue', trade: 'purple'
10};
11
12return transactions
13  .filter(tx => !typeFilter || tx.type === typeFilter)
14  .filter(tx => {
15    if (!dateStart || !dateEnd) return true;
16    const d = new Date(tx.created_at);
17    return d >= dateStart && d <= dateEnd;
18  })
19  .map(tx => ({
20    id: tx.id,
21    type: tx.type.charAt(0).toUpperCase() + tx.type.slice(1),
22    amount: `${parseFloat(tx.amount.amount).toFixed(8)} ${tx.amount.currency}`,
23    usd_value: `$${parseFloat(tx.native_amount.amount).toFixed(2)}`,
24    status: tx.status,
25    date: new Date(tx.created_at).toLocaleString(),
26    color: TYPE_COLORS[tx.type] || 'gray'
27  }));

Assemble the Retool dashboard using the queries built in the previous steps. At the top, add a row of Stat components: one for Total Portfolio Value (reference the calculatePortfolioValue JavaScript query output), one for Number of Accounts ({{ getAccounts.data.length }}), and one for Today's Date. Below the stats, add a Table component named 'accountsTable' with Data set to {{ getAccounts.data }}. Configure columns: Currency (tag-styled with the currency code as the label), Balance, USD Value, and Last Updated. Enable row selection on this table — selecting a row will trigger the getTransactions query to load that account's transaction history. In the right panel or lower section, add a second Table named 'transactionsTable' with Data bound to {{ normalizeTransactions.data }}. Add a Select component for transaction type filtering and a DateRangePicker for date filtering above this table. Add a Pie Chart to the right of the accounts table showing portfolio allocation by asset: use the getAccounts.data as the dataset with currency as the category field and native_balance as the value field. Add a Refresh button at the top right that triggers all data queries simultaneously using event handlers. Use Retool's conditional column formatting on the transactionsTable to color the 'type' column based on the transaction type — green for Buy and Receive, red for Sell and Send.