Big redesign and banxa integration

apps/desktop-wallet/electron/electron-env.ts

@@ -32,6 +32,8 @@ declare global {
         getSystemLanguage: () => Promise<string | undefined>
         getSystemRegion: () => Promise<string>
         setProxySettings: (proxySettings: ProxySettings) => Promise<void>
+        openOnRampServiceWindow: ({ url, targetLocation }: { url: string; targetLocation: string }) => void
+        onOnRampTargetLocationReached: (callback: () => void) => () => Electron.IpcRenderer
         restart: () => void
       }
       window: {

apps/desktop-wallet/electron/main.ts

@@ -34,13 +34,15 @@ contextMenu()
 // Keep a global reference of the window object, if you don't, the window will
 // be closed automatically when the JavaScript object is garbage collected.
 let mainWindow: BrowserWindow | null
+// Window for on-ramp services
+let onRampWindow: BrowserWindow | null
 
 function createWindow() {
   mainWindow = new BrowserWindow({
     icon: ICON_PATH,
     width: 1200,
     height: 800,
-    minWidth: 1200,
+    minWidth: 1000,
     minHeight: 700,
     frame: isMac,
     titleBarStyle: 'hidden',
@@ -206,6 +208,68 @@ app.on('ready', async function () {
     mainWindow?.webContents.send('window:maximized', false)
   })
 
+  ipcMain.handle('app:openOnRampServiceWindow', (event, { url, targetLocation }) => {
+    if (onRampWindow) {
+      onRampWindow.show()
+      return
+    }
+
+    onRampWindow = new BrowserWindow({
+      width: 1000,
+      height: 800,
+      webPreferences: {
+        contextIsolation: true,
+        webSecurity: true
+      }
+    })
+
+    onRampWindow.loadURL(url)
+
+    onRampWindow.webContents.on('did-navigate', (event, currentUrl) => {
+      console.log(`Navigated to: ${currentUrl}`)
+      if (currentUrl.includes(targetLocation)) {
+        onRampWindow?.close()
+        onRampWindow = null
+
+        mainWindow?.webContents.send('target-location-reached')
+      }
+    })
+
+    // Ensure window reference is cleaned up
+    onRampWindow.on('closed', () => {
+      onRampWindow = null
+    })
+
+    // Handle child windows opening (onramper opens provider in a new window)
+    onRampWindow.webContents.setWindowOpenHandler(({ url }) => {
+      const childWindow = new BrowserWindow({
+        parent: onRampWindow!,
+        width: 800,
+        height: 600,
+        webPreferences: {
+          contextIsolation: true,
+          webSecurity: true
+        }
+      })
+      childWindow.loadURL(url)
+
+      // Listen for navigation events on the new window
+      childWindow.webContents.on('did-navigate', (event, currentUrl) => {
+        console.log(`Child window navigated to: ${currentUrl}`)
+        if (currentUrl.includes(targetLocation)) {
+          childWindow?.close()
+          onRampWindow?.close()
+          onRampWindow = null
+
+          mainWindow?.webContents.send('target-location-reached')
+        }
+      })
+
+      // Prevent the default action (which would be Electron creating a default window)
+      return { action: 'deny' }
+    })
+  })
+
   createWindow()
 })
 

apps/desktop-wallet/electron/preload.ts

@@ -62,6 +62,13 @@ contextBridge.exposeInMainWorld('electron', {
     show: () => ipcRenderer.invoke('app:show'),
     getSystemLanguage: () => ipcRenderer.invoke('app:getSystemLanguage'),
     getSystemRegion: () => ipcRenderer.invoke('app:getSystemRegion'),
+    openOnRampServiceWindow: ({ url, targetLocation }: { url: string; targetLocation: string }) =>
+      ipcRenderer.invoke('app:openOnRampServiceWindow', { url, targetLocation }),
+    onOnRampTargetLocationReached: (callback: () => void) => {
+      ipcRenderer.on('target-location-reached', callback)
+
+      return () => ipcRenderer.removeListener('target-location-reached', callback)
+    },
     setProxySettings: (proxySettings: ProxySettings) => ipcRenderer.invoke('app:setProxySettings', proxySettings),
     restart: () => ipcRenderer.invoke('app:restart')
   },

apps/desktop-wallet/locales/en-US/translation.json

@@ -293,7 +293,6 @@
   "Set gas and lock time": "Set gas and lock time",
   "Set gas settings": "Set gas settings",
   "Settings": "Settings",
-  "Shortcuts": "Shortcuts",
   "Show": "Show",
   "Show advanced options": "Show advanced options",
   "Show in explorer": "Show in explorer",
@@ -346,7 +345,6 @@
   "Transaction sent!": "Transaction sent!",
   "Transactions": "Transactions",
   "Transactions sent!": "Transactions sent!",
-  "Transfers": "Transfers",
   "Type your password to change this setting.": "Type your password to change this setting.",
   "Type your password to export your wallet.": "Type your password to export your wallet.",
   "Type your password to show the phrase.": "Type your password to show the phrase.",
@@ -368,7 +366,6 @@
   "Use max amount": "Use max amount",
   "Use optional passphrase": "Use optional passphrase",
   "Useful for miners or DeFi use.": "Useful for miners or DeFi use.",
-  "Value today": "Value today",
   "Version": "Version",
   "Version {{ newVersion }} is available": "Version {{ newVersion }} is available",
   "Please, download it and install it to avoid any issues with the wallet.": "Please, download it and install it to avoid any issues with the wallet.",
@@ -427,7 +424,6 @@
   "Select the address to send assets to.": "Select the address to send assets to.",
   "Destination": "Destination",
   "Origin": "Origin",
-  "One of your addresses to send the assets from.": "One of your addresses to send the assets from.",
   "Clear cache": "Clear cache",
   "Clear": "Clear",
   "Deletes cached wallet and WalletConnect data.": "Deletes cached wallet and WalletConnect data.",
@@ -494,6 +490,17 @@
   "Updating...": "Updating...",
   "To send funds you first need to load your wallet with some.": "To send funds you first need to load your wallet with some.",
   "The wallet is empty. Use the faucet in the developer tools in the app settings.": "The wallet is empty. Use the faucet in the developer tools in the app settings.",
+  "Buy": "Buy",
+  "onramperDisclaimer": "You are about to access 3rd party services provided by <1>onramper.com</1> through an in-app browser. Alephium does not control Onramper's services. Onramper's terms and conditions will apply, so please read and understand them before proceeding.",
+  "You can now complete your purchase in the dedicated window!": "You can now complete your purchase in the dedicated window!",
+  "Token": "Token",
+  "Price": "Price",
+  "Value": "Value",
+  "Invalid mnemonic. Please double check your words.": "Invalid mnemonic. Please double check your words.",
+  "Incorrect word. Please try again.": "Incorrect word. Please try again.",
+  "Select the correct word for word number <1>{{ number }} of 24</1>.": "Select the correct word for word number <1>{{ number }} of 24</1>.",
+  "Allocation": "Allocation",
+  "Start by selecting the origin and destination addresses.": "Start by selecting the origin and destination addresses.",
   "Connect with Ledger": "Connect with Ledger",
   "Connect your Ledger": "Connect your Ledger",
   "Could not generate address": "Could not generate address",
@@ -511,7 +518,14 @@
   "Would you like to scan for active addresses?": "Would you like to scan for active addresses?",
   "Scan": "Scan",
   "Active address discovery completed. Addresses added: {{ count }}": "Active address discovery completed. Addresses added: {{ count }}",
+  "Purchase done!": "Purchase done!",
+  "Wallet worth": "Wallet worth",
+  "Address worth": "Address worth",
   "Loading new transactions...": "Loading new transactions...",
   "Sign and Send Unsigned Transaction": "Sign and Send Unsigned Transaction",
-  "Sign and Send": "Sign and Send"
+  "Sign and Send": "Sign and Send",
+  "Unlock a wallet to connect to the dApp.": "Unlock a wallet to connect to the dApp.",
+  "Activity": "Activity",
+  "Passphrase warning": "Passphrase warning",
+  "Don't use passphrase": "Don't use passphrase"
 }

apps/desktop-wallet/package.json

@@ -46,7 +46,8 @@
     "axios": "^1.7.4",
     "electron-context-menu": "^3.1.2",
     "electron-is-dev": "^2.0.0",
-    "electron-updater": "^6.3.9"
+    "electron-updater": "^6.3.9",
+    "react-custom-scroll": "^7.0.0"
   },
   "trustedDependencies": [
     "electron",
@@ -82,7 +83,6 @@
     "@types/react-color": "^3.0.6",
     "@types/react-dom": "^18.2.4",
     "@types/semver-compare": "^1.0.1",
-    "@types/yaireo__tagify": "^4.18.0",
     "@types/zxcvbn": "^4.4.1",
     "@typescript-eslint/eslint-plugin": "^6.10.0",
     "@typescript-eslint/parser": "^6.10.0",
@@ -95,7 +95,6 @@
     "@walletconnect/sign-client": "2.17.2",
     "@walletconnect/types": "2.17.2",
     "@walletconnect/utils": "2.17.2",
-    "@yaireo/tagify": "^4.18.3",
     "@yornaath/batshit": "^0.10.1",
     "ajv": "^8.12.0",
     "better-sqlite3": "^8.3.0",
@@ -117,7 +116,7 @@
     "eslint-plugin-simple-import-sort": "^10.0.0",
     "eslint-plugin-unused-imports": "^3.0.0",
     "events": "^3.3.0",
-    "framer-motion": "^11.2.12",
+    "framer-motion": "^11.12.0",
     "i18next": "^23.4.6",
     "jsdom": "^21.1.1",
     "lodash": "^4.17.21",
@@ -140,7 +139,6 @@
     "react-qr-code": "^2.0.7",
     "react-redux": "^8.0.5",
     "react-router-dom": "^6.3.0",
-    "react-scrollbars-custom": "^4.1.1",
     "react-tooltip": "^5.25.1",
     "redux": "^4.2.0",
     "semver-compare": "^1.0.0",

apps/desktop-wallet/src/App.tsx

@@ -5,6 +5,7 @@ import styled, { css, ThemeProvider } from 'styled-components'
 
 import PersistedQueryCacheVersionStorage from '@/api/persistedCacheVersionStorage'
 import { usePersistQueryClientContext } from '@/api/persistQueryClientContext'
+import AnimatedBackground from '@/components/AnimatedBackground'
 import AppSpinner from '@/components/AppSpinner'
 import { CenteredSection } from '@/components/PageComponents/PageContainers'
 import SnackbarManager from '@/components/SnackbarManager'
@@ -24,6 +25,7 @@ import { darkTheme, lightTheme } from '@/features/theme/themes'
 import { WalletConnectContextProvider } from '@/features/walletConnect/walletConnectContext'
 import { useAppDispatch, useAppSelector } from '@/hooks/redux'
 import useAutoLock from '@/hooks/useAutoLock'
+import useWalletLock from '@/hooks/useWalletLock'
 import AppModals from '@/modals/AppModals'
 import Router from '@/routes'
 import {
@@ -37,6 +39,7 @@ import { migrateGeneralSettings, migrateNetworkSettings, migrateWalletData } fro
 
 const App = memo(() => {
   const theme = useAppSelector((s) => s.global.theme)
+  const { isWalletUnlocked } = useWalletLock()
 
   useAutoLock()
 
@@ -54,16 +57,21 @@ const App = memo(() => {
   return (
     <ThemeProvider theme={theme === 'light' ? lightTheme : darkTheme}>
       <GlobalStyle />
-
       <SplashScreen />
-
       <WalletConnectContextProvider>
         <AppContainer>
           <CenteredSection>
+            {!isWalletUnlocked && (
+              <AnimatedBackground
+                anchorPosition="bottom"
+                opacity={theme === 'dark' ? 0.6 : 0.8}
+                verticalOffset={-100}
+                hiddenOverflow
+              />
+            )}
             <Router />
           </CenteredSection>
         </AppContainer>
-
         <AppModals />
       </WalletConnectContextProvider>
       <SnackbarManager />

apps/desktop-wallet/src/animations/index.ts

@@ -22,16 +22,32 @@ export const fadeInBottom = {
   transition
 }
 
+export const fadeOutBottom = {
+  exit: { opacity: 0, y: 10 },
+  transition
+}
+
+export const fadeInTop = {
+  initial: { opacity: 0, y: -10 },
+  animate: { opacity: 1, y: 0 },
+  transition
+}
+
+export const fadeOutTop = {
+  exit: { opacity: 0, y: -10 },
+  transition
+}
+
 export const slowTransition = {
   transition: { duration: 0.8 }
 }
 
 export const normalTransition = {
-  transition: { type: 'spring', damping: 50, stiffness: 400 }
+  transition: { type: 'spring', damping: 50, stiffness: 600 }
 }
 
 export const fastTransition = {
-  transition: { type: 'spring', damping: 40, stiffness: 500 }
+  transition: { type: 'spring', damping: 40, stiffness: 900 }
 }
 
 export const fadeInSlowly = {
@@ -49,9 +65,9 @@ export const fadeInOutFast = {
   ...fastTransition
 }
 
-export const fadeInOutScaleFast = {
-  initial: { opacity: 0, scale: 0.9 },
-  animate: { opacity: 1, scale: 1 },
-  exit: { opacity: 0, scale: 0.95 },
+export const fadeInOutBottomFast = {
+  initial: { opacity: 0, y: 10 },
+  animate: { opacity: 1, y: 1 },
+  exit: { opacity: 0, y: 1 },
   ...fastTransition
 }

apps/desktop-wallet/src/api/apiDataHooks/address/useFetchAddressSingleTokenBalances.ts

@@ -33,7 +33,11 @@ const useFetchAddressSingleTokenBalances = ({
   })
 
   return {
-    data: isALPH ? alphBalances : addressTokenBalances,
+    data: (isALPH ? alphBalances : addressTokenBalances) || {
+      availableBalance: '0',
+      lockedBalance: '0',
+      totalBalance: '0'
+    },
     isLoading: isALPH ? isLoadingAlphBalances : isLoadingTokenBalances
   }
 }

apps/desktop-wallet/src/components/ActionLink.tsx

@@ -6,8 +6,8 @@ import styled, { css } from 'styled-components'
 import { HasTooltip } from '@/components/Tooltip'
 
 interface ActionLinkProps {
-  children: ReactNode
   onClick: () => void
+  children?: ReactNode
   Icon?: LucideIcon
   iconPosition?: 'right' | 'left'
   withBackground?: boolean
@@ -28,7 +28,7 @@ const ActionLink = ({ Icon, children, tooltip, ...props }: HasTooltip<ActionLink
 export default ActionLink
 
 const ActionLinkStyled = styled.button<ActionLinkProps>`
-  color: ${({ theme }) => theme.global.accent};
+  color: ${({ theme }) => theme.font.accent};
   display: inline-flex;
   align-items: center;
   cursor: pointer;
@@ -40,7 +40,7 @@ const ActionLinkStyled = styled.button<ActionLinkProps>`
   max-width: 100%;
 
   &:hover {
-    color: ${({ theme }) => colord(theme.global.accent).darken(0.1).toRgbString()};
+    color: ${({ theme }) => colord(theme.font.accent).darken(0.1).toRgbString()};
   }
 
   &:focus-visible {