refactor: remove breadcrumbs for popup mode

input-output-hk · May 3, 2024 · 8294dd2 · 8294dd2
1 parent f9bb7ab
commit 8294dd2
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 8 deletions.
diff --git a/apps/browser-extension-wallet/src/features/nfts/components/NftDetail.tsx b/apps/browser-extension-wallet/src/features/nfts/components/NftDetail.tsx
@@ -10,14 +10,17 @@ import { NftDetail as NftDetailView } from '@lace/core';
 import { Wallet } from '@lace/cardano';
 import { useTranslation } from 'react-i18next';
 import { SendFlowTriggerPoints, useOutputInitialState } from '@src/views/browser-view/features/send-transaction';
-import { DEFAULT_WALLET_BALANCE, SEND_NFT_DEFAULT_AMOUNT } from '@src/utils/constants';
+import { APP_MODE_POPUP, DEFAULT_WALLET_BALANCE, SEND_NFT_DEFAULT_AMOUNT } from '@src/utils/constants';
 import { PostHogAction } from '@providers/AnalyticsProvider/analyticsTracker';
 import { useAnalyticsContext } from '@providers';
 import { buttonIds } from '@hooks/useEnterKeyPress';
 import { withNftsFoldersContext } from '../context';
 
 export const NftDetail = withNftsFoldersContext((): React.ReactElement => {
-  const { inMemoryWallet } = useWalletStore();
+  const {
+    inMemoryWallet,
+    walletUI: { appMode }
+  } = useWalletStore();
   const { t } = useTranslation();
   const analytics = useAnalyticsContext();
 
@@ -59,6 +62,7 @@ export const NftDetail = withNftsFoldersContext((): React.ReactElement => {
       {assetInfo && (
         <NftDetailView
           {...nftDetailSelector(assetInfo)}
+          isPopup={appMode === APP_MODE_POPUP}
           amount={amount}
           title={<h2 className={styles.secondaryTitle}>{assetInfo.nftMetadata?.name ?? assetInfo.fingerprint}</h2>}
         />

diff --git a/...rowser-extension-wallet/src/views/browser-view/features/nfts/components/DetailsDrawer.tsx b/...rowser-extension-wallet/src/views/browser-view/features/nfts/components/DetailsDrawer.tsx
@@ -12,6 +12,7 @@ import styles from './DetailsDrawer.module.scss';
 import { useWalletStore } from '@stores';
 import { useWalletAvatar } from '@hooks';
 import { useAnalyticsContext } from '@providers';
+import { APP_MODE_POPUP } from '@src/utils/constants';
 
 interface GeneralSettingsDrawerProps {
   onClose: () => void;
@@ -27,7 +28,10 @@ export const DetailsDrawer = ({
   onSend
 }: GeneralSettingsDrawerProps): ReactElement => {
   const { t } = useTranslation();
-  const { environmentName } = useWalletStore();
+  const {
+    environmentName,
+    walletUI: { appMode }
+  } = useWalletStore();
   const assetInfo = useMemo(
     () => (isNil(assetsInfo) ? undefined : assetsInfo.get(selectedNft?.assetId)),
     [selectedNft, assetsInfo]
@@ -69,6 +73,7 @@ export const DetailsDrawer = ({
         <div className={styles.wrapper}>
           <NftDetail
             {...nftDetailSelector(assetInfo)}
+            isPopup={appMode === APP_MODE_POPUP}
             amount={selectedNft.amount}
             translations={nftDetailTranslation}
             onSetAsAvatar={handleSetAsAvatar}

diff --git a/packages/core/src/ui/components/Nft/NftDetail.module.scss b/packages/core/src/ui/components/Nft/NftDetail.module.scss
@@ -65,9 +65,9 @@
         justify-content: center;
         gap: size_unit(0.75);
         align-items: center;
-        background-color: var(--light-mode-light-grey, #f9f9f9);
+        background-color: var(--dark-mode-grey, #f9f9f9);
         border-radius: 100px;
-        color: var(--dark-mode-mid-grey, --text-color-primary);
+        color: var(--text-color-primary);
         font-weight: 500;
       }
 

diff --git a/packages/core/src/ui/components/Nft/NftDetail.tsx b/packages/core/src/ui/components/Nft/NftDetail.tsx
@@ -5,7 +5,7 @@ import { NftImage } from './NftImage';
 import { TranslationsFor } from '@ui/utils/types';
 import { Breadcrumb } from 'antd';
 import { FolderOutlined, RightOutlined } from '@ant-design/icons';
-import { ControlButton } from '@lace/ui';
+import { Box, ControlButton, Flex } from '@lace/ui';
 import { ReactComponent as ProfileIcon } from '../../assets/icons/profile-icon.component.svg';
 
 export interface NftDetailProps {
@@ -17,6 +17,7 @@ export interface NftDetailProps {
   amount?: number | string;
   translations: TranslationsFor<'tokenInformation' | 'attributes' | 'setAsAvatar' | 'directory'>;
   onSetAsAvatar?: (image: string) => void;
+  isPopup?: boolean;
 }
 
 const JSON_INDENTATION = 2;
@@ -37,7 +38,8 @@ export const NftDetail = ({
   folder,
   amount,
   translations,
-  onSetAsAvatar
+  onSetAsAvatar,
+  isPopup
 }: NftDetailProps): React.ReactElement => (
   <div className={styles.nftDetail}>
     {title}
@@ -65,14 +67,21 @@ export const NftDetail = ({
             ...tokenInformation,
             {
               name: translations.directory,
-              renderValueAs: (
+              value: folder ? `Root > ${folder}` : 'Root',
+              renderValueAs: !isPopup ? (
                 <Breadcrumb separator={<RightOutlined />}>
                   <Breadcrumb.Item>
                     <FolderOutlined />
                     <span>Root</span>
                   </Breadcrumb.Item>
                   {folder && <Breadcrumb.Item>{folder}</Breadcrumb.Item>}
                 </Breadcrumb>
+              ) : (
+                <Flex justifyContent="space-between" gap="$1">
+                  <Box>Root</Box>
+                  {folder && <Box px="$8">{'>'}</Box>}
+                  {folder && <Box>{folder}</Box>}
+                </Flex>
               )
             }
           ]}