chore: onramp improvements (#1935)

reown-com · Feb 21, 2024 · b4b2ae6 · b4b2ae6
1 parent a186076
commit b4b2ae6
Show file tree

Hide file tree

Showing 8 changed files with 149 additions and 133 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/core/src/controllers/TransactionsController.ts b/packages/core/src/controllers/TransactionsController.ts
@@ -93,27 +93,19 @@ export const TransactionsController = {
     transactionsMap: TransactionByYearMap = {},
     transactions: Transaction[] = []
   ) {
-    const grouped: TransactionByYearMap = transactionsMap
-
+    const grouped = transactionsMap
     transactions.forEach(transaction => {
       const year = new Date(transaction.metadata.minedAt).getFullYear()
       const month = new Date(transaction.metadata.minedAt).getMonth()
       const yearTransactions = grouped[year] ?? {}
       const monthTransactions = yearTransactions[month] ?? []
 
-      if (
-        monthTransactions.find(
-          t =>
-            t.metadata.hash === transaction.metadata.hash &&
-            t.metadata.status === transaction.metadata.status
-        )
-      ) {
-        return
-      }
+      // If there's a transaction with the same id, remove the old one
+      const newMonthTransactions = monthTransactions.filter(tx => tx.id !== transaction.id)
 
       grouped[year] = {
         ...yearTransactions,
-        [month]: [...monthTransactions, transaction].sort(
+        [month]: [...newMonthTransactions, transaction].sort(
           (a, b) => new Date(b.metadata.minedAt).getTime() - new Date(a.metadata.minedAt).getTime()
         )
       }

diff --git a/packages/core/src/utils/ConstantsUtil.ts b/packages/core/src/utils/ConstantsUtil.ts
@@ -48,7 +48,8 @@ export const ConstantsUtil = {
     'polygon',
     'avalanche-c-chain',
     'optimism',
-    'celo'
+    'celo',
+    'base'
   ],
 
   WC_COINBASE_PAY_SDK_FALLBACK_CHAIN: 'ethereum',
@@ -59,7 +60,8 @@ export const ConstantsUtil = {
     Polygon: 'polygon',
     Avalanche: 'avalanche-c-chain',
     'OP Mainnet': 'optimism',
-    Celo: 'celo'
+    Celo: 'celo',
+    Base: 'base'
   },
 
   WC_COINBASE_ONRAMP_APP_ID: 'bf18c88d-495a-463b-b249-0b9d3656cf5e'

diff --git a/packages/scaffold/src/views/w3m-account-view/index.ts b/packages/scaffold/src/views/w3m-account-view/index.ts
@@ -172,11 +172,11 @@ export class W3mAccountView extends LitElement {
     return html`
       <wui-list-item
         iconVariant="blue"
-        icon="add"
+        icon="card"
         ?chevron=${true}
         @click=${this.handleClickPay.bind(this)}
       >
-        <wui-text variant="paragraph-500" color="fg-100">Buy</wui-text>
+        <wui-text variant="paragraph-500" color="fg-100">Buy crypto</wui-text>
       </wui-list-item>
     `
   }

diff --git a/packages/scaffold/src/views/w3m-buy-in-progress-view/index.ts b/packages/scaffold/src/views/w3m-buy-in-progress-view/index.ts
@@ -35,7 +35,7 @@ export class W3mBuyInProgressView extends LitElement {
 
   @state() private error = false
 
-  @state() private intervalId: NodeJS.Timeout | null = null
+  @state() private intervalId?: NodeJS.Timeout
 
   @state() private startTime: number | null = null
 
@@ -142,43 +142,42 @@ export class W3mBuyInProgressView extends LitElement {
 
   private async initializeCoinbaseTransactions() {
     await this.watchCoinbaseTransactions()
-    this.intervalId = setInterval(() => this.watchCoinbaseTransactions(), 10000)
+    this.intervalId = setInterval(() => this.watchCoinbaseTransactions(), 4000)
   }
 
   private async watchCoinbaseTransactions() {
     try {
-      await this.fetchCoinbaseTransactions()
+      const address = AccountController.state.address
+      const projectId = OptionsController.state.projectId
+      if (!address) {
+        throw new Error('No address found')
+      }
+
+      const coinbaseResponse = await BlockchainApiController.fetchTransactions({
+        account: address,
+        onramp: 'coinbase',
+        projectId
+      })
+
+      const newTransactions = coinbaseResponse.data.filter(
+        tx =>
+          // @ts-expect-error - start time will always be set at this point
+          new Date(tx.metadata.minedAt) > new Date(this.startTime) ||
+          tx.metadata.status === 'ONRAMP_TRANSACTION_STATUS_IN_PROGRESS'
+      )
+
+      if (newTransactions.length) {
+        clearInterval(this.intervalId)
+        RouterController.replace('OnRampActivity')
+      } else if (this.startTime && Date.now() - this.startTime >= 180_000) {
+        clearInterval(this.intervalId)
+        this.error = true
+      }
     } catch (error) {
       SnackController.showError(error)
     }
   }
 
-  private async fetchCoinbaseTransactions() {
-    const address = AccountController.state.address
-    const projectId = OptionsController.state.projectId
-    if (!address) {
-      throw new Error('No address found')
-    }
-
-    const coinbaseResponse = await BlockchainApiController.fetchTransactions({
-      account: address,
-      onramp: 'coinbase',
-      projectId
-    })
-
-    const pendingTransactions = coinbaseResponse.data.filter(
-      tx => tx.metadata.status === 'ONRAMP_TRANSACTION_STATUS_IN_PROGRESS'
-    )
-
-    if (pendingTransactions.length && this.intervalId) {
-      clearInterval(this.intervalId)
-      RouterController.replace('OnRampActivity')
-    } else if (this.startTime && Date.now() - this.startTime >= 180_000 && this.intervalId) {
-      clearInterval(this.intervalId)
-      this.error = true
-    }
-  }
-
   private onTryAgain() {
     if (!this.selectedOnRampProvider) {
       return

diff --git a/packages/scaffold/src/views/w3m-onramp-activity-view/index.ts b/packages/scaffold/src/views/w3m-onramp-activity-view/index.ts
@@ -158,6 +158,7 @@ export class W3mOnRampActivityView extends LitElement {
   private refetchLoadingTransactions() {
     const today = new Date()
     const currentMonthTxs = this.coinbaseTransactions[today.getFullYear()]?.[today.getMonth()] || []
+
     const loadingTransactions = currentMonthTxs.filter(
       transaction => transaction.metadata.status === 'ONRAMP_TRANSACTION_STATUS_IN_PROGRESS'
     )

diff --git a/packages/scaffold/src/views/w3m-what-is-a-buy-view/index.ts b/packages/scaffold/src/views/w3m-what-is-a-buy-view/index.ts
@@ -14,14 +14,14 @@ export class W3mWhatIsABuyView extends LitElement {
         gap="xl"
       >
         <wui-visual name="onrampCard"></wui-visual>
-        <wui-flex flexDirection="column" gap="xs">
+        <wui-flex flexDirection="column" gap="xs" alignItems="center">
           <wui-text align="center" variant="paragraph-500" color="fg-100">
-            Buy assets to unlock your trade opportunities
+            Quickly and easily buy digital assets!
+          </wui-text>
+          <wui-text align="center" variant="small-400" color="fg-200">
+            Simply select your preferred onramp provider and add digital assets to your account
+            using your credit card or bank transfer
           </wui-text>
-          <wui-text align="center" variant="small-400" color="fg-200"
-            >With on-ram Buy, simply buy crypto with fiat via credit card or bank transfer and add
-            funds in your wallet to trade</wui-text
-          >
         </wui-flex>
         <wui-button @click=${RouterController.goBack}>
           <wui-icon size="sm" color="inherit" name="add" slot="iconLeft"></wui-icon>

diff --git a/packages/ui/src/composites/wui-onramp-provider-item/index.ts b/packages/ui/src/composites/wui-onramp-provider-item/index.ts
@@ -57,7 +57,7 @@ export class WuiOnRampProviderItem extends LitElement {
   // -- Private ------------------------------------------- //
   private networksTemplate() {
     const networks = NetworkController.getRequestedCaipNetworks()
-    const slicedNetworks = networks?.slice(0, 5)
+    const slicedNetworks = networks?.filter(network => network?.imageId)?.slice(0, 5)
 
     return html`
       <wui-flex class="networks">