Create pocketWallet

src/features/ui/components/pocket-wallet.tsx

@@ -0,0 +1,85 @@
+import arrowsDiagonalIcon from '@tabler/icons/outline/arrows-diagonal-2.svg';
+import arrowsDiagonalMinimizeIcon from '@tabler/icons/outline/arrows-diagonal-minimize.svg';
+import eyeClosedIcon from '@tabler/icons/outline/eye-closed.svg';
+import eyeIcon from '@tabler/icons/outline/eye.svg';
+import walletIcon from '@tabler/icons/outline/wallet.svg';
+import { useEffect, useState } from 'react';
+import { defineMessages, useIntl } from 'react-intl';
+
+import Button from 'soapbox/components/ui/button.tsx';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import Icon from 'soapbox/components/ui/icon.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
+import Balance from 'soapbox/features/wallet/components/balance.tsx';
+import { useWallet } from 'soapbox/features/zap/hooks/useHooks.ts';
+
+const messages = defineMessages({
+  wallet: { id: 'wallet.title', defaultMessage: 'Wallet' },
+  balance: { id: 'wallet.sats', defaultMessage: '{amount} sats' },
+  withdraw: { id: 'wallet.button.withdraw', defaultMessage: 'Withdraw' },
+  mint: { id: 'wallet.button.mint', defaultMessage: 'Mint' },
+});
+
+const PocketWallet = () => {
+  const intl = useIntl();
+  const { wallet } = useWallet();
+
+  const [expanded, setExpanded] = useState(false);
+  const [eyeClosed, setEyeClosed] = useState(() => {
+    const storedData = localStorage.getItem('soapbox:wallet:eye');
+    return storedData ? JSON.parse(storedData) : false;
+  });
+
+  useEffect(() => {
+    localStorage.setItem('soapbox:wallet:eye', JSON.stringify(eyeClosed));
+  }, [eyeClosed]);
+
+  return (
+    <Stack className='rounded-lg border p-2 px-4 black:border-gray-500 dark:border-gray-500' alignItems='center' space={4}>
+      <HStack className='w-full' justifyContent='between' alignItems='center' >
+        <HStack space={1} alignItems='center'>
+          <Icon src={walletIcon} size={20} />
+          <Text size='lg'>
+            {intl.formatMessage(messages.wallet)}
+          </Text>
+        </HStack>
+
+        <HStack alignItems='center' space={2}>
+          {!expanded && <>
+            { eyeClosed ? <HStack className='space-x-1'>
+              <span className='size-1 rounded-full bg-gray-500 dark:bg-gray-400' />
+              <span className='size-1 rounded-full bg-gray-500 dark:bg-gray-400' />
+              <span className='size-1 rounded-full bg-gray-500 dark:bg-gray-400' />
+              <span className='size-1 rounded-full bg-gray-500 dark:bg-gray-400' />
+              <span className='size-1 rounded-full bg-gray-500 dark:bg-gray-400' />
+              <span className='size-1 rounded-full bg-gray-500 dark:bg-gray-400' />
+              <span className='size-1 rounded-full bg-gray-500 dark:bg-gray-400' />
+              <span className='size-1 rounded-full bg-gray-500 dark:bg-gray-400' />
+            </HStack> : <Text>
+              {intl.formatMessage(messages.balance, { amount: wallet?.balance })}
+            </Text>}
+
+            <Button className='!ml-1 space-x-2 !border-none !p-0 !text-gray-500 focus:!ring-transparent focus:ring-offset-transparent rtl:ml-0 rtl:mr-1 rtl:space-x-reverse' theme='transparent' onClick={() => setEyeClosed(!eyeClosed)}>
+              <Icon src={eyeClosed ? eyeClosedIcon : eyeIcon} className='text-gray-500 hover:cursor-pointer' size={18} />
+            </Button>
+          </>}
+
+          <Button className='!ml-1 space-x-2 !border-none !p-0 !text-gray-500 focus:!ring-transparent focus:ring-offset-transparent rtl:ml-0 rtl:mr-1 rtl:space-x-reverse' theme='transparent' onClick={() => setExpanded(!expanded)}>
+            <Icon src={!expanded ? arrowsDiagonalIcon : arrowsDiagonalMinimizeIcon} className='rounded-full bg-secondary-500 p-1 text-white hover:cursor-pointer' size={22} />
+          </Button>
+
+        </HStack>
+      </HStack>
+
+
+      {expanded &&
+      <Balance />
+      }
+
+    </Stack>
+  );
+
+};
+
+export default PocketWallet;

src/features/ui/util/async-components.ts

