remove ionic/normalize and ion-button

package.json

@@ -4,8 +4,8 @@
   "private": true,
   "homepage": ".",
   "dependencies": {
-    "@arkade-os/boltz-swap": "0.3.16",
-    "@arkade-os/sdk": "0.4.15",
+    "@arkade-os/boltz-swap": "0.3.17",
+    "@arkade-os/sdk": "0.4.16",
     "@branta-ops/branta": "0.0.9",
     "@ionic/react": "^8.5.6",
     "@lendasat/lendasat-wallet-bridge": "^0.0.90",

playwright.config.ts

@@ -29,7 +29,7 @@ export default defineConfig({
     },
     {
       name: 'Google Chrome',
-      use: { ...devices['Desktop Chrome'], channel: 'chrome' },
+      use: { ...devices['Desktop Chrome'], channel: 'chrome', viewport: { width: 1920, height: 1080 } },
     },
   ],
 })

src/App.tsx

@@ -1,6 +1,6 @@
 import '@ionic/react/css/core.css'
 /* Basic CSS for apps built with Ionic */
-import '@ionic/react/css/normalize.css'
+// import '@ionic/react/css/normalize.css'
 import '@ionic/react/css/structure.css'
 import '@ionic/react/css/typography.css'
 
@@ -16,7 +16,7 @@ import '@ionic/react/css/palettes/dark.class.css'
 
 import { AnimatePresence } from 'framer-motion'
 import { ConfigContext } from './providers/config'
-import { IonApp, IonPage, IonTab, IonTabBar, IonTabButton, IonTabs, setupIonicReact } from '@ionic/react'
+import { IonApp, IonPage, setupIonicReact } from '@ionic/react'
 import { NavigationContext, pageComponent, Pages, Tabs, type NavigationDirection } from './providers/navigation'
 import { useCallback, useContext, useEffect, useMemo, useRef, useState, type ReactNode } from 'react'
 import { isInAppBrowser } from './lib/browser'
@@ -29,14 +29,9 @@ import { AspContext } from './providers/asp'
 import { hapticLight } from './lib/haptics'
 import { setBootAnimActive as syncBootAnimFlag } from './lib/logoAnchor'
 import { PageTransition } from './components/PageTransition'
-import SettingsIcon from './icons/Settings'
 import BootError from './components/BootError'
 import LoadingLogo from './components/LoadingLogo'
 import PillNavbarOverlay from './components/PillNavbarOverlay'
-import FlexCol from './components/FlexCol'
-import WalletIcon from './icons/Wallet'
-import AppsIcon from './icons/Apps'
-import Focusable from './components/Focusable'
 import { useReducedMotion } from './hooks/useReducedMotion'
 import { useLoadingStatus } from './hooks/useLoadingStatus'
 import { defaultPassword } from './lib/constants'
@@ -66,29 +61,6 @@ function PageAnimWrapper({
   )
 }
 
