Feat/sidebar stream

packages/lib/common/SideMenu/SideMenuNav/index.tsx

@@ -1,6 +1,7 @@
 import {cloneElement, Fragment, type ReactElement, useCallback, useEffect, useState} from 'react';
 import Link from 'next/link';
 import {usePathname} from 'next/navigation';
+import {useRouter} from 'next/router';
 import {usePlausible} from 'next-plausible';
 import {motion} from 'framer-motion';
 import {useWeb3} from '@builtbymom/web3/contexts/useWeb3';
@@ -10,6 +11,7 @@ import {LinkOrDiv} from '@lib/common/LinkOrDiv';
 import {useIsMounted} from '@lib/hooks/useIsMounted';
 import {IconChevron} from '@lib/icons/IconChevron';
 import {CurtainContent} from '@lib/primitives/Curtain';
+import {isInIframe} from '@lib/utils/helpers';
 import {PLAUSIBLE_EVENTS} from '@lib/utils/plausible';
 
 export type TSideMenuItem = {
@@ -28,6 +30,7 @@ type TNavItemProps = {
 	isDisabled?: boolean;
 	onClick?: () => void;
 };
+
 function NavItem({
 	label,
 	href,
@@ -37,12 +40,30 @@ function NavItem({
 	hasSubmenu,
 	isDisabled = false
 }: TNavItemProps): ReactElement {
+	const router = useRouter();
+
+	/******************************************************************************
+	 ** Handle navigation within Safe app context by updating the appUrl query param
+	 ** while preserving the existing Safe context and other query parameters
+	 *****************************************************************************/
+	const goToSafeApp = useCallback(() => {
+		const url = {
+			pathname: router.pathname,
+			query: {
+				...router.query,
+				appUrl: href
+			}
+		};
+		router.replace(url);
+	}, [href, router]);
+
 	return (
 		<motion.li className={'relative z-10 px-4 md:px-2 lg:px-4'}>
 			<LinkOrDiv
 				href={hasSubmenu ? href : href}
 				isDisabled={isDisabled}
-				onClick={onClick}>
+				target={'_self'}
+				onClick={href === 'https://v1.smold.app/stream' && isInIframe() ? goToSafeApp : onClick}>
 				<div
 					className={cl(
 						'flex items-center gap-2 justify-between rounded-3xl px-4 py-2 transition-colors w-full',

packages/lib/utils/helpers.ts

@@ -45,3 +45,7 @@ export function truncateHexTx(hash: string | undefined, size: number): string {
 	}
 	return `0x${ZERO_ADDRESS.slice(2, size)}...${ZERO_ADDRESS.slice(-size)}`;
 }
+
+export function isInIframe(): boolean {
+	return typeof window !== 'undefined' && window.self !== window.top;
+}

packages/smol/components/Wallet/index.tsx

@@ -112,6 +112,7 @@ export function Wallet(): ReactElement {
 			return filteredTokens.map(token => (
 				<Link
 					className={'w-full'}
+					key={`${token.address}_${token.chainID}`}
 					href={`/apps/send?tokens=${token.address}&values=${token.balance.raw}`}>
 					<SmolTokenButton
 						key={`${token.address}_${token.chainID}`}

packages/smol/pages/_app.tsx

@@ -8,7 +8,14 @@ import {WithFonts} from '@lib/common/WithFonts';
 import {IndexedDB} from '@lib/contexts/useIndexedDB';
 import {WithPopularTokens} from '@lib/contexts/usePopularTokens';
 import {WithPrices} from '@lib/contexts/usePrices';
-import {IconAppAddressBook, IconAppDisperse, IconAppRevoke, IconAppSend, IconAppSwap} from '@lib/icons/IconApps';
+import {
+	IconAppAddressBook,
+	IconAppDisperse,
+	IconAppRevoke,
+	IconAppSend,
+	IconAppStream,
+	IconAppSwap
+} from '@lib/icons/IconApps';
 import {IconCheck} from '@lib/icons/IconCheck';
 import {IconCircleCross} from '@lib/icons/IconCircleCross';
 import {IconClone} from '@lib/icons/IconClone';
@@ -70,19 +77,18 @@ const MENU = [
 				icon: <IconClone />
 			}
 		]
+	},
+	{
+		href: 'https://v1.smold.app/stream',
+		label: 'Stream',
+		icon: <IconAppStream />
 	}
 	// {
 	// 	href: '/apps/earn',
 	// 	label: 'Earn',
 	// 	isDisabled: true,
 	// 	icon: <IconAppEarn />
 	// },
-	// {
-	// 	href: '/apps/stream',
-	// 	label: 'Stream',
-	// 	isDisabled: true,
-	// 	icon: <IconAppStream />
-	// }
 ];
 
 function MyApp(props: AppProps): ReactElement {