feat(v2): earn screen

package.json

@@ -51,9 +51,12 @@
     "@radix-ui/react-avatar": "1.1.11",
     "@radix-ui/react-dialog": "1.1.15",
     "@radix-ui/react-label": "2.1.8",
+    "@radix-ui/react-popover": "1.1.15",
+    "@radix-ui/react-radio-group": "1.3.8",
     "@radix-ui/react-select": "2.2.6",
     "@radix-ui/react-separator": "1.1.8",
     "@radix-ui/react-slot": "1.2.4",
+    "@radix-ui/react-tabs": "1.1.13",
     "@radix-ui/react-tooltip": "1.2.8",
     "@tailwindcss/vite": "4.1.18",
     "@tanstack/react-query": "5.90.16",

src/App.tsx

@@ -1,8 +1,7 @@
 import { lazy, Suspense, useEffect, useMemo } from 'react'
 import type { PropsWithChildren } from 'react'
-import { sessionOptions } from '@joinmarket-webui/joinmarket-api-ts/@tanstack/react-query'
 import { token } from '@joinmarket-webui/joinmarket-api-ts/jm'
-import { QueryClientProvider, useQuery } from '@tanstack/react-query'
+import { QueryClientProvider } from '@tanstack/react-query'
 import { Loader2Icon } from 'lucide-react'
 import { ThemeProvider } from 'next-themes'
 import { useTranslation } from 'react-i18next'
@@ -36,10 +35,10 @@ import { useApiClient } from '@/hooks/useApiClient'
 import { queryClient } from '@/lib/queryClient'
 import { setIntervalDebounced, type WalletFileName } from '@/lib/utils'
 import { authStore } from '@/store/authStore'
-import { jmSessionStore } from '@/store/jmSessionStore'
 import ErrorPage from './components/error/ErrorPage'
 import { isDebugFeatureEnabled } from './constants/debugFeatures'
 import { useFeeConfigValidation } from './hooks/useFeeConfigValidation'
+import { useRefreshSession } from './hooks/useRefreshSession'
 import { jamSettingsStore } from './store/jamSettingsStore'
 
 const DevSetupPage = lazy(() => import('@/components/dev/DevSetupPage'))