-const animClass = 'tab-anim-pop'
-
-function AnimatedTabIcon({ children, animating }: { children: React.ReactNode; animating: boolean }) {
-  const ref = useRef<HTMLDivElement>(null)
-
-  useEffect(() => {
-    if (!animating || !ref.current) return
-    const el = ref.current
-    el.classList.remove(animClass)
-    void el.offsetWidth // Force reflow so removing + re-adding the class triggers the animation
-    el.classList.add(animClass)
-    const handleEnd = () => el.classList.remove(animClass)
-    el.addEventListener('animationend', handleEnd)
-    return () => el.removeEventListener('animationend', handleEnd)
-  }, [animating])
-
-  return (
-    <div ref={ref} className='tab-icon-animated'>
-      {children}
-    </div>
-  )
-}
-
 export default function App() {
   const { aspInfo } = useContext(AspContext)
   const { configLoaded } = useContext(ConfigContext)
@@ -101,7 +73,6 @@ export default function App() {
   const isIAB = useMemo(() => isInAppBrowser(), [])
   const [isCapable, setIsCapable] = useState(false)
   const [jsCapabilitiesChecked, setJsCapabilitiesChecked] = useState(false)
-  const [animatingTab, setAnimatingTab] = useState<string | null>(null)
   const [bootAnimActive, setBootAnimActive] = useState(false)
   // Syncs the external store before React re-renders, so Wallet reads
   // the correct value on the same frame LoadingLogo unmounts.
@@ -112,10 +83,6 @@ export default function App() {
   const [bootAnimDone, setBootAnimDone] = useState(false)
   const [bootExitMode, setBootExitMode] = useState<'fly-to-target' | 'fly-up'>('fly-up')
 
-  // refs for the tabs to be able to programmatically activate them
-  const appsRef = useRef<HTMLIonTabElement>(null)
-  const walletRef = useRef<HTMLIonTabElement>(null)
-  const settingsRef = useRef<HTMLIonTabElement>(null)
   const passwordlessBootAttempted = useRef(false)
   const passwordlessReloadTimer = useRef<ReturnType<typeof setTimeout>>()
 
@@ -158,52 +125,17 @@ export default function App() {
     if (authState === 'locked') return navigate(Pages.Unlock)
   }, [walletLoaded, wallet.pubkey, authState, initInfo, aspInfo.unreachable, jsCapabilitiesChecked, isCapable])
 
-  // for some reason you need to manually set the active tab
-  // if you are coming from a page in a different tab
-  useEffect(() => {
-    switch (tab) {
-      case Tabs.Wallet:
-        walletRef.current?.setActive()
-        walletRef.current?.classList.remove('tab-hidden')
-        appsRef.current?.classList.add('tab-hidden')
-        settingsRef.current?.classList.add('tab-hidden')
-        break
-      case Tabs.Apps:
-        appsRef.current?.setActive()
-        appsRef.current?.classList.remove('tab-hidden')
-        walletRef.current?.classList.add('tab-hidden')
-        settingsRef.current?.classList.add('tab-hidden')
-        break
-      case Tabs.Settings:
-        settingsRef.current?.setActive()
-        settingsRef.current?.classList.remove('tab-hidden')
-        walletRef.current?.classList.add('tab-hidden')
-        appsRef.current?.classList.add('tab-hidden')
-        break
-      default:
-        break
-    }
-  }, [tab])
-
-  const triggerTabAnim = useCallback((tabName: string) => {
-    setAnimatingTab(null)
-    requestAnimationFrame(() => setAnimatingTab(tabName))
-  }, [])
-
   const handleWallet = () => {
-    triggerTabAnim('wallet')
     hapticLight()
     navigate(Pages.Wallet)
   }
 
   const handleApps = () => {
-    triggerTabAnim('apps')
     hapticLight()
     navigate(Pages.Apps)
   }
 
   const handleSettings = () => {
-    triggerTabAnim('settings')
     hapticLight()
     setOption(SettingsOptions.Menu)
     navigate(Pages.Settings)
@@ -301,85 +233,13 @@ export default function App() {
   return (
     <IonApp className={showNavbar ? 'has-pill-navbar' : undefined}>
       <IonPage>
-        {tab === Tabs.None ? (
-          <div className='page-transition-container'>
-            <PageAnimWrapper animated={!prefersReduced} direction={effectiveDirection}>
-              <PageTransition key={String(page)} direction={direction} pageKey={String(page)}>
-                {comp}
-              </PageTransition>
-            </PageAnimWrapper>
-          </div>
-        ) : (
-          <>
-            <IonTabs>
-              <IonTab ref={walletRef} tab={Tabs.Wallet}>
-                <div className='page-transition-container'>
-                  <PageAnimWrapper animated={!prefersReduced} direction={effectiveDirection}>
-                    {tab === Tabs.Wallet && (
-                      <PageTransition key={String(page)} direction={direction} pageKey={String(page)}>
-                        {comp}
-                      </PageTransition>
-                    )}
-                  </PageAnimWrapper>
-                </div>
-              </IonTab>
-              <IonTab ref={appsRef} tab={Tabs.Apps}>
-                <div className='page-transition-container'>
-                  <PageAnimWrapper animated={!prefersReduced} direction={effectiveDirection}>
-                    {tab === Tabs.Apps && (
-                      <PageTransition key={String(page)} direction={direction} pageKey={String(page)}>
-                        {comp}
-                      </PageTransition>
-                    )}
-                  </PageAnimWrapper>
-                </div>
-              </IonTab>
-              <IonTab ref={settingsRef} tab={Tabs.Settings}>
-                <div className='page-transition-container'>
-                  <PageAnimWrapper animated={!prefersReduced} direction={effectiveDirection}>
-                    {tab === Tabs.Settings && (
-                      <PageTransition key={String(page)} direction={direction} pageKey={String(page)}>
-                        {comp}
-                      </PageTransition>
-                    )}
-                  </PageAnimWrapper>
-                </div>
-              </IonTab>
-              <IonTabBar slot='bottom'>
-                <IonTabButton tab={Tabs.Wallet} onClick={handleWallet} selected={tab === Tabs.Wallet}>
-                  <Focusable>
-                    <FlexCol centered gap='6px' padding='5px'>
-                      <AnimatedTabIcon animating={animatingTab === 'wallet'}>
-                        <WalletIcon />
-                      </AnimatedTabIcon>
-                      Wallet
-                    </FlexCol>
-                  </Focusable>
-                </IonTabButton>
-                <IonTabButton tab={Tabs.Apps} onClick={handleApps} selected={tab === Tabs.Apps}>
-                  <Focusable>
-                    <FlexCol centered gap='6px' padding='5px'>
-                      <AnimatedTabIcon animating={animatingTab === 'apps'}>
-                        <AppsIcon />
-                      </AnimatedTabIcon>
-                      Apps
-                    </FlexCol>
-                  </Focusable>
-                </IonTabButton>
-                <IonTabButton tab={Tabs.Settings} onClick={handleSettings} selected={tab === Tabs.Settings}>
-                  <Focusable>
-                    <FlexCol centered gap='6px' padding='5px'>
-                      <AnimatedTabIcon animating={animatingTab === 'settings'}>
-                        <SettingsIcon />
-                      </AnimatedTabIcon>
-                      Settings
-                    </FlexCol>
-                  </Focusable>
-                </IonTabButton>
-              </IonTabBar>
-            </IonTabs>
-          </>
-        )}
+        <div className='page-transition-container' style={{ width: '640px' }}>
+          <PageAnimWrapper animated={!prefersReduced} direction={effectiveDirection}>
+            <PageTransition key={String(page)} direction={direction} pageKey={String(page)}>
+              {comp}
+            </PageTransition>
+          </PageAnimWrapper>
+        </div>
       </IonPage>
       {tab !== Tabs.None && !bootAnimActive && (
         <PillNavbarOverlay

src/components/Balance.tsx

@@ -1,5 +1,6 @@
 import { useContext } from 'react'
 import { prettyHide, prettyNumber } from '../lib/format'
+import { FIAT_SYMBOLS } from '../lib/fiat'
 import { CurrencyDisplay, Satoshis } from '../lib/types'
 import { FiatContext } from '../providers/fiat'
 import Text from './Text'
@@ -18,17 +19,21 @@ export default function Balance({ amount }: BalanceProps) {
 
   const fiatAmount = toFiat(amount)
   const showFiat = config.currencyDisplay === CurrencyDisplay.Fiat
+  const fiatSymbol = FIAT_SYMBOLS[config.fiat]
 
   const satsBalance = config.showBalance ? prettyNumber(amount) : prettyHide(amount, '')
-  const fiatBalance = config.showBalance
+  const fiatBalanceRaw = config.showBalance
     ? prettyNumber(fiatAmount, fiatDecimals(), true, fiatDecimals())
     : prettyHide(fiatAmount, '')
+  // prettyHide returns '' for a zero balance; skip the symbol prefix to avoid a lone "$".
+  const fiatBalance = fiatSymbol && fiatBalanceRaw ? `${fiatSymbol}${fiatBalanceRaw}` : fiatBalanceRaw
+  const fiatUnit = fiatSymbol ? '' : config.fiat
 
   const mainBalance = showFiat ? fiatBalance : satsBalance
   const otherBalance = showFiat ? satsBalance : fiatBalance
   const satsUnit = amount === 1 ? 'SAT' : 'SATS'
-  const mainUnit = showFiat ? config.fiat : satsUnit
-  const otherUnit = showFiat ? satsUnit : config.fiat
+  const mainUnit = showFiat ? fiatUnit : satsUnit
+  const otherUnit = showFiat ? satsUnit : fiatUnit
 
   const showBoth = config.currencyDisplay === CurrencyDisplay.Both
   const toggleShow = () => updateConfig({ ...config, showBalance: !config.showBalance })
@@ -40,7 +45,7 @@ export default function Balance({ amount }: BalanceProps) {
           {mainBalance}
         </Text>
         <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
-          <Text heading>{mainUnit}</Text>
+          {mainUnit ? <Text heading>{mainUnit}</Text> : null}
           <button
             type='button'
             onClick={toggleShow}

src/components/Button.tsx

@@ -1,4 +1,3 @@
-import { IonButton } from '@ionic/react'
 import { ReactElement, ReactNode, useCallback, useState } from 'react'
 import FlexRow from './FlexRow'
 import ArrowIcon from '../icons/Arrow'
@@ -20,6 +19,7 @@ interface ButtonProps {
   outline?: boolean
   red?: boolean
   secondary?: boolean
+  testId?: string
 }
 
 export default function Button({
@@ -35,6 +35,7 @@ export default function Button({
   outline,
   red,
   secondary,
+  testId,
 }: ButtonProps) {
   const [pressed, setPressed] = useState(false)
 
@@ -59,13 +60,13 @@ export default function Button({
   )
 
   return (
-    <IonButton
+    <button
       className={className}
       disabled={disabled}
-      fill={clear ? 'clear' : outline ? 'outline' : 'solid'}
       onClick={handleClick}
       onMouseDown={handlePressStart}
       onMouseUp={handlePressEnd}
+      data-testid={testId}
       onMouseLeave={handlePressEnd}
       onTouchStart={handlePressStart}
       onTouchEnd={handlePressEnd}
@@ -90,7 +91,7 @@ export default function Button({
           {children ?? (label ? <Label label={label} /> : null)}
         </FlexRow>
       )}
-    </IonButton>
+    </button>
   )
 }