Fix conversion rate and properly format it

PelagusWallet · Oct 22, 2024 · cde8408 · cde8408
1 parent 2dbc11b
commit cde8408
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 11 deletions.
diff --git a/background/redux-slices/convertAssets.ts b/background/redux-slices/convertAssets.ts
@@ -1,6 +1,6 @@
 import { createSlice } from "@reduxjs/toolkit"
 import { isUtxoAccountTypeGuard } from "@pelagus/pelagus-ui/utils/accounts"
-import { toBigInt } from "quais"
+import { Zone, parseQi, parseQuai } from "quais"
 import { AccountTotal } from "./selectors"
 import { createBackgroundAsyncThunk } from "./utils"
 import { RootState } from "./index"
@@ -77,12 +77,22 @@ export const setConvertRateHandle = createBackgroundAsyncThunk(
   "convertAssets/setConvertRateHandle",
   async (_, { getState, dispatch }) => {
     const { convertAssets } = getState() as RootState
-
-    if (convertAssets?.from && isUtxoAccountTypeGuard(convertAssets?.from)) {
-      dispatch(setConvertRate(3000))
+    const { jsonRpcProvider } = globalThis.main.chainService
+    let rate = 0n
+    const convertingFromUtxoAccount =
+      convertAssets?.from && isUtxoAccountTypeGuard(convertAssets?.from)
+    if (convertingFromUtxoAccount) {
+      rate = await jsonRpcProvider.getLatestQiRate(Zone.Cyprus1, parseQi("100"))
+      dispatch(setConvertRate(Number(rate) / 10e18))
       return
     }
-    dispatch(setConvertRate(0.0003))
+
+    // console.log("10 Quai", parseQuai("10"))
+    rate = await jsonRpcProvider.getLatestQuaiRate(
+      Zone.Cyprus1,
+      parseQuai("10")
+    )
+    dispatch(setConvertRate(Number(rate) / 10e3))
   }
 )
 

diff --git a/ui/components/_NewDesign/ConvertAsset/ConvertFromAmount/ConvertFromAmount.tsx b/ui/components/_NewDesign/ConvertAsset/ConvertFromAmount/ConvertFromAmount.tsx
@@ -43,7 +43,7 @@ const ConvertFromAmount = () => {
         formatQi(
           convertFromAccount?.balances[Zone.Cyprus1]?.assetAmount?.amount
         )
-      )?.toFixed(4)}`
+      )?.toFixed(3)}`
 
       setInputValue(qiMaxamount)
       await dispatch(setConvertAmount(qiMaxamount))

diff --git a/ui/components/_NewDesign/ConvertAsset/ConvertRate/ConvertRate.tsx b/ui/components/_NewDesign/ConvertAsset/ConvertRate/ConvertRate.tsx
@@ -1,7 +1,8 @@
-import React, { useEffect } from "react"
+import React, { useEffect, useState } from "react"
 import { setConvertRateHandle } from "@pelagus/pelagus-background/redux-slices/convertAssets"
 import { useBackgroundDispatch, useBackgroundSelector } from "../../../../hooks"
 import { isUtxoAccountTypeGuard } from "../../../../utils/accounts"
+import { formatQuai, formatQi, parseQi, parseQuai } from "quais"
 
 const ConvertRate = () => {
   const dispatch = useBackgroundDispatch()
@@ -10,17 +11,36 @@ const ConvertRate = () => {
     (state) => state.convertAssets.from
   )
 
+  const [formattedRate, setFormattedRate] = useState("")
+  const [fromAsset, setFromAsset] = useState("")
+  const [toAsset, setToAsset] = useState("")
+
   useEffect(() => {
     dispatch(setConvertRateHandle())
   }, [])
 
+  useEffect(() => {
+    if (!convertFromAccount) return
+    const convertingFromUtxoAccount = isUtxoAccountTypeGuard(convertFromAccount)
+    if (convertingFromUtxoAccount) {
+      setFromAsset("QI")
+      setToAsset("QUAI")
+      setFormattedRate(rate.toFixed(4))
+      return
+    } else {
+      setFromAsset("QUAI")
+      setToAsset("QI")
+      setFormattedRate(rate.toFixed(3))
+    }
+  }, [rate])
+
   if (!convertFromAccount) return <></>
 
+
   return (
     <>
       <h5 className="rate">
-        1 {isUtxoAccountTypeGuard(convertFromAccount) ? "QI" : "QUAI"} ≈ {rate}{" "}
-        {isUtxoAccountTypeGuard(convertFromAccount) ? "QUAI" : "QI"}
+        1 {fromAsset} ≈ {formattedRate} {toAsset}
       </h5>
       <style jsx>{`
         .rate {

diff --git a/ui/components/_NewDesign/ConvertAsset/ConvertToAmount/ConvertToAmount.tsx b/ui/components/_NewDesign/ConvertAsset/ConvertToAmount/ConvertToAmount.tsx
@@ -12,10 +12,10 @@ const ConvertToAmount = () => {
   const rate = useBackgroundSelector((state) => state.convertAssets.rate)
 
   const tokenLabelHandle = () => {
-    if (convertToAccount && isUtxoAccountTypeGuard(convertToAccount)) {
+    const convertingToUtxoAccount = convertToAccount && isUtxoAccountTypeGuard(convertToAccount)
+    if (convertingToUtxoAccount) {
       return "QI"
     }
-
     return "QUAI"
   }
 
@@ -24,6 +24,10 @@ const ConvertToAmount = () => {
       return <SharedLoadingSpinner size="small" />
     }
 
+    const convertingToUtxoAccount = convertToAccount && isUtxoAccountTypeGuard(convertToAccount)
+    if (convertingToUtxoAccount) {
+      return (Number(amount) * rate).toFixed(3)
+    }
     return (Number(amount) * rate).toFixed(4)
   }