chore: displaying usd prices on confirm page

greymass · Sep 2, 2023 · 5867190 · 5867190
1 parent 31adcd6
commit 5867190
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 11 deletions.
diff --git a/src/lib/fiat.ts b/src/lib/fiat.ts
@@ -0,0 +1,8 @@
+const currencyFormatter = new Intl.NumberFormat('en-US', {style: 'currency', currency: 'USD'})
+export function fiatFormat(value: number) {
+    return currencyFormatter.format(value)
+}
+
+export function valueInFiat(value: number, price: number) {
+    return fiatFormat(value * price)
+}
diff --git a/src/pages/dashboard/index.svelte b/src/pages/dashboard/index.svelte
@@ -6,6 +6,7 @@
     import {getClient} from '~/api-client'
     import {DelegatedBandwidth} from '~/abi-types'
     import {ChainFeatures} from '~/config'
+    import { fiatFormat } from '~/lib/fiat'
 
     import {activeSession, activeBlockchain, currentAccount, activePriceTicker} from '~/store'
     import {balances, fetchBalances} from '~/stores/balances'
@@ -130,11 +131,6 @@
         }
     )
 
-    const currencyFormatter = new Intl.NumberFormat('en-US', {style: 'currency', currency: 'USD'})
-    function fiatFormat(value: number) {
-        return currencyFormatter.format(value)
-    }
-
     function refresh() {
         if ($activeSession) {
             fetchBalances($activeSession, true)

diff --git a/src/pages/transfer/confirm.svelte b/src/pages/transfer/confirm.svelte
@@ -1,8 +1,9 @@
 <script lang="ts">
     import type {Asset} from '@greymass/eosio'
     import Button from '~/components/elements/button.svelte'
+    import { valueInFiat } from '~/lib/fiat'
 
-    import {evmAccount, activeSession} from '~/store'
+    import {evmAccount, activeSession, activePriceTicker} from '~/store'
     import type {Token} from '~/stores/tokens'
 
     export let from: Token
@@ -59,6 +60,14 @@
 
                     &:first-of-type {
                         font-weight: bold;
+                        display: flex;
+                        align-items: center;
+                    }
+
+                    .fiat-value {
+                        margin-top: 5px;
+                        font-size: 1em;
+                        color: gray;
                     }
                 }
             }
@@ -97,24 +106,44 @@
     <table>
         <tr>
             <td>From {from.name === 'EOS (EVM)' ? 'EVM' : from.name}</td>
-            <td>{from?.name === 'EVM' ? $evmAccount?.address : $activeSession?.auth.actor}</td
-            >
+            <td>{from?.name === 'EVM' ? $evmAccount?.address : $activeSession?.auth.actor}</td>
         </tr>
         <tr>
             <td>To {to.name}</td>
             <td>{from?.name === 'EOS' ? $evmAccount?.address : $activeSession?.auth.actor}</td>
         </tr>
         <tr>
             <td>Deposit Amount</td>
-            <td>{depositAmount}</td>
+            <td>
+                <div>
+                    {depositAmount}
+                </div>
+                <div class="fiat-value">
+                    ~{ valueInFiat(depositAmount?.value, $activePriceTicker)}
+                </div>
+            </td>
         </tr>
         <tr>
             <td>Fee Amount</td>
-            <td>{feeAmount || '0.0000 EOS'}</td>
+            <td>
+                <div>
+                    {feeAmount || '0.0000 EOS'}
+                </div>
+                <div class="fiat-value">
+                    ~{ valueInFiat(feeAmount?.value || 0, $activePriceTicker)}
+                </div>
+            </td>
         </tr>
         <tr>
             <td>Received Amount</td>
-            <td>{receivedAmount}</td>
+            <td>
+                <div>
+                    {receivedAmount}
+                </div>
+                <div class="fiat-value">
+                    ~{ valueInFiat(receivedAmount?.value, $activePriceTicker)}
+                </div>
+            </td>
         </tr>
     </table>
     <div class="bottom-section">