Skip to content

Commit

Permalink
fix: onramp activity status and refetch (#1895)
Browse files Browse the repository at this point in the history
  • Loading branch information
tomiir authored Feb 9, 2024
1 parent e686adc commit 1cce358
Show file tree
Hide file tree
Showing 3 changed files with 45 additions and 6 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,10 @@ export class W3mOnRampActivityView extends LitElement {
AssetController.subscribeKey('tokenImages', val => (this.tokenImages = val)),
() => {
clearTimeout(this.refetchTimeout)
}
},
TransactionsController.subscribe(val => {
this.coinbaseTransactions = { ...val.coinbaseTransactions }
})
]
)
this.fetchTransactions()
Expand Down Expand Up @@ -80,6 +83,7 @@ export class W3mOnRampActivityView extends LitElement {
purchaseValue=${transfer.quantity.numeric}
date=${date}
icon=${ifDefined(icon)}
symbol=${ifDefined(fungibleInfo.symbol)}
></wui-onramp-activity-item>
`
})
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,10 @@ export default css`
justify-content: flex-start;
}
:host > wui-flex > wui-flex {
width: 100%;
}
wui-transaction-list-item-loader {
width: 100%;
}
Expand Down
41 changes: 36 additions & 5 deletions packages/ui/src/composites/wui-onramp-activity-item/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import { elementStyles, resetStyles } from '../../utils/ThemeUtil.js'
import type { ColorType } from '../../utils/TypeUtil.js'
import { customElement } from '../../utils/WebComponentsUtil.js'
import styles from './styles.js'
import { ApiController } from '@web3modal/core'

@customElement('wui-onramp-activity-item')
export class WuiOnRampActivityItem extends LitElement {
Expand All @@ -32,16 +33,24 @@ export class WuiOnRampActivityItem extends LitElement {

@property() public onClick: (() => void) | null = null

@property() public icon = 'https://avatar.vercel.sh/andrew.svg?size=50&text=USDC'
@property() public symbol = ''

@property() public icon?: string

// -- Render -------------------------------------------- //
public override firstUpdated() {
if (!this.icon) {
this.fetchTokenImage()
}
}

public override render() {
return html`
<wui-flex>
${this.imageTemplate()}
<wui-flex flexDirection="column" gap="4xs" flexGrow="1">
<wui-flex gap="xxs" alignItems="center" justifyContent="flex-start">
${this.completed ? this.boughtIconTemplate() : null}
${this.statusIconTemplate()}
<wui-text variant="paragraph-500" color="fg-100"> ${this.label}</wui-text>
</wui-flex>
<wui-text variant="small-400" color="fg-200">
Expand All @@ -56,10 +65,33 @@ export class WuiOnRampActivityItem extends LitElement {
}

// -- Private ------------------------------------------- //
private async fetchTokenImage() {
await ApiController._fetchTokenImage(this.purchaseCurrency)
}
private statusIconTemplate() {
if (this.inProgress) {
return null
}

return this.completed ? this.boughtIconTemplate() : this.errorIconTemplate()
}

private errorIconTemplate() {
return html`<wui-icon-box
size="xxs"
iconColor="error-100"
backgroundColor="error-100"
background="opaque"
icon="close"
borderColor="wui-color-bg-125"
></wui-icon-box>`
}

private imageTemplate() {
const icon = this.icon || `https://avatar.vercel.sh/andrew.svg?size=50&text=${this.symbol}`

return html`<wui-flex class="purchase-image-container">
<wui-image src=${this.icon}></wui-image>
${this.completed ? null : this.boughtIconTemplate()}
<wui-image src=${icon}></wui-image>
</wui-flex>`
}

Expand All @@ -70,7 +102,6 @@ export class WuiOnRampActivityItem extends LitElement {
backgroundColor="success-100"
background="opaque"
icon="arrowBottom"
?border=${true}
borderColor="wui-color-bg-125"
></wui-icon-box>`
}
Expand Down

0 comments on commit 1cce358

Please sign in to comment.