@@ -186,4 +186,5 @@ export const WalletMints = lazy(() => import('soapbox/features/wallet/components
 export const WalletTransactions = lazy(() => import('soapbox/features/wallet/components/wallet-transactions.tsx'));
 export const StreakModal = lazy(() => import('soapbox/features/ui/components/modals/streak-modal.tsx'));
 export const FollowsTimeline = lazy(() => import('soapbox/features/home-timeline/follows-timeline.tsx'));
-export const CommunityTimeline = lazy(() => import('soapbox/features/home-timeline/community-timeline.tsx'));
+export const CommunityTimeline = lazy(() => import('soapbox/features/home-timeline/community-timeline.tsx'));
+export const PocketWallet = lazy(() => import('soapbox/features/ui/components/pocket-wallet.tsx'));

src/features/wallet/index.tsx

@@ -69,7 +69,7 @@ const Wallet = () => {
                   </CardHeader>
 
                   <CardBody>
-                    <Transactions />
+                    <Transactions limit={4} />
                     {hasTransactions && <div className='flex w-full justify-center'>
                       <Button icon={moreIcon} theme='primary' to='/wallet/transactions'>
                         {intl.formatMessage(messages.more)}

src/pages/default-page.tsx

@@ -1,3 +1,5 @@
+import { useLocation } from 'react-router-dom';
+
 import Layout from 'soapbox/components/ui/layout.tsx';
 import LinkFooter from 'soapbox/features/ui/components/link-footer.tsx';
 import {
@@ -5,7 +7,9 @@ import {
   TrendsPanel,
   SignUpPanel,
   CtaBanner,
+  PocketWallet,
 } from 'soapbox/features/ui/util/async-components.ts';
+import { useWallet } from 'soapbox/features/zap/hooks/useHooks.ts';
 import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
 import { useFeatures } from 'soapbox/hooks/useFeatures.ts';
 
@@ -16,6 +20,9 @@ interface IDefaultPage {
 const DefaultPage: React.FC<IDefaultPage> = ({ children }) => {
   const me = useAppSelector(state => state.me);
   const features = useFeatures();
+  const { wallet } = useWallet();
+  const path = useLocation().pathname;
+  const hasPocketWallet = wallet && path !== '/wallet';
 
   return (
     <>
@@ -31,6 +38,9 @@ const DefaultPage: React.FC<IDefaultPage> = ({ children }) => {
         {!me && (
           <SignUpPanel />
         )}
+        {hasPocketWallet && (
+          <PocketWallet />
+        )}
         {features.trends && (
           <TrendsPanel limit={5} />
         )}

src/pages/home-page.tsx

@@ -20,7 +20,9 @@ import {
   CtaBanner,
   AnnouncementsPanel,
   LatestAccountsPanel,
+  PocketWallet,
 } from 'soapbox/features/ui/util/async-components.ts';
+import { useWallet } from 'soapbox/features/zap/hooks/useHooks.ts';
 import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
 import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
 import { useDraggedFiles } from 'soapbox/hooks/useDraggedFiles.ts';
@@ -39,6 +41,7 @@ const HomePage: React.FC<IHomePage> = ({ children }) => {
   const intl = useIntl();
   const dispatch = useAppDispatch();
   const { pathname } = useLocation();
+  const { wallet } = useWallet();
 
   const me = useAppSelector(state => state.me);
   const { account } = useOwnAccount();
@@ -112,6 +115,9 @@ const HomePage: React.FC<IHomePage> = ({ children }) => {
         {!me && (
           <SignUpPanel />
         )}
+        {wallet && (
+          <PocketWallet />
+        )}
         {me && features.announcements && (
           <AnnouncementsPanel />
         )}

src/pages/profile-page.tsx

@@ -17,7 +17,9 @@ import {
   CtaBanner,
   PinnedAccountsPanel,
   AccountNotePanel,
+  PocketWallet,
 } from 'soapbox/features/ui/util/async-components.ts';
+import { useWallet } from 'soapbox/features/zap/hooks/useHooks.ts';
 import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
 import { useFeatures } from 'soapbox/hooks/useFeatures.ts';
 import { useSoapboxConfig } from 'soapbox/hooks/useSoapboxConfig.ts';
@@ -40,6 +42,7 @@ const ProfilePage: React.FC<IProfilePage> = ({ params, children }) => {
   const me = useAppSelector(state => state.me);
   const features = useFeatures();
   const { displayFqn } = useSoapboxConfig();
+  const { wallet } = useWallet();
 
   // Fix case of username
   if (account && account.acct !== username) {
@@ -118,6 +121,10 @@ const ProfilePage: React.FC<IProfilePage> = ({ params, children }) => {
           <SignUpPanel />
         )}
 
+        {wallet && (
+          <PocketWallet />
+        )}
+
         {features.notes && account && account?.id !== me && (
           <AccountNotePanel account={account} />
         )}

src/pages/search-page.tsx

@@ -9,7 +9,9 @@ import {
   CtaBanner,
   LatestAccountsPanel,
   SuggestedGroupsPanel,
+  PocketWallet,
 } from 'soapbox/features/ui/util/async-components.ts';
+import { useWallet } from 'soapbox/features/zap/hooks/useHooks.ts';
 import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
 import { useFeatures } from 'soapbox/hooks/useFeatures.ts';
 
@@ -21,6 +23,7 @@ const ExplorePage: React.FC<IExplorePage> = ({ children }) => {
   const me = useAppSelector(state => state.me);
   const features = useFeatures();
   const accountsPath = useLocation().pathname === '/explore/accounts';
+  const wallet = useWallet();
 
   return (
     <>
@@ -37,6 +40,10 @@ const ExplorePage: React.FC<IExplorePage> = ({ children }) => {
           <SignUpPanel />
         )}
 
+        {wallet && (
+          <PocketWallet />
+        )}
+
         {features.trends && (
           <TrendsPanel limit={5} />
         )}