feat: wallet ui - part 2/2

main/index.js

@@ -1,6 +1,6 @@
 'use strict'
 
-const { app, dialog } = require('electron')
+const { app, dialog, shell } = require('electron')
 const log = require('electron-log')
 const path = require('node:path')
 
@@ -108,7 +108,8 @@ const ctx = {
   confirmChangeWalletAddress: () => { throw new Error('never get here') },
   restartToUpdate: () => { throw new Error('never get here') },
   openReleaseNotes: () => { throw new Error('never get here') },
-  getUpdaterStatus: () => { throw new Error('never get here') }
+  getUpdaterStatus: () => { throw new Error('never get here') },
+  browseTransactionTracker: (/** @type {string} */ transactionHash) => { shell.openExternal(`https://explorer.glif.io/tx/${transactionHash}`) }
 }
 
 app.on('before-quit', () => {

main/ipc.js

@@ -26,10 +26,15 @@ function setupIpcMain (/** @type {Context} */ ctx) {
   ipcMain.handle('saturn:getFilAddress', saturnNode.getFilAddress)
   ipcMain.handle('saturn:setFilAddress', (_event, address) => saturnNode.setFilAddress(address))
   // Station-wide config
-  ipcMain.handle('station:getFilAddress', saturnNode.getFilAddress)
-  ipcMain.handle('station:setFilAddress', (_event, address) => saturnNode.setFilAddress(address))
   ipcMain.handle('station:getOnboardingCompleted', stationConfig.getOnboardingCompleted)
   ipcMain.handle('station:setOnboardingCompleted', (_event) => stationConfig.setOnboardingCompleted())
+  // Wallet-wide config
+  ipcMain.handle('station:getStationWalletAddress', stationConfig.getStationWalletAddress)
+  ipcMain.handle('station:getDestinationWalletAddress', stationConfig.getDestinationWalletAddress)
+  ipcMain.handle('station:setDestinationWalletAddress', (_event, address) => stationConfig.setDestinationWalletAddress(address))
+  ipcMain.handle('station:getStationWalletBalance', stationConfig.getStationWalletBalance)
+  ipcMain.handle('station:getStationWalletTransactionsHistory', stationConfig.getStationWalletTransactionsHistory)
+  ipcMain.handle('station:transferAllFundsToDestinationWallet', (_event, _args) => stationConfig.transferAllFundsToDestinationWallet())
 
   ipcMain.handle('station:getAllActivities', (_event, _args) => ctx.getAllActivities())
   ipcMain.handle('station:getTotalJobsCompleted', (_event, _args) => ctx.getTotalJobsCompleted())
@@ -39,6 +44,7 @@ function setupIpcMain (/** @type {Context} */ ctx) {
   ipcMain.handle('station:restartToUpdate', (_event, _args) => ctx.restartToUpdate())
   ipcMain.handle('station:openReleaseNotes', (_event) => ctx.openReleaseNotes())
   ipcMain.handle('station:getUpdaterStatus', (_events, _args) => ctx.getUpdaterStatus())
+  ipcMain.handle('station:browseTransactionTracker', (_events, transactionHash) => ctx.browseTransactionTracker(transactionHash))
 }
 
 module.exports = {

main/preload.js

@@ -2,6 +2,7 @@
 
 /** @typedef {import('electron').IpcRendererEvent} IpcRendererEvent */
 /** @typedef {import('./typings').Activity} Activity */
+/** @typedef {import('./typings').FILTransaction} TransactionMessage */
 
 const { contextBridge, ipcRenderer } = require('electron')
 
@@ -22,14 +23,19 @@ contextBridge.exposeInMainWorld('electron', {
     isReady: () => ipcRenderer.invoke('saturn:isReady'),
     getLog: () => ipcRenderer.invoke('saturn:getLog'),
     getWebUrl: () => ipcRenderer.invoke('saturn:getWebUrl'),
-    getFilAddress: () => ipcRenderer.invoke('saturn:getFilAddress'),
-    setFilAddress: (/** @type {string | undefined} */ address) => ipcRenderer.invoke('saturn:setFilAddress', address)
+    getFilAddress: () => ipcRenderer.invoke('saturn:getFilAddress'), // soon to be removed
+    setFilAddress: (/** @type {string | undefined} */ address) => ipcRenderer.invoke('saturn:setFilAddress', address) // soon to be removed
   },
   stationConfig: {
-    getFilAddress: () => ipcRenderer.invoke('station:getFilAddress'),
-    setFilAddress: (/** @type {string | undefined} */ address) => ipcRenderer.invoke('station:setFilAddress', address),
     getOnboardingCompleted: () => ipcRenderer.invoke('station:getOnboardingCompleted'),
-    setOnboardingCompleted: () => ipcRenderer.invoke('station:setOnboardingCompleted')
+    setOnboardingCompleted: () => ipcRenderer.invoke('station:setOnboardingCompleted'),
+    getStationWalletAddress: () => ipcRenderer.invoke('station:getStationWalletAddress'),
+    getDestinationWalletAddress: () => ipcRenderer.invoke('station:getDestinationWalletAddress'),
+    setDestinationWalletAddress: (/** @type {string | undefined} */ address) => ipcRenderer.invoke('station:setDestinationWalletAddress', address),
+    getStationWalletBalance: () => ipcRenderer.invoke('station:getStationWalletBalance'),
+    getStationWalletTransactionsHistory: () => ipcRenderer.invoke('station:getStationWalletTransactionsHistory'),
+    transferAllFundsToDestinationWallet: () => ipcRenderer.invoke('station:transferAllFundsToDestinationWallet'),
+    browseTransactionTracker: (/** @type {string } */ transactionHash) => ipcRenderer.invoke('station:browseTransactionTracker', transactionHash)
   },
   stationEvents: {
     onActivityLogged: (/** @type {(value: Activity) => void} */ callback) => {
@@ -54,6 +60,18 @@ contextBridge.exposeInMainWorld('electron', {
       const listener = () => callback()
       ipcRenderer.on('station:update-available', listener)
       return () => ipcRenderer.removeListener('station:update-available', listener)
+    },
+    onBalanceUpdate: (/** @type {(value: number) => void} */ callback) => {
+      /** @type {(event: IpcRendererEvent, ...args: any[]) => void} */
+      const listener = (_event, balance) => callback(balance)
+      ipcRenderer.on('station:wallet-balance-update', listener)
+      return () => ipcRenderer.removeListener('station:wallet-balance-update', listener)
+    },
+    onTransactionUpdate: (/** @type {(value: TransactionMessage) => void} */ callback) => {
+      /** @type {(event: IpcRendererEvent, ...args: any[]) => void} */
+      const listener = (_event, transactions) => callback(transactions)
+      ipcRenderer.on('station:transaction-update', listener)
+      return () => ipcRenderer.removeListener('station:transaction-update', listener)
     }
   },
   dialogs: {

main/station-config.js

@@ -7,9 +7,12 @@ const ConfigKeys = {
   OnboardingCompleted: 'station.OnboardingCompleted',
   TrayOperationExplained: 'station.TrayOperationExplained',
   StationID: 'station.StationID',
-  FilAddress: 'station.FilAddress'
+  FilAddress: 'station.FilAddress',
+  DestinationFilAddress: 'station.DestinationFilAddress'
 }
 
+/** @typedef {import('./typings').FILTransaction} TransactionMessage */
+
 // Use this to test migrations
 // https://github.com/sindresorhus/electron-store/issues/205
 // require('electron').app.setVersion('9999.9.9')
@@ -35,6 +38,7 @@ console.log('Loading Station configuration from', configStore.path)
 let OnboardingCompleted = /** @type {boolean} */ (configStore.get(ConfigKeys.OnboardingCompleted, false))
 let TrayOperationExplained = /** @type {boolean} */ (configStore.get(ConfigKeys.TrayOperationExplained, false))
 let FilAddress = /** @type {string | undefined} */ (configStore.get(ConfigKeys.FilAddress))
+let DestinationFilAddress = /** @type {string | undefined} */ (configStore.get(ConfigKeys.DestinationFilAddress))
 const StationID = /** @type {string} */ (configStore.get(ConfigKeys.StationID, randomUUID()))
 
 /**
@@ -71,7 +75,7 @@ function setTrayOperationExplained () {
  * @returns {string | undefined}
  */
 function getFilAddress () {
-  return FilAddress
+  return FilAddress || 'f0111' // needs refactor - same as getStationWalletAddress
 }
 
 /**
@@ -89,12 +93,61 @@ function getStationID () {
   return StationID
 }
 
+/**
+ * @returns {string}
+ */
+function getStationWalletAddress () {
+  return FilAddress || ''
+}
+
+/**
+ * @returns {string | undefined}
+ */
+function getDestinationWalletAddress () {
+  return DestinationFilAddress
+}
+
+/**
+ * @param {string | undefined} address
+ */
+function setDestinationWalletAddress (address) {
+  DestinationFilAddress = address
+  configStore.set(ConfigKeys.DestinationFilAddress, DestinationFilAddress)
+}
+
+/**
+ * @returns {number}
+ */
+function getStationWalletBalance () {
+  return 0 // todo - backend logic
+}
+
+/**
+ * @returns { TransactionMessage[] }
+ */
+function getStationWalletTransactionsHistory () {
+  return [] // todo - backend logic
+}
+
+/**
+ * @returns void
+ */
+function transferAllFundsToDestinationWallet () {
+  return {} // todo - backend logic
+}
+
 module.exports = {
   getOnboardingCompleted,
   setOnboardingCompleted,
   getTrayOperationExplained,
   setTrayOperationExplained,
   getFilAddress,
   setFilAddress,
-  getStationID
+  getStationID,
+  getStationWalletAddress,
+  getDestinationWalletAddress,
+  setDestinationWalletAddress,
+  getStationWalletBalance,
+  getStationWalletTransactionsHistory,
+  transferAllFundsToDestinationWallet
 }

main/typings.d.ts

@@ -1,5 +1,6 @@
 export type ActivitySource = 'Station' | 'Saturn';
 export type ActivityType = 'info' | 'error';
+export type TransactionStatus = 'sent' | 'processing' | 'failed'
 
 export interface Activity {
   id: string;
@@ -9,6 +10,15 @@ export interface Activity {
   message: string;
 }
 
+export type FILTransaction = {
+  hash: string
+  timestamp: number
+  status: TransactionStatus
+  outgoing: boolean
+  amount: string
+  address: string
+}
+
 export type RecordActivityArgs = Omit<Activity, 'id' | 'timestamp'>;
 
 export type ModuleJobStatsMap = Record<string, number>;
@@ -28,5 +38,6 @@ export interface Context {
 
   openReleaseNotes: () => void,
   restartToUpdate: () => void,
-  getUpdaterStatus: () => {updateAvailable: boolean}
+  getUpdaterStatus: () => {updateAvailable: boolean},
+  browseTransactionTracker: (transactionHash: string) => void
 }

renderer/src/App.css

@@ -12,21 +12,23 @@
     font-family: "SpaceGrotesk";
     src: url('assets/fonts/SpaceGrotesk/SpaceGrotesk-Regular.ttf');
   }
+  @font-face {
+    font-family: "SpaceGrotesk";
+    font-weight: 700;
+    src: url('assets/fonts/SpaceGrotesk/SpaceGrotesk-Bold.ttf');
+  }
   @font-face {
     font-family: "SpaceMono";
     src: url('assets/fonts/SpaceMono/SpaceMono-Regular.ttf');
   }
-
-  .title {
-    @apply text-header-l font-title text-primary leading-[1.25] tracking-[-0.4px];
-  }
-
-  .subtitle {
-    @apply text-header-xxs font-title text-secondary tracking-[-0.4px];
+  @font-face {
+    font-family: "SpaceMono";
+    font-weight: 700;
+    src: url('assets/fonts/SpaceMono/SpaceMono-Bold.ttf');
   }
 
   body {
-    @apply font-body text-black tracking-[-0.4px];
+    @apply font-body text-black overflow-x-hidden;
     -webkit-user-select: none;
     -webkit-app-region: drag;
   }
@@ -40,19 +42,34 @@
   input {
     -webkit-user-select: text;
   }
+  p {
+    margin-block-start: 0;
+    margin-block-end: 0;
+  }
 
+  .title {
+    @apply text-header-l font-title text-primary leading-[1.25] tracking-[-0.4px];
+  }
+
+  .subtitle {
+    @apply text-header-xxs font-title text-secondary tracking-[-0.4px];
+  }
 }
 
 @layer components {
+
   .input {
-    @apply text-body-l font-body pt-3 pb-2 px-0 mt-0 border-dashed border-0 border-b 
-    bg-transparent appearance-none focus:outline-none focus:ring-0 focus:border-black border-grayscale-700;
+    @apply text-header-3xs font-body text-white
+    bg-transparent appearance-none focus:outline-none focus:ring-0;
   }
 
   .btn-primary {
-    @apply py-2 px-4 rounded-full font-body text-body-m  text-white
-     bg-primary hover:bg-primary-hover visited:bg-primary-click
-     disabled:bg-grayscale-500 disabled:text-white
+    @apply py-2 px-4 h-12 rounded-full font-body text-body-s w-fit
+    bg-transparent text-white border border-white border-solid
+    hover:bg-white hover:text-primary hover:drop-shadow-[0_6px_12px_rgba(0,0,0,0.25)]
+    active:bg-grayscale-250 active:text-primary active:drop-shadow-[0_2px_4px_rgba(0,0,0,0.32)]
+    disabled:bg-transparent disabled:text-white disabled:opacity-50
+    disabled:outline disabled:outline-1 disabled:outline-white
   }
 
   .btn-primary-small {
@@ -70,13 +87,17 @@
     group-disabled:fill-grayscale-500
   }
 
+  .icon-primary-white path {
+    @apply fill-white
+  }
+
   .icon-warning path {
-    @apply fill-warning group-hover:fill-warning group-visited:fill-warning
+    @apply fill-orange-200 group-hover:fill-orange-200 group-visited:fill-orange-200
     group-disabled:fill-grayscale-500
   }
 
   .icon-error path {
-    @apply fill-error group-hover:fill-error group-visited:fill-error
+    @apply fill-red-200 group-hover:fill-red-200 group-visited:fill-red-200
     group-disabled:fill-grayscale-500
   }
 
@@ -107,51 +128,15 @@
      visited:text-primary-click visited:decoration-primary-click/70
   }
 
-
-  .gradient-space-marine {
-    @apply bg-gradient-to-r from-tertiary-accent to-secondary
-  }
-
-  .gradient-deep-marine {
-    @apply bg-gradient-to-r from-primary to-secondary
-  }
-
-  .gradient-space-turqoise {
-    @apply bg-gradient-to-r from-tertiary-accent to-accent
-  }
-
-  .gradient-space-fire {
-    @apply bg-gradient-to-r from-tertiary-accent to-warning
-  }
-
-  .gradient-sun-fire {
-    @apply bg-gradient-to-r from-secondary-accent to-warning
-  }
-
-  .gradient-bg {
-    background: radial-gradient(94.55% 459.39% at 92% 11%, #F7F7F7 40.53%, rgba(247, 247, 247, 0.34) 80.12%, rgba(247, 247, 247, 0.58) 100%) /* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */;
-    transform: rotate(-180deg);
-  }
-
-  .gradient-bg-2 {
-    background: radial-gradient(137.12% 101.03% at 50% 0%, #F8F7F7 40.53%, #F7F7F7 78.03%, rgba(247, 247, 247, 0.95) 100%);
-    backdrop-filter: blur(5px);
-    /* Note: backdrop-filter has minimal browser support */
-    transform: rotate(-180deg);
-  }
-
-  input:focus ~ label,
-  input:not(:placeholder-shown) ~ label{
-    --tw-translate-x: 0;
-    --tw-translate-y: 0;
-    --tw-rotate: 0;
-    --tw-skew-x: 0;
-    --tw-skew-y: 0;
-    transform: translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y)) rotate(var(--tw-rotate))
-      skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-    --tw-scale-x: 0.75;
-    --tw-scale-y: 0.75;
-    --tw-translate-y: -1.5rem;
+  input:focus ~ label,	
+  input:not(:placeholder-shown) ~ label{	
+    --tw-rotate: 0;	
+    --tw-skew-x: 0;	
+    --tw-skew-y: 0;	
+    transform: translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y)) rotate(var(--tw-rotate))	
+      skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));	
+    --tw-translate-y: -2rem;
+    @apply text-body-3xs
   }
 
 }

renderer/src/App.tsx

@@ -1,7 +1,6 @@
 import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'
 import './App.css'
 import Onboarding from './pages/Onboarding'
-import WalletConfig from './pages/WalletConfig'
 import Dashboard from './pages/Dashboard'
 import Sentry from './components/Sentry'
 import Plausible from './components/Plausible'
@@ -23,7 +22,6 @@ const App = ():JSX.Element => {
               <Sentry />
               <Plausible />
               <Routes>
-                <Route path="/wallet" element={<WalletConfig />} />
                 <Route path="/dashboard" element={<Dashboard />} />
               </Routes>
             </>