From 586719080ef059525e5dcc9c0c7af1899a90a344 Mon Sep 17 00:00:00 2001
From: dafuga <danielfugere28@gmail.com>
Date: Sat, 2 Sep 2023 00:40:18 -0700
Subject: [PATCH] chore: displaying usd prices on confirm page

---
 src/lib/fiat.ts                   |  8 ++++++
 src/pages/dashboard/index.svelte  |  6 +----
 src/pages/transfer/confirm.svelte | 41 ++++++++++++++++++++++++++-----
 3 files changed, 44 insertions(+), 11 deletions(-)
 create mode 100644 src/lib/fiat.ts

diff --git a/src/lib/fiat.ts b/src/lib/fiat.ts
new file mode 100644
index 00000000..d671ec97
--- /dev/null
+++ 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)
+}
\ No newline at end of file
diff --git a/src/pages/dashboard/index.svelte b/src/pages/dashboard/index.svelte
index 4daf35c3..bc89da1c 100644
--- 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
index 78fd0531..16ee2b34 100644
--- 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,8 +106,7 @@
     <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>
@@ -106,15 +114,36 @@
         </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">