feat: fetch coinbase activity

reown-com · Jan 3, 2024 · fa01824 · fa01824
1 parent a27df69
commit fa01824
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 24 deletions.
diff --git a/packages/common/src/utils/TypeUtil.ts b/packages/common/src/utils/TypeUtil.ts
@@ -1,3 +1,8 @@
+export type CoinbaseTransactionStatus =
+  | 'ONRAMP_TRANSACTION_STATUS_SUCCESS'
+  | 'ONRAMP_TRANSACTION_STATUS_IN_PROGRESS'
+  | 'ONRAMP_TRANSACTION_STATUS_FAILED'
+
 export type TransactionStatus = 'confirmed' | 'failed' | 'pending'
 
 export type TransactionDirection = 'in' | 'out' | 'self'
@@ -19,7 +24,7 @@ export interface TransactionMetadata {
   minedAt: string
   sentFrom: string
   sentTo: string
-  status: TransactionStatus
+  status: TransactionStatus | CoinbaseTransactionStatus
   nonce: number
 }
 

diff --git a/packages/core/src/controllers/BlockchainApiController.ts b/packages/core/src/controllers/BlockchainApiController.ts
@@ -43,11 +43,13 @@ export const BlockchainApiController = {
     })
   },
 
-  fetchTransactions({ account, projectId, cursor }: BlockchainApiTransactionsRequest) {
+  fetchTransactions({ account, projectId, cursor, onramp }: BlockchainApiTransactionsRequest) {
     const queryParams = cursor ? { cursor } : {}
 
     return api.get<BlockchainApiTransactionsResponse>({
-      path: `/v1/account/${account}/history?projectId=${projectId}`,
+      path: `/v1/account/${account}/history?projectId=${projectId}${
+        onramp ? '&onramp=' + onramp : ''
+      }`,
       params: queryParams
     })
   }

diff --git a/packages/core/src/utils/TypeUtil.ts b/packages/core/src/utils/TypeUtil.ts
@@ -141,6 +141,7 @@ export interface BlockchainApiTransactionsRequest {
   account: string
   projectId: string
   cursor?: string
+  onramp?: 'coinbase'
 }
 
 export interface BlockchainApiTransactionsResponse {

diff --git a/packages/scaffold/src/views/w3m-onramp-activity-view/index.ts b/packages/scaffold/src/views/w3m-onramp-activity-view/index.ts
@@ -1,9 +1,9 @@
-import { DateUtil } from '@web3modal/common'
+import { DateUtil, type Transaction } from '@web3modal/common'
 import {
-  CoinbaseApiController,
-  type CoinbaseTransaction,
   AccountController,
-  OnRampController
+  OnRampController,
+  BlockchainApiController,
+  OptionsController
 } from '@web3modal/core'
 import { customElement } from '@web3modal/ui'
 import { LitElement, html } from 'lit'
@@ -25,10 +25,9 @@ export class W3mOnRampActivityView extends LitElement {
 
   @state() protected loading = false
 
-  @state() private coinbaseTransactions: CoinbaseTransaction[] = []
+  @state() private coinbaseTransactions: Transaction[] = []
 
   public constructor() {
-    console.log('W3mOnRampActivityView')
     super()
     this.unsubscribe.push(
       ...[
@@ -51,27 +50,29 @@ export class W3mOnRampActivityView extends LitElement {
 
   // -- Private ------------------------------------------- //
   private onRampActivitiesTemplate() {
-    return this.coinbaseTransactions.map(transaction => {
-      const date = DateUtil.getRelativeDateFromNow(transaction.created_at)
+    return this.coinbaseTransactions?.map(transaction => {
+      const date = DateUtil.getRelativeDateFromNow(transaction.metadata.minedAt)
+      const transfer = transaction.transfers[0]
+      const fungibleInfo = transfer?.fungible_info
+
+      if (!fungibleInfo) return null
 
       return html`
         <wui-onramp-activity-item
           label="Bought"
-          .completed=${transaction.status === 'ONRAMP_TRANSACTION_STATUS_SUCCESS'}
-          .inProgress=${transaction.status === 'ONRAMP_TRANSACTION_STATUS_IN_PROGRESS'}
-          .failed=${transaction.status === 'ONRAMP_TRANSACTION_STATUS_FAILED'}
-          purchaseCurrency=${transaction.purchase_amount.currency}
-          purchaseValue=${transaction.purchase_amount.value}
+          .completed=${transaction.metadata.status === 'ONRAMP_TRANSACTION_STATUS_SUCCESS'}
+          .inProgress=${transaction.metadata.status === 'ONRAMP_TRANSACTION_STATUS_IN_PROGRESS'}
+          .failed=${transaction.metadata.status === 'ONRAMP_TRANSACTION_STATUS_FAILED'}
+          purchaseCurrency=${fungibleInfo.symbol}
+          purchaseValue=${transfer.quantity.numeric}
           date=${date}
-          feeRange=${transaction.payment_total}
         ></wui-onramp-activity-item>
       `
     })
   }
 
   private async fetchTransactions() {
-    const provider = OnRampController.state.selectedProvider?.name
-    console.log('provider', provider)
+    const provider = 'coinbase'
 
     if (provider === 'coinbase') {
       await this.fetchCoinbaseTransactions()
@@ -80,21 +81,26 @@ export class W3mOnRampActivityView extends LitElement {
 
   private async fetchCoinbaseTransactions() {
     const address = AccountController.state.address
+    const projectId = OptionsController.state.projectId
 
     if (!address) {
       throw new Error('No address found')
     }
 
+    if (!projectId) {
+      throw new Error('No projectId found')
+    }
+
     this.loading = true
 
-    const coinbaseResponse = await CoinbaseApiController.fetchTransactions({
-      accountAddress: address,
-      pageSize: 15,
-      pageKey: ''
+    const coinbaseResponse = await BlockchainApiController.fetchTransactions({
+      account: address,
+      onramp: 'coinbase',
+      projectId
     })
 
     this.loading = false
-    this.coinbaseTransactions = coinbaseResponse.transactions
+    this.coinbaseTransactions = coinbaseResponse.data || []
   }
 
   private templateLoading() {