feat: display USD for stablecoin payment tokens

taggrx · Aug 8, 2024 · a351b94 · a351b94
1 parent d4c0c96
commit a351b94
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 20 deletions.
diff --git a/src/frontend/src/common.tsx b/src/frontend/src/common.tsx
@@ -4,7 +4,11 @@ import { Order } from "./types";
 export const Error = ({ text }: { text: string }) => <h1>Error: {text}</h1>;
 
 export const paymentTokenId = () => window.data.payment_token_id.toString();
-export const paymentTokenData = () => window.tokenData[paymentTokenId()];
+export const paymentTokenData = () => {
+    const data = window.tokenData[paymentTokenId()];
+    if (data.symbol == "ckUSDC" || data.symbol == "ckUSDT") data.symbol = "USD";
+    return data;
+};
 
 export const mainnetMode = process.env.NODE_ENV == "production";
 

diff --git a/src/frontend/src/landing.tsx b/src/frontend/src/landing.tsx
@@ -91,7 +91,8 @@ export const Landing = ({}) => {
                 <div className="dbcell">
                     <span>24H VOLUME</span>
                     <code>
-                        ${token(volume_day, paymentToken.decimals, false)}{" "}
+                        {token(volume_day, paymentToken.decimals, false)}{" "}
+                        {paymentToken.symbol}
                     </code>
                 </div>
                 <div className="dbcell">

diff --git a/src/frontend/src/order_book.tsx b/src/frontend/src/order_book.tsx
@@ -47,7 +47,7 @@ export const OrderBook = ({
         sell: sellOrders.filter(filter),
     };
 
-    const tokenData = window.tokenData[tokenId];
+    const { symbol, decimals } = window.tokenData[tokenId];
     const paymentToken = paymentTokenData();
 
     const userOrdersList = (orders: Order[], type: OrderType) =>
@@ -64,8 +64,7 @@ export const OrderBook = ({
                     {type.toString().toUpperCase()}
                 </td>
                 <td>
-                    <code>{token(order.amount, tokenData.decimals)}</code>{" "}
-                    {tokenData.symbol}
+                    <code>{token(order.amount, decimals)}</code> {symbol}
                 </td>
                 <td
                     style={{
@@ -140,9 +139,9 @@ export const OrderBook = ({
                                         (acc, order) => acc + order.amount,
                                         BigInt(0),
                                     ),
-                                    tokenData.decimals,
+                                    decimals,
                                 ).toLocaleString()}{" "}
-                                {tokenData.symbol}
+                                {symbol}
                             </>
                         )}
                     </h4>
@@ -196,10 +195,7 @@ export const OrderBook = ({
                                             : "#cc0000",
                                 }}
                             >
-                                {token(
-                                    order.amount,
-                                    window.tokenData[tokenId].decimals,
-                                )}
+                                {token(order.amount, decimals)}
                             </div>
                         </div>
                     ),

diff --git a/src/frontend/src/token.tsx b/src/frontend/src/token.tsx
@@ -22,19 +22,18 @@ export const Token = ({ tokenId }: { tokenId: string }) => {
         if (tokenId) loadData(tokenId);
     }, [tokenId]);
 
-    const metadata = window.tokenData[tokenId];
+    const tokenData = window.tokenData[tokenId];
 
-    if (!metadata) {
+    if (!tokenData) {
         return <Listing tokenId={tokenId} />;
     }
 
-    const { symbol, logo } = metadata;
+    const { symbol, decimals, logo } = tokenData;
     const callback = () => {
         window.refreshBackendData();
         setHeartbeat(new Date());
         loadData(tokenId);
     };
-    const tokenData = window.tokenData[tokenId];
     return (
         <>
             <div className="row_container vcentered x_large_text bottom_spaced">
@@ -117,12 +116,9 @@ export const Token = ({ tokenId }: { tokenId: string }) => {
                                     </td>
                                     <td>
                                         <code>
-                                            {token(
-                                                order.amount,
-                                                tokenData.decimals,
-                                            )}
+                                            {token(order.amount, decimals)}
                                         </code>{" "}
-                                        {tokenData.symbol}
+                                        {symbol}
                                     </td>
                                     <td
                                         style={{