Rebase UX/tokens-rebase on top of Anchor decode changes

package.json

@@ -15,7 +15,7 @@
     "package": "rimraf ./release && npm run build && electron-builder -- --publish always --win --mac --linux",
     "package-nomac": "rimraf ./release && npm run build && electron-builder -- --publish always --win --linux",
     "package:asarless": "npm run build && electron-builder build --config.asar=false",
-    "lint": "cross-env NODE_ENV=development eslint . --ext .js,.jsx,.ts,.tsx",
+    "lint": "cross-env NODE_ENV=development concurrently \"eslint . --ext .js,.jsx,.ts,.tsx\" \"tsc -p ./src/renderer --noemit\" \"tsc -p ./src/main --noemit\"",
     "lint-fix": "cross-env NODE_ENV=development eslint . --ext .js,.jsx,.ts,.tsx --fix",
     "test": "vitest run --dir ./src --config ./src/renderer/vitest.config.ts",
     "prepare": "husky install",
@@ -132,7 +132,9 @@
   ],
   "homepage": "https://github.com/workbenchapp/solana-workbench-releases",
   "devDependencies": {
+    "@esbuild-plugins/node-globals-polyfill": "^0.1.1",
     "@iconify-json/mdi": "^1.1.20",
+    "@project-serum/anchor": "^0.25.0-beta.1",
     "@solana/wallet-adapter-wallets": "^0.15.5",
     "@solana/web3.js": "^1.41.3",
     "@svgr/core": "^6.2.1",
@@ -144,7 +146,7 @@
     "@types/logfmt": "^1.2.2",
     "@types/node": "^17.0.31",
     "@types/prop-types": "^15.7.4",
-    "@types/react": "^18.0.9",
+    "@types/react": "^18.0.14",
     "@types/react-dom": "^18.0.3",
     "@types/react-outside-click-handler": "^1.3.0",
     "@types/react-test-renderer": "^18.0.0",
@@ -205,6 +207,8 @@
     "unplugin-icons": "^0.14.3",
     "url-loader": "^4.1.1",
     "vite": "^2.9.12",
+    "vite-plugin-checker": "^0.4.6",
+    "vite-plugin-environment": "^1.1.1",
     "vite-plugin-fonts": "^0.4.0",
     "vite-plugin-inline-css-modules": "^0.0.4",
     "vite-plugin-windicss": "^1.8.4",
@@ -216,14 +220,17 @@
     "@fortawesome/free-regular-svg-icons": "^6.1.1",
     "@fortawesome/free-solid-svg-icons": "^6.1.0",
     "@fortawesome/react-fontawesome": "^0.1.18",
+    "@metaplex/js": "^4.12.0",
     "@reduxjs/toolkit": "^1.7.2",
     "@solana/wallet-adapter-base": "^0.9.5",
     "@solana/wallet-adapter-react": "^0.15.4",
     "@solana/wallet-adapter-react-ui": "^0.9.6",
+    "@solana/spl-token": "^0.2.0",
     "amplitude-js": "^8.12.0",
     "bip39": "^3.0.4",
     "bootstrap": "^5.1.3",
     "classnames": "^2.3.1",
+    "buffer": "^6.0.3",
     "electron-cfg": "^1.2.7",
     "electron-debug": "^3.2.0",
     "electron-log": "^4.4.6",

src/main/main.ts

@@ -3,6 +3,7 @@ import log from 'electron-log';
 import { autoUpdater } from 'electron-updater';
 import path from 'path';
 import 'regenerator-runtime/runtime';
+import { Buffer } from 'buffer';
 import fetchAnchorIdl from './anchor';
 import { RESOURCES_PATH } from './const';
 import { initAccountPromises } from './ipc/accounts';
@@ -124,6 +125,10 @@ const createWindow = async () => {
     },
   });
 
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore
+  mainWindow.Buffer = Buffer;
+
   mainWindow.loadURL(resolveHtmlPath('index.html'));
   mainWindow.on('ready-to-show', () => {
     if (!mainWindow) {

src/main/preload.js

@@ -1,9 +1,14 @@
 const { contextBridge, ipcRenderer } = require('electron');
 const log = require('electron-log');
 const promiseIpc = require('electron-promise-ipc');
-// TODO: make this a setting...
-log.transports.console.level = 'silly';
-log.transports.ipc.level = 'silly';
+
+if (process.env.LOG_LEVEL) {
+  log.transports.console.level = process.env.LOG_LEVEL;
+  log.transports.ipc.level = process.env.LOG_LEVEL;
+} else {
+  log.transports.console.level = 'silly';
+  log.transports.ipc.level = 'silly';
+}
 
 const send = (method, msg) => {
   ipcRenderer.send('main', method, msg);

src/renderer/App.scss

@@ -17,3 +17,7 @@
 @import "bootstrap/scss/dropdown";
 @import "bootstrap/scss/tooltip";
 @import "bootstrap/scss/popover";
+
+
+// Import all of bootstrap, this isn't an exercise in minimisation
+@import "bootstrap/scss/bootstrap";

src/renderer/App.tsx

@@ -7,6 +7,7 @@ import {
   WalletModalProvider,
   WalletMultiButton,
 } from '@solana/wallet-adapter-react-ui';
+
 // Default styles that can be overridden by your app
 import '@solana/wallet-adapter-react-ui/styles.css';
 import * as sol from '@solana/web3.js';
@@ -18,11 +19,20 @@ import OverlayTrigger from 'react-bootstrap/OverlayTrigger';
 import Tooltip from 'react-bootstrap/Tooltip';
 import { NavLink, Outlet, Route, Routes } from 'react-router-dom';
 import { ToastContainer } from 'react-toastify';
-import { logger } from '@/common/globals';
+import { logger } from './common/globals';
 import 'react-toastify/dist/ReactToastify.css';
 import './App.scss';
 import { getElectronStorageWallet } from './data/accounts/account';
 import { useAccountsState } from './data/accounts/accountState';
+import { ElectronAppStorageWalletAdapter } from './wallet-adapter/electronAppStorage';
+
+import Account from './nav/Account';
+import Anchor from './nav/Anchor';
+import Validator from './nav/Validator';
+import ValidatorNetworkInfo from './nav/ValidatorNetworkInfo';
+import TokenPage from './nav/TokenPage';
+
+import { useAppDispatch, useAppSelector } from './hooks';
 import {
   ConfigKey,
   setConfigValue,
@@ -33,12 +43,6 @@ import {
   netToURL,
   selectValidatorNetworkState,
 } from './data/ValidatorNetwork/validatorNetworkState';
-import { useAppDispatch, useAppSelector } from './hooks';
-import Account from './nav/Account';
-import Anchor from './nav/Anchor';
-import Validator from './nav/Validator';
-import ValidatorNetworkInfo from './nav/ValidatorNetworkInfo';
-import { ElectronAppStorageWalletAdapter } from './wallet-adapter/electronAppStorage';
 
 // So we can electron
 declare global {
@@ -82,6 +86,9 @@ function NavigationIcons() {
       <TooltipNavItem to="/" tooltipMessage="Changes" eventKey="changes">
         <IconMdiTable className="block" />
       </TooltipNavItem>
+      <TooltipNavItem to="/tokens" tooltipMessage="Tokens" eventKey="tokens">
+        <IconMdiCoins />
+      </TooltipNavItem>
       <TooltipNavItem
         to="/validator"
         tooltipMessage="Validator"
@@ -254,6 +261,7 @@ function App() {
         <Route path="/" element={<GlobalContainer />}>
           <Route index element={<Account />} />
           <Route path="account" element={<Account />} />
+          <Route path="tokens" element={<TokenPage />} />
           <Route path="validator" element={<Validator />} />
           <Route path="anchor" element={<Anchor />} />
           <Route

src/renderer/auto-imports.d.ts

@@ -7,6 +7,7 @@ declare global {
   const IconMdiChevronDown: typeof import('~icons/mdi/chevron-down.jsx')['default']
   const IconMdiCircle: typeof import('~icons/mdi/circle.jsx')['default']
   const IconMdiClose: typeof import('~icons/mdi/close.jsx')['default']
+  const IconMdiCoins: typeof import('~icons/mdi/coins.jsx')['default']
   const IconMdiContentCopy: typeof import('~icons/mdi/content-copy.jsx')['default']
   const IconMdiKey: typeof import('~icons/mdi/key.jsx')['default']
   const IconMdiPencil: typeof import('~icons/mdi/pencil.jsx')['default']