Merge branch 'cashu-fix' into 'main'

Hotfix cashu performance issue

See merge request soapbox-pub/soapbox!3366

.vscode/settings.json

@@ -23,5 +23,6 @@
   "javascript.preferences.importModuleSpecifierEnding": "js",
   "javascript.preferences.importModuleSpecifier": "non-relative",
   "typescript.preferences.importModuleSpecifierEnding": "js",
-  "typescript.preferences.importModuleSpecifier": "non-relative"
+  "typescript.preferences.importModuleSpecifier": "non-relative",
+  "deno.enable": false
 }

src/components/pure-status-action-bar.tsx

@@ -48,7 +48,6 @@ import DropdownMenu from 'soapbox/components/dropdown-menu/index.ts';
 import PureStatusReactionWrapper from 'soapbox/components/pure-status-reaction-wrapper.tsx';
 import StatusActionButton from 'soapbox/components/status-action-button.tsx';
 import HStack from 'soapbox/components/ui/hstack.tsx';
-import { useZapCashuRequest } from 'soapbox/features/zap/hooks/useHooks.ts';
 import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
 import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
 import { useDislike } from 'soapbox/hooks/useDislike.ts';
@@ -180,9 +179,6 @@ const PureStatusActionBar: React.FC<IPureStatusActionBar> = ({
   const features = useFeatures();
   const { boostModal, deleteModal } = useSettings();
 
-  const { zapCashuList } = useZapCashuRequest();
-  const isZappedCashu = zapCashuList.some((zapCashu)=> zapCashu === status.id);
-
   const { account } = useOwnAccount();
   const isStaff = account ? account.staff : false;
   const isAdmin = account ? account.admin : false;
@@ -854,7 +850,7 @@ const PureStatusActionBar: React.FC<IPureStatusActionBar> = ({
             color='accent'
             filled
             onClick={handleZapClick}
-            active={status.zapped_cashu || status.zapped || isZappedCashu}
+            active={status.zapped_cashu || status.zapped}
             theme={statusActionButtonTheme}
             count={(status?.zaps_amount ?? 0) / 1000 + (status?.zaps_amount_cashu ?? 0)}
           />

src/components/status-action-bar.tsx

@@ -49,7 +49,6 @@ import DropdownMenu from 'soapbox/components/dropdown-menu/index.ts';
 import StatusActionButton from 'soapbox/components/status-action-button.tsx';
 import StatusReactionWrapper from 'soapbox/components/status-reaction-wrapper.tsx';
 import HStack from 'soapbox/components/ui/hstack.tsx';
-import { useZapCashuRequest } from 'soapbox/features/zap/hooks/useHooks.ts';
 import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
 import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
 import { useFeatures } from 'soapbox/hooks/useFeatures.ts';
@@ -175,9 +174,6 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
   const features = useFeatures();
   const { boostModal, deleteModal } = useSettings();
 
-  const { zapCashuList } = useZapCashuRequest();
-  const isZappedCashu = zapCashuList.some((zapCashu)=> zapCashu === status.id);
-
   const { account } = useOwnAccount();
   const isStaff = account ? account.staff : false;
   const isAdmin = account ? account.admin : false;
@@ -844,7 +840,7 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
             color='accent'
             filled
             onClick={handleZapClick}
-            active={status.zapped_cashu || status.zapped || isZappedCashu}
+            active={status.zapped_cashu || status.zapped}
             theme={statusActionButtonTheme}
             count={(status?.zaps_amount ?? 0) / 1000 + (status?.zaps_amount_cashu ?? 0)}
           />

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

@@ -35,6 +35,10 @@ const PocketWallet = () => {
     localStorage.setItem('soapbox:wallet:eye', JSON.stringify(eyeClosed));
   }, [eyeClosed]);
 
+  if (!wallet) {
+    return null;
+  }
+
   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' >
@@ -48,7 +52,7 @@ const PocketWallet = () => {
         <HStack alignItems='center' space={2}>
           {!expanded && <>
             { eyeClosed ? <Text className='text-sm !text-gray-500'>{intl.formatMessage({ id: 'wallet.hidden.balance', defaultMessage: '••••••' })}</Text> : <Text>
-              {intl.formatMessage(messages.balance, { amount: wallet?.balance })}
+              {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)}>
@@ -63,11 +67,7 @@ const PocketWallet = () => {
         </HStack>
       </HStack>
 
-
+      {expanded && <Balance />}
-      {expanded &&
-      <Balance />
-      }
-
     </Stack>
   );
 

src/pages/home-page.tsx

@@ -22,7 +22,6 @@ import {
   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';
@@ -41,7 +40,6 @@ 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();
@@ -115,7 +113,7 @@ const HomePage: React.FC<IHomePage> = ({ children }) => {
         {!me && (
           <SignUpPanel />
         )}
-        {wallet && (
+        {me && features.nostr && (
           <PocketWallet />
         )}
         {me && features.announcements && (