@@ -211,42 +210,11 @@ function RefreshApiToken() {
 }
 
 function RefreshJmSession() {
-  const client = useApiClient()
-  const authState = useStore(authStore, (state) => state.state)
-
-  const { data: sessionData, refetch: refetchSessionData } = useQuery({
-    ...sessionOptions({ client }),
-    retry: 3,
-    staleTime: 0,
+  useRefreshSession({
+    enabled: true,
     refetchInterval: JAM_JM_SESSION_REFRESH_INTERVAL,
-    refetchIntervalInBackground: true,
   })
 
-  useEffect(() => {
-    if (sessionData) {
-      jmSessionStore.getState().update(sessionData)
-
-      const isDevMode = jamSettingsStore.getState().state.developerMode
-      if (isDevMode) {
-        toast.info(`[DEV] Successfully refreshed session data.`, {
-          id: 'jm-session-refresh-success',
-        })
-      }
-    }
-  }, [sessionData])
-
-  useEffect(
-    function refetchOnWalletLockOrUnlock() {
-      refetchSessionData().catch(() => {
-        const isDevMode = jamSettingsStore.getState().state.developerMode
-        if (isDevMode) {
-          toast.error(`[DEV] Error while refreshing session data.`)
-        }
-      })
-    },
-    [authState?.walletFileName, refetchSessionData],
-  )
-
   return <></>
 }
 

src/components/CurrencySymbol.tsx

@@ -1,5 +1,5 @@
 import type { SVGAttributes } from 'react'
-import { EyeOff } from 'lucide-react'
+import { EyeOffIcon } from 'lucide-react'
 import { cn } from '@/lib/utils'
 import type { Currency } from '@/types/global'
 
@@ -11,7 +11,9 @@ type CurrencySymbolProps = {
 
 export function CurrencySymbol({ currency, isPrivate, size = 'lg' }: CurrencySymbolProps) {
   if (isPrivate) {
-    return <EyeOff size={size === 'sm' ? 14 : 24} className="text-muted-foreground mx-1 inline-block align-middle" />
+    return (
+      <EyeOffIcon size={size === 'sm' ? 14 : 24} className="text-muted-foreground mx-1 inline-block align-middle" />
+    )
   }
 
   if (currency === 'btc') {

src/components/JamLanding.tsx

@@ -102,8 +102,17 @@ export default function JamLanding({ walletFileName }: JamLandingProps) {
           onClick={() => refetchWalletData()}
           className="flex items-center gap-2 text-gray-500"
         >
-          <RefreshCwIcon className="h-4 w-4" />
-          {t('global.refresh')}
+          {isLoading ? (
+            <>
+              <RefreshCwIcon className="animate-spin motion-reduce:hidden" />
+              {t('global.refresh')}
+            </>
+          ) : (
+            <>
+              <RefreshCwIcon className="motion-reduce:hidden" />
+              {t('global.refresh')}
+            </>
+          )}
         </Button>
       </div>
     </div>

src/components/Login.tsx

@@ -1,7 +1,7 @@
 import React, { useMemo, useState } from 'react'
 import { listwalletsOptions, unlockwalletMutation } from '@joinmarket-webui/joinmarket-api-ts/@tanstack/react-query'
 import { useMutation, useQuery } from '@tanstack/react-query'
-import { AlertCircle, Eye, EyeOff, Loader2Icon, Lock, RefreshCwIcon, Wallet } from 'lucide-react'
+import { AlertCircleIcon, EyeIcon, EyeOffIcon, Loader2Icon, LockIcon, RefreshCwIcon, WalletIcon } from 'lucide-react'
 import { useTranslation } from 'react-i18next'
 import { useNavigate } from 'react-router-dom'
 import { toast } from 'sonner'
@@ -100,7 +100,7 @@ const LoginForm = ({ wallets, isSubmitting, onSubmit }: LoginFormProps) => {
         <div className="space-y-2">
           <Label htmlFor="password">Password</Label>
           <div className="relative">
-            <Lock className="text-muted-foreground absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 transform" />
+            <LockIcon className="text-muted-foreground absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 transform" />
             <Input
               id="password"
               type={showPassword ? 'text' : 'password'}
@@ -117,7 +117,7 @@ const LoginForm = ({ wallets, isSubmitting, onSubmit }: LoginFormProps) => {
               className="absolute top-1/2 right-1 -translate-y-1/2 transform"
               onClick={() => setShowPassword((val) => !val)}
             >
-              {showPassword ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
+              {showPassword ? <EyeOffIcon className="h-4 w-4" /> : <EyeIcon className="h-4 w-4" />}
             </Button>
           </div>
         </div>
@@ -214,7 +214,7 @@ const LoginPage = () => {
               {isLoadingWallets ? (
                 <Loader2Icon className="h-6 w-6 animate-spin" />
               ) : (
-                <Wallet className="text-primary h-6 w-6" onClick={async () => await listwalletsQuery.refetch()} />
+                <WalletIcon className="text-primary h-6 w-6" onClick={async () => await listwalletsQuery.refetch()} />
               )}
             </div>
             <CardTitle className="text-2xl font-bold">Welcome to Jam</CardTitle>
@@ -232,7 +232,7 @@ const LoginPage = () => {
               {listwalletsError ? (
                 <CardContent className="space-y-6">
                   <Alert variant="destructive">
-                    <AlertCircle className="h-4 w-4" />
+                    <AlertCircleIcon className="h-4 w-4" />
                     <AlertTitle>{listwalletsError.message}</AlertTitle>
                     <AlertDescription>{listwalletsError.error_description}</AlertDescription>
                   </Alert>

src/components/Navbar.tsx

@@ -1,5 +1,5 @@
 import type { PropsWithChildren } from 'react'
-import { Loader2Icon, LogOutIcon, MoonIcon, Settings, SunIcon, WalletIcon } from 'lucide-react'
+import { Loader2Icon, LogOutIcon, MoonIcon, SettingsIcon, SunIcon, WalletIcon } from 'lucide-react'
 import { useTranslation } from 'react-i18next'
 import { Link, useNavigate } from 'react-router-dom'
 import { useStore } from 'zustand'
@@ -143,7 +143,7 @@ export function Navbar({
             variant="ghost"
             size="icon"
           >
-            <Settings />
+            <SettingsIcon />
           </Button>
         </Link>
         <Button