fix/swap calcs (#3346)

reown-com · Dec 2, 2024 · b7b8e3d · b7b8e3d
1 parent 0c55e65
commit b7b8e3d
Show file tree

Hide file tree

Showing 6 changed files with 79 additions and 13 deletions.
diff --git a/.changeset/twelve-moles-leave.md b/.changeset/twelve-moles-leave.md
@@ -0,0 +1,20 @@
+---
+'@reown/appkit-scaffold-ui': patch
+'@reown/appkit': patch
+'@reown/appkit-common': patch
+'@reown/appkit-core': patch
+'@reown/appkit-adapter-ethers': patch
+'@reown/appkit-adapter-ethers5': patch
+'@reown/appkit-adapter-solana': patch
+'@reown/appkit-adapter-wagmi': patch
+'@reown/appkit-utils': patch
+'@reown/appkit-cdn': patch
+'@reown/appkit-experimental': patch
+'@reown/appkit-polyfills': patch
+'@reown/appkit-siwe': patch
+'@reown/appkit-siwx': patch
+'@reown/appkit-ui': patch
+'@reown/appkit-wallet': patch
+---
+
+fix: show correct market price in swaps + ui improvements
diff --git a/packages/common/src/utils/NumberUtil.ts b/packages/common/src/utils/NumberUtil.ts
@@ -44,5 +44,18 @@ export const NumberUtil = {
       maximumFractionDigits: decimals,
       minimumFractionDigits: decimals
     })
+  },
+  /**
+   * Parse a formatted local string back to a number
+   * @param value - The formatted string to parse
+   * @returns
+   */
+  parseLocalStringToNumber(value: string | undefined) {
+    if (value === undefined) {
+      return 0
+    }
+
+    // Remove any commas used as thousand separators and parse the float
+    return parseFloat(value.replace(/,/gu, ''))
   }
 }
diff --git a/packages/common/tests/NumberUtil.test.ts b/packages/common/tests/NumberUtil.test.ts
@@ -8,3 +8,40 @@ describe('NumberUtil', () => {
     expect(isGreaterThan).toBe(true)
   })
 })
+
+describe('NumberUtil.parseLocalStringToNumber', () => {
+  it('should return 0 when value is undefined', () => {
+    const result = NumberUtil.parseLocalStringToNumber(undefined)
+    expect(result).toBe(0)
+  })
+
+  it('should return the number when value is a string', () => {
+    const result = NumberUtil.parseLocalStringToNumber('123.45')
+    expect(result).toBe(123.45)
+  })
+
+  it('should return the number when value is a string with a lot of decimals', () => {
+    const result = NumberUtil.parseLocalStringToNumber('123.4567890123456789')
+    expect(result).toBe(123.4567890123456789)
+  })
+
+  it('should return the number when value is a string with zero and a lot of decimals', () => {
+    const result = NumberUtil.parseLocalStringToNumber('0.000000000000000001')
+    expect(result).toBe(0.000000000000000001)
+  })
+
+  it('should return the number when value is a string with a negative sign', () => {
+    const result = NumberUtil.parseLocalStringToNumber('-123.45')
+    expect(result).toBe(-123.45)
+  })
+
+  it('should return the number when value is a string with commas', () => {
+    const result = NumberUtil.parseLocalStringToNumber('123,456.78')
+    expect(result).toBe(123456.78)
+  })
+
+  it('should return the number when value is a string with a lot of commas', () => {
+    const result = NumberUtil.parseLocalStringToNumber('123,456,789.123,456,789')
+    expect(result).toBe(123456789.123456789)
+  })
+})
diff --git a/packages/core/src/controllers/SwapController.ts b/packages/core/src/controllers/SwapController.ts
@@ -243,7 +243,6 @@ export const SwapController = {
   },
 
   async setTokenPrice(address: string, target: SwapInputTarget) {
-    const { availableToSwap } = this.getParams()
     let price = state.tokensPriceMap[address] || 0
 
     if (!price) {
@@ -259,9 +258,10 @@ export const SwapController = {
 
     if (state.loadingPrices) {
       state.loadingPrices = false
-      if (availableToSwap) {
-        this.swapTokens()
-      }
+    }
+
+    if (this.getParams().availableToSwap) {
+      this.swapTokens()
     }
   },
 

diff --git a/packages/scaffold-ui/src/partials/w3m-swap-input/index.ts b/packages/scaffold-ui/src/partials/w3m-swap-input/index.ts
@@ -67,7 +67,7 @@ export class W3mSwapInput extends LitElement {
           />
           <wui-text class="market-value" variant="small-400" color="fg-200">
             ${isMarketValueGreaterThanZero
-              ? `$${UiHelperUtil.formatNumberToLocalString(this.marketValue, 3)}`
+              ? `$${UiHelperUtil.formatNumberToLocalString(this.marketValue, 2)}`
               : null}
           </wui-text>
         </wui-flex>
@@ -147,7 +147,7 @@ export class W3mSwapInput extends LitElement {
     return html`
       ${haveBalance
         ? html`<wui-text variant="small-400" color="fg-200">
-            ${UiHelperUtil.formatNumberToLocalString(this.balance, 3)}
+            ${UiHelperUtil.formatNumberToLocalString(this.balance, 2)}
           </wui-text>`
         : null}
       ${this.target === 'sourceToken' ? this.tokenActionButtonTemplate(haveBalance) : null}

diff --git a/packages/scaffold-ui/src/views/w3m-swap-view/index.ts b/packages/scaffold-ui/src/views/w3m-swap-view/index.ts
@@ -185,21 +185,17 @@ export class W3mSwapView extends LitElement {
     )
     const amount = target === 'toToken' ? this.toTokenAmount : this.sourceTokenAmount
     const price = target === 'toToken' ? this.toTokenPriceInUSD : this.sourceTokenPriceInUSD
-    let value = parseFloat(amount) * price
-
-    if (target === 'toToken') {
-      value -= this.gasPriceInUSD || 0
-    }
+    const marketValue = NumberUtil.parseLocalStringToNumber(amount) * price
 
     return html`<w3m-swap-input
       .value=${target === 'toToken' ? this.toTokenAmount : this.sourceTokenAmount}
-      ?disabled=${this.loadingQuote && target === 'toToken'}
+      .disabled=${target === 'toToken'}
       .onSetAmount=${this.handleChangeAmount.bind(this)}
       target=${target}
       .token=${token}
       .balance=${myToken?.quantity?.numeric}
       .price=${myToken?.price}
-      .marketValue=${value}
+      .marketValue=${marketValue}
       .onSetMaxValue=${this.onSetMaxValue.bind(this)}
     ></w3m-swap-input>`
   }