From e3201411e49a8fe15f68db4962fb54fc92f6f6ff Mon Sep 17 00:00:00 2001
From: brusher_ru <brusher.designer@gmail.com>
Date: Mon, 16 Dec 2024 14:00:30 -0300
Subject: [PATCH 1/3] tweak: stylize tooltips

---
 src/theme.ts         |  2 ++
 src/theme/tooltip.ts | 12 ++++++++++++
 2 files changed, 14 insertions(+)
 create mode 100644 src/theme/tooltip.ts

diff --git a/src/theme.ts b/src/theme.ts
index c777023..18761e0 100644
--- a/src/theme.ts
+++ b/src/theme.ts
@@ -11,6 +11,7 @@ import modalTheme from './theme/modal';
 import radioTheme from './theme/radio';
 import selectTheme from './theme/select';
 import tabsTheme from './theme/tabs';
+import tooltipTheme from './theme/tooltip';
 
 const config: ThemeConfig = {
   initialColorMode: 'dark',
@@ -51,6 +52,7 @@ const components = {
   Input: inputTheme,
   Select: selectTheme,
   FormLabel: formLabelTheme,
+  Tooltip: tooltipTheme,
 };
 const theme = extendTheme({ config, colors, components, styles });
 
diff --git a/src/theme/tooltip.ts b/src/theme/tooltip.ts
new file mode 100644
index 0000000..c28fe02
--- /dev/null
+++ b/src/theme/tooltip.ts
@@ -0,0 +1,12 @@
+import { defineStyleConfig } from '@chakra-ui/react';
+
+const tooltipTheme = defineStyleConfig({
+  baseStyle: {
+    borderRadius: 'md',
+    fontWeight: 'normal',
+    bg: 'brand.lightGray',
+    textColor: 'brand.darkGreen',
+  },
+});
+
+export default tooltipTheme;

From 53bd638315b1aae51c283d1e228667a89513bd3d Mon Sep 17 00:00:00 2001
From: brusher_ru <brusher.designer@gmail.com>
Date: Mon, 16 Dec 2024 14:00:45 -0300
Subject: [PATCH 2/3] feat: display projected balance with tooltip instead of
 current

---
 src/screens/WalletScreen.tsx | 76 +++++++++++++++++++++++++++++++++---
 1 file changed, 71 insertions(+), 5 deletions(-)

diff --git a/src/screens/WalletScreen.tsx b/src/screens/WalletScreen.tsx
index e64a4dc..3967652 100644
--- a/src/screens/WalletScreen.tsx
+++ b/src/screens/WalletScreen.tsx
@@ -8,18 +8,26 @@ import {
   Flex,
   Icon,
   IconButton,
+  keyframes,
   Spacer,
   Spinner,
   Tab,
+  Table,
   TabList,
   TabPanels,
   Tabs,
+  Tbody,
+  Td,
   Text,
+  Tooltip,
+  Tr,
   useBreakpointValue,
   useDisclosure,
 } from '@chakra-ui/react';
 import { O, pipe } from '@mobily/ts-belt';
 import {
+  IconHelp,
+  IconHourglassEmpty,
   IconLockOpen2,
   IconQrcode,
   IconRefresh,
@@ -53,6 +61,11 @@ import useNetworks from '../store/useNetworks';
 import { Transaction } from '../types/tx';
 import { formatSmidge } from '../utils/smh';
 
+const spin = keyframes`
+  85% {transform: rotate(0deg);}   
+  100% {transform: rotate(360deg)} 
+`;
+
 function WalletScreen(): JSX.Element {
   const { isLoading, refreshData } = useDataRefresher();
 
@@ -85,8 +98,11 @@ function WalletScreen(): JSX.Element {
   );
   const balance = O.mapWithDefault(
     accountData,
-    '0',
-    ([account]) => account.state.current.balance
+    { current: '0', projected: '0' },
+    ([account]) => ({
+      current: account.state.current.balance,
+      projected: account.state.projected.balance,
+    })
   );
 
   const refreshIconSize = useBreakpointValue(
@@ -97,9 +113,11 @@ function WalletScreen(): JSX.Element {
   const unlockedBalance = useVaultBalance(
     currentAccount,
     currentNetwork,
-    BigInt(balance)
+    BigInt(balance.current)
   );
 
+  const pendingBalance = balance.projected !== balance.current;
+
   return (
     <Flex
       direction="column"
@@ -171,9 +189,23 @@ function WalletScreen(): JSX.Element {
             <Text
               as="b"
               fontSize={{ base: '32px', md: '40px' }}
-              title={`${balance} Smidge`}
+              title={`${
+                pendingBalance
+                  ? `Available balance: ${balance.projected} Smidge\n`
+                  : ''
+              }Actual balance:     ${balance.current} Smidge`}
+              color={pendingBalance ? 'brand.orange' : 'white'}
             >
-              {formatSmidge(balance)}
+              {pendingBalance ? (
+                <Icon
+                  as={IconHourglassEmpty}
+                  display="inline-block"
+                  boxSize={{ base: 6, md: 7 }}
+                  mb={{ base: '-1px', md: 0 }}
+                  animation={`${spin} 4s linear infinite`}
+                />
+              ) : null}
+              {formatSmidge(balance.projected)}
             </Text>
             <IconButton
               ml={4}
@@ -192,6 +224,40 @@ function WalletScreen(): JSX.Element {
               verticalAlign="text-bottom"
             />
           </Flex>
+          {pendingBalance && (
+            <Text fontSize="sm" color="orange" mb={2} mr={10}>
+              Pending transactions...
+              <Tooltip
+                maxW="80vw"
+                label={
+                  <Table size="sm" variant="unstyled" whiteSpace="nowrap">
+                    <Tbody>
+                      <Tr>
+                        <Td pl={0} pr={2} fontSize="xs">
+                          Available balance:
+                        </Td>
+                        <Td pl={2} pr={0}>
+                          {balance.projected} Smidge
+                        </Td>
+                      </Tr>
+                      <Tr>
+                        <Td pl={0} pr={2} fontSize="xs">
+                          Actual balance:
+                        </Td>
+                        <Td pl={2} pr={0}>
+                          {balance.current} Smidge
+                        </Td>
+                      </Tr>
+                    </Tbody>
+                  </Table>
+                }
+              >
+                <Text display="inline-block" ml={1}>
+                  <IconHelp size={14} style={{ marginBottom: '-2px' }} />
+                </Text>
+              </Tooltip>
+            </Text>
+          )}
           {O.mapWithDefault(
             unlockedBalance,
             // eslint-disable-next-line react/jsx-no-useless-fragment

From 32cced6dddb22a39f9148367e4ac143e3468a620 Mon Sep 17 00:00:00 2001
From: brusher_ru <brusher.designer@gmail.com>
Date: Tue, 17 Dec 2024 09:06:51 -0300
Subject: [PATCH 3/3] tweak: change balance naming and fix color of pending
 balance

---
 src/screens/WalletScreen.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/screens/WalletScreen.tsx b/src/screens/WalletScreen.tsx
index 3967652..b71d6c7 100644
--- a/src/screens/WalletScreen.tsx
+++ b/src/screens/WalletScreen.tsx
@@ -194,7 +194,7 @@ function WalletScreen(): JSX.Element {
                   ? `Available balance: ${balance.projected} Smidge\n`
                   : ''
               }Actual balance:     ${balance.current} Smidge`}
-              color={pendingBalance ? 'brand.orange' : 'white'}
+              color={pendingBalance ? 'orange' : 'white'}
             >
               {pendingBalance ? (
                 <Icon
@@ -225,7 +225,7 @@ function WalletScreen(): JSX.Element {
             />
           </Flex>
           {pendingBalance && (
-            <Text fontSize="sm" color="orange" mb={2} mr={10}>
+            <Text fontSize="sm" color="orange" mt={-1} mb={2} mr={10}>
               Pending transactions...
               <Tooltip
                 maxW="80vw"
@@ -234,7 +234,7 @@ function WalletScreen(): JSX.Element {
                     <Tbody>
                       <Tr>
                         <Td pl={0} pr={2} fontSize="xs">
-                          Available balance:
+                          Pending balance:
                         </Td>
                         <Td pl={2} pr={0}>
                           {balance.projected} Smidge
@@ -242,7 +242,7 @@ function WalletScreen(): JSX.Element {
                       </Tr>
                       <Tr>
                         <Td pl={0} pr={2} fontSize="xs">
-                          Actual balance:
+                          Current balance:
                         </Td>
                         <Td pl={2} pr={0}>
                           {balance.current} Smidge