fix: adjusted collectible tile height,

feat: added coming soon page to explore within collection details

Author: andrewlee348

packages/connect/src/styles.ts

@@ -898,6 +898,9 @@ export const styles = String.raw`
   .fill-background-raised {
     fill: var(--seq-color-background-raised);
   }
+  .object-contain {
+    object-fit: contain;
+  }
   .object-cover {
     object-fit: cover;
   }

packages/wallet-widget/src/components/NavigationHeader/content/HomeHeader.tsx

@@ -36,6 +36,13 @@ export const HomeHeader = () => {
     setIsWalletViewOpen(true)
   }
 
+  const handleManageWallets = () => {
+    setIsWalletViewOpen(false)
+    setNavigation({
+      location: 'settings-wallets'
+    })
+  }
+
   const onClickSend = () => {
     setIsOperationMenuOpen(false)
     setNavigation({
@@ -179,7 +186,10 @@ export const HomeHeader = () => {
                     Add Wallet
                   </Text>
                 </div>
-                <div className="flex justify-center items-center bg-background-secondary rounded-full py-3 px-4 gap-2 w-full hover:opacity-80 cursor-pointer">
+                <div
+                  className="flex justify-center items-center bg-background-secondary rounded-full py-3 px-4 gap-2 w-full hover:opacity-80 cursor-pointer"
+                  onClick={() => handleManageWallets()}
+                >
                   <SettingsIcon color="white" />
                   <Text variant="normal" fontWeight="bold" color="primary">
                     Manage

packages/wallet-widget/src/components/NoResults.tsx

@@ -5,7 +5,7 @@ import { useMemo } from 'react'
 import { MiniButton } from '../components/MiniButton.js'
 import { useSettings } from '../hooks/useSettings.js'
 
-export const NoResults = ({ hasInstructions }: { hasInstructions?: boolean }) => {
+export const NoResults = ({ hasInstructions, customText }: { hasInstructions?: boolean; customText?: string }) => {
   const { wallets } = useWallets()
   const { selectedWallets, allNetworks, selectedNetworks, setSelectedWallets, setSelectedNetworks } = useSettings()
 
@@ -22,7 +22,7 @@ export const NoResults = ({ hasInstructions }: { hasInstructions?: boolean }) =>
       </div>
       <div className="flex flex-col items-center justify-center gap-2">
         <Text variant="medium" color="primary">
-          No results found
+          {customText || 'No results found'}
         </Text>
 
         {hasInstructions && (

packages/wallet-widget/src/components/SearchLists/CollectiblesList/CollectibleTile.tsx

@@ -27,7 +27,7 @@ export const CollectibleTile = ({ balance, onTokenClick }: CollectibleTileProps)
   const symbol = tokenMetadata?.[0]?.name
 
   return (
-    <div className="select-none cursor-pointer aspect-square relative" onClick={onClick}>
+    <div className="select-none cursor-pointer relative" onClick={onClick}>
       <TokenTileImage src={imageUrl} symbol={symbol} />
       <NetworkImage
         chainId={balance.chainId}

packages/wallet-widget/src/components/TokenTileImage.tsx

@@ -23,7 +23,7 @@ export const TokenTileImage = ({ src, symbol }: TokenTileImageProps) => {
   return (
     <Card className="flex p-0 aspect-square justify-center items-center overflow-hidden rounded-lg bg-background-secondary">
       {src ? (
-        <Image style={{ height: '100%', width: '100%', objectFit: 'cover' }} src={src} />
+        <Image className="h-full" src={src} />
       ) : (
         <Text variant="inherit" fontWeight="medium" color="muted" uppercase>
           {symbolLabel}

packages/wallet-widget/src/views/CollectionDetails/index.tsx

@@ -5,6 +5,7 @@ import type { TokenBalance } from '@0xsequence/indexer'
 import { useState } from 'react'
 
 import type { TokenInfo } from '../../components/NavigationHeader/index.js'
+import { NoResults } from '../../components/NoResults.js'
 import { CollectiblesTab } from '../../components/SearchLists/CollectiblesList/CollectiblesTab.js'
 import { useNavigation, useSettings } from '../../hooks/index.js'
 
@@ -79,7 +80,7 @@ export const CollectionDetails = ({ contractAddress, chainId }: TokenInfo) => {
             />
           </TabsContent>
           <TabsContent value="explore">
-            <div></div>
+            <NoResults customText="Coming soon" />
           </TabsContent>
         </div>
       </TabsPrimitive.Root>