Merge pull request #877 from rainlanguage/2024-09-20-inverse-ratio-fix

Update IO ratio UI in trades list
rainlanguage · Sep 24, 2024 · b483862 · b483862
2 parents 58c4981 + ca43fd3
commit b483862
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 22 deletions.
diff --git a/tauri-app/src/lib/components/tables/OrderTradesListTable.svelte b/tauri-app/src/lib/components/tables/OrderTradesListTable.svelte
@@ -36,8 +36,7 @@
     <TableHeadCell padding="p-0">Transaction Hash</TableHeadCell>
     <TableHeadCell padding="p-0">Input</TableHeadCell>
     <TableHeadCell padding="p-0">Output</TableHeadCell>
-    <TableHeadCell padding="p-0">Input/Output Ratio</TableHeadCell>
-    <TableHeadCell padding="p-0">Output/Input Ratio</TableHeadCell>
+    <TableHeadCell padding="p-0">IO Ratio</TableHeadCell>
     <TableHeadCell padding="p-0"></TableHeadCell>
   </svelte:fragment>
 
@@ -65,7 +64,7 @@
       )}
       {item.outputVaultBalanceChange.vault.token.symbol}
     </TableBodyCell>
-    <TableBodyCell tdClass="break-all py-2" data-testid="input-output-ratio">
+    <TableBodyCell tdClass="break-all py-2" data-testid="io-ratio">
       {Math.abs(
         Number(
           formatUnits(
@@ -80,22 +79,22 @@
             ),
           ),
       )}
-    </TableBodyCell>
-    <TableBodyCell tdClass="break-all py-2" data-testid="output-input-ratio">
-      {Math.abs(
-        Number(
-          formatUnits(
-            BigInt(item.outputVaultBalanceChange.amount),
-            Number(item.outputVaultBalanceChange.vault.token.decimals ?? 0),
-          ),
-        ) /
+      <span class="text-gray-400">
+        ({Math.abs(
           Number(
             formatUnits(
-              BigInt(item.inputVaultBalanceChange.amount),
-              Number(item.inputVaultBalanceChange.vault.token.decimals ?? 0),
+              BigInt(item.outputVaultBalanceChange.amount),
+              Number(item.outputVaultBalanceChange.vault.token.decimals ?? 0),
             ),
-          ),
-      )}
+          ) /
+            Number(
+              formatUnits(
+                BigInt(item.inputVaultBalanceChange.amount),
+                Number(item.inputVaultBalanceChange.vault.token.decimals ?? 0),
+              ),
+            ),
+        )})
+      </span>
     </TableBodyCell>
     <TableBodyCell tdClass="py-2">
       <button

diff --git a/tauri-app/src/lib/components/tables/OrderTradesListTable.test.ts b/tauri-app/src/lib/components/tables/OrderTradesListTable.test.ts
@@ -190,8 +190,8 @@ test('renders table with correct data', async () => {
   });
 
   await waitFor(async () => {
-    const inputOutputRatios = screen.getAllByTestId('input-output-ratio');
-    const outputInputRatios = screen.getAllByTestId('output-input-ratio');
+    // get all the io ratios
+    const rows = screen.getAllByTestId('io-ratio');
 
     // checking the io ratios
     for (let i = 0; i < mockTakeOrdersList.length; i++) {
@@ -203,10 +203,10 @@ test('renders table with correct data', async () => {
         BigInt(mockTakeOrdersList[i].outputVaultBalanceChange.amount),
         Number(mockTakeOrdersList[i].outputVaultBalanceChange.vault.token.decimals),
       );
-      const expectedInputOutputRatio = Math.abs(Number(inputDisplay) / Number(outputDisplay));
-      const expectedOutputInputRatio = Math.abs(Number(outputDisplay) / Number(inputDisplay));
-      expect(inputOutputRatios[i]).toHaveTextContent(expectedInputOutputRatio.toString());
-      expect(outputInputRatios[i]).toHaveTextContent(expectedOutputInputRatio.toString());
+      const ioRatio = Number(inputDisplay) / Number(outputDisplay);
+      const oiRatio = Number(outputDisplay) / Number(inputDisplay);
+      expect(rows[i]).toHaveTextContent(ioRatio.toString());
+      expect(rows[i]).toHaveTextContent(oiRatio.toString());
     }
   });
 });