Updated transaction details, added onclick to tx hash to check in exp…

…lorer
kryptokrona · Nov 29, 2023 · 9b2a6bc · 9b2a6bc
1 parent c06dabe
commit 9b2a6bc
Show file tree

Hide file tree

Showing 4 changed files with 56 additions and 55 deletions.
diff --git a/src/backend/electron.cjs b/src/backend/electron.cjs
@@ -701,3 +701,10 @@ ipcMain.on('disconnect-hyper', async (e, domain) => {
 ipcMain.on('send-message', async (e, data) => {
   sendMessage(data)
 })
+
+///////////// OPEN URL IN EXTERNAL BROWSER
+
+ipcMain.on('open-link', async (e, url) => {
+  const {shell} = require('electron')
+  shell.openExternal(url)
+})
diff --git a/src/backend/preload.cjs b/src/backend/preload.cjs
@@ -108,7 +108,9 @@ contextBridge.exposeInMainWorld("api", {
   },
   validatePaymentId: async (paymentId) => {
     return await ipcRenderer.invoke('validate-paymentId', paymentId)
-  }
-
+  },
+  openLink: (url) => {
+    return ipcRenderer.send("open-link", url);
+  },
 
 });
diff --git a/src/routes/wallet/dashboard/+page.svelte b/src/routes/wallet/dashboard/+page.svelte
@@ -4,9 +4,10 @@
   import Transaction from '$lib/components/layout/Transaction.svelte';
   import { goto } from '$app/navigation';
   import { createChart } from 'lightweight-charts';
+  import { transactions } from '$lib/stores/wallet';
 
   const MAX_PAGES = 2;
-  let transactions = [];
+  let transactionsList = [];
   let latestFour = [];
   let dates = [];
   let chart;
@@ -19,8 +20,8 @@
   async function renderchart() {
     let data = [];
     let runningBalance = 0.0;
-    for (const tx in transactions) {
-      const thisTx = transactions[tx];
+    for (const tx in transactionsList) {
+      const thisTx = transactionsList[tx];
       runningBalance += thisTx.amount;
       let dateFormatted = new Date(thisTx.time * 1000).toISOString().split('T')[0];
       let formattedTx = { time: dateFormatted, value: runningBalance / 100000 };
@@ -56,10 +57,7 @@
     });
     console.log(data);
     const theme = localStorage.getItem('themes');
-    console.log(document.documentElement + '.' + theme);
-    console.log(theme);
     let color = getComputedStyle(document.documentElement).getPropertyValue('--primary-color');
-    console.log(color);
     color = color.trim();
     const areaSeries = chart.addAreaSeries({
       topColor: color,
@@ -75,23 +73,23 @@
     areaSeries.setData(summarizedData);
     chart.timeScale().fitContent();
   }
-  async function getTransactions(transactions, pageNum) {
+  async function getTransactions(transactionsList, pageNum) {
     let startIndex = pageNum * 10;
     let txs = await window.api.getTransactions(startIndex);
-    transactions = transactions.concat(txs.pageTx);
+    transactionsList = transactionsList.concat(txs.pageTx);
     if (pageNum < txs.pages && MAX_PAGES > pageNum) {
-      return await getTransactions(transactions, pageNum + 1);
+      return await getTransactions(transactionsList, pageNum + 1);
     }
-    return transactions;
+    $transactions.txs = transactionsList;
+    return transactionsList;
   }
 
   async function formatTransactions() {
-    transactions = await getTransactions([], 0);
-    latestFour = transactions.slice(0, Math.min(4, transactions.length));
-    transactions.reverse();
-    dates = transactions.map((t) => new Date(t.time * 1000).toLocaleString());
+    transactionsList = await getTransactions([], 0);
+    latestFour = transactionsList.slice(0, Math.min(4, transactionsList.length));
+    transactionsList.reverse();
+    dates = transactionsList.map((t) => new Date(t.time * 1000).toLocaleString());
     dates = dates;
-    console.log(transactions);
   }
 </script>
 

diff --git a/src/routes/wallet/transaction/[hash]/+page.svelte b/src/routes/wallet/transaction/[hash]/+page.svelte
@@ -4,9 +4,9 @@
   import { page } from '$app/stores';
   import { fade } from 'svelte/transition';
   import ArrowLeft from '$lib/components/icons/ArrowLeft.svelte';
+  import { transactions } from '$lib/stores/wallet.js';
   import { goto } from '$app/navigation';
   let transaction;
-
   export let previousPage = '/wallet/dashboard';
 
   onMount(async () => {
@@ -18,23 +18,16 @@
   });
 
   async function getTransaction(hash) {
-    let endpoint = `https://blocksum.org/api/json_rpc`; // TODO, change endpoint?
-    const response = await fetch(endpoint, {
-      method: 'POST',
-      cache: 'no-cache',
-      redirect: 'follow',
-      referrerPolicy: 'no-referrer',
-      body: JSON.stringify({
-        jsonrpc: '2.0',
-        id: 'getTransaction',
-        method: 'f_transaction_json',
-        params: {
-          hash: hash,
-        },
-      }),
-    });
-    let data = await response.json();
-    transaction = data.result;
+    let thisTX = $transactions.txs.find((a) => a.hash === hash);
+    if (thisTX.amount < 0) thisTX.incoming = false;
+    else thisTX.incoming = true;
+    transaction = thisTX;
+    return;
+  }
+
+  function getTxDetails(hash) {
+    const url = `https://xkr.network/transaction?hash=${hash}`;
+    window.api.openLink(url);
   }
 </script>
 
@@ -50,28 +43,19 @@
 </div>
 <div class="wrapper">
   {#if transaction}
-    <div>
+    <div style="margin-top: .5em">
+      <p class="amount" class:incoming={transaction.incoming}>
+        {#if transaction.incoming}+{/if}{transaction.amount / 100000} XKR
+      </p>
+    </div>
+    <div style="margin-top: .5em">
       <h4>Hash</h4>
-      <p>{transaction.txDetails.hash}</p>
+      <p style="cursor: pointer;" on:click={() => getTxDetails(transaction.hash)}>{transaction.hash}</p>
+    </div>
+    <div style="margin-top: .5em">
+      <h4>Timestamp</h4>
+      <p>{new Date(transaction.time * 1000).toLocaleString()}</p>
     </div>
-    {#if transaction.block}
-      <div style="margin-top: .5em">
-        <h4>Block hash</h4>
-        <p>{transaction.block.hash}</p>
-      </div>
-      <div style="margin-top: .5em">
-        <h4>Block height</h4>
-        <p>{transaction.block.height}</p>
-      </div>
-      <div style="margin-top: .5em">
-        <h4>Block difficulty</h4>
-        <p>{transaction.block.difficulty}</p>
-      </div>
-      <div style="margin-top: .5em">
-        <h4>Timestamp</h4>
-        <p>{new Date(transaction.block.timestamp * 1000).toLocaleString()}</p>
-      </div>
-    {/if}
   {/if}
 </div>
 
@@ -122,4 +106,14 @@
       background: var(--button-hover-bg-color);
     }
   }
+
+  .amount {
+    font-size: 22px;
+    color: var(--warn-color);
+    font-family: 'Roboto Mono';
+  }
+
+  .incoming {
+    color: var(--success-color);
+  }
 </style>