fix: setOpenWalletModal missing param (#414)

* fix: setOpenWalletModal missing param

* fix: filter by wallets title

* change title

* feat: filter props for collection

* get contract info for collection

* Add collection info header for single collection selection

* Update example items

---------

Co-authored-by: Tolgahan Arikan <[email protected]>

Author: VGabriel45

examples/react/src/components/Connected.tsx

@@ -516,6 +516,23 @@ export const Connected = () => {
               description="View your integrated wallet"
               onClick={() => setOpenWalletModal(true)}
             />
+            <CardButton
+              title="Wallet Widget Inventory"
+              description="Open the wallet widget with a specific collection"
+              onClick={() =>
+                setOpenWalletModal(true, {
+                  defaultNavigation: {
+                    location: 'search-collectibles',
+                    params: {
+                      selectedCollection: {
+                        chainId: 137,
+                        contractAddress: '0x92473261F2c26F2264429C451F70b0192f858795'
+                      }
+                    }
+                  }
+                })
+              }
+            />
             {(sponsoredContractAddresses[chainId] || networkForCurrentChainId.testnet) && isWaasConnectionActive && (
               <CardButton
                 title="Send sponsored transaction"

packages/connect/src/styles.ts

@@ -7,6 +7,7 @@ export const styles = String.raw`
       "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
     --font-mono: "Roboto", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
     --color-violet-600: oklch(0.541 0.281 293.009);
+    --color-gray-500: oklch(0.551 0.027 264.364);
     --color-black: #000;
     --color-white: #fff;
     --spacing: 0.25rem;
@@ -16,6 +17,8 @@ export const styles = String.raw`
     --text-sm--line-height: calc(1.25 / 0.875);
     --text-base: 1rem;
     --text-base--line-height: calc(1.5 / 1);
+    --text-lg: 1.125rem;
+    --text-lg--line-height: calc(1.75 / 1.125);
     --text-xl: 1.25rem;
     --text-xl--line-height: calc(1.75 / 1.25);
     --text-2xl: 1.5rem;
@@ -307,6 +310,9 @@ export const styles = String.raw`
   .my-4 {
     margin-block: calc(var(--spacing) * 4);
   }
+  .mt-0 {
+    margin-top: calc(var(--spacing) * 0);
+  }
   .mt-0\.5 {
     margin-top: calc(var(--spacing) * 0.5);
   }
@@ -382,6 +388,9 @@ export const styles = String.raw`
   .inline-flex {
     display: inline-flex;
   }
+  .table {
+    display: table;
+  }
   .aspect-square {
     aspect-ratio: 1 / 1;
   }
@@ -472,6 +481,9 @@ export const styles = String.raw`
   .min-h-full {
     min-height: 100%;
   }
+  .w-1 {
+    width: calc(var(--spacing) * 1);
+  }
   .w-1\/2 {
     width: calc(1/2 * 100%);
   }
@@ -565,12 +577,21 @@ export const styles = String.raw`
   .min-w-full {
     min-width: 100%;
   }
+  .flex-shrink {
+    flex-shrink: 1;
+  }
   .shrink-0 {
     flex-shrink: 0;
   }
+  .flex-grow {
+    flex-grow: 1;
+  }
   .grow {
     flex-grow: 1;
   }
+  .border-collapse {
+    border-collapse: collapse;
+  }
   .origin-top {
     transform-origin: top;
   }
@@ -939,6 +960,9 @@ export const styles = String.raw`
   .pt-0 {
     padding-top: calc(var(--spacing) * 0);
   }
+  .pt-1 {
+    padding-top: calc(var(--spacing) * 1);
+  }
   .pt-1\.5 {
     padding-top: calc(var(--spacing) * 1.5);
   }
@@ -1024,6 +1048,10 @@ export const styles = String.raw`
     font-size: var(--text-base);
     line-height: var(--tw-leading, var(--text-base--line-height));
   }
+  .text-lg {
+    font-size: var(--text-lg);
+    line-height: var(--tw-leading, var(--text-lg--line-height));
+  }
   .text-sm {
     font-size: var(--text-sm);
     line-height: var(--tw-leading, var(--text-sm--line-height));
@@ -1137,6 +1165,9 @@ export const styles = String.raw`
   .text-black {
     color: var(--color-black);
   }
+  .text-gray-500 {
+    color: var(--color-gray-500);
+  }
   .text-info {
     color: var(--seq-color-info);
   }
@@ -1221,6 +1252,9 @@ export const styles = String.raw`
   .ring-border-normal {
     --tw-ring-color: var(--seq-color-border-normal);
   }
+  .ring-white {
+    --tw-ring-color: var(--color-white);
+  }
   .ring-white\/10 {
     --tw-ring-color: color-mix(in oklab, var(--color-white) 10%, transparent);
   }
@@ -1256,6 +1290,10 @@ export const styles = String.raw`
     -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
     backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
   }
+  .backdrop-filter {
+    -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
+    backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
+  }
   .transition {
     transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));

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

@@ -1,11 +1,12 @@
-import { SearchIcon, TextInput } from '@0xsequence/design-system'
+import { SearchIcon, TextInput, TokenImage } from '@0xsequence/design-system' // Import TokenImage from design-system
 import { TokenBalance } from '@0xsequence/indexer'
 import Fuse from 'fuse.js'
 import { useState, useMemo } from 'react'
 
 import { useGetMoreBalances } from '../../hooks'
 import { TokenBalanceWithPrice } from '../../utils'
 import { FilterButton } from '../Filter/FilterButton'
+import { NetworkBadge } from '../NetworkBadge'
 
 import { CollectiblesTab } from './CollectiblesList/CollectiblesTab'
 
@@ -14,13 +15,20 @@ export const CollectiblesList = ({
   isLoadingFirstPage,
   onTokenClick,
   enableFilters = true,
-  gridColumns = 2
+  gridColumns = 2,
+  collectionHeaderInfo
 }: {
   tokenBalancesData: TokenBalance[]
   isLoadingFirstPage: boolean
   onTokenClick: (token: TokenBalanceWithPrice) => void
   enableFilters?: boolean
   gridColumns?: number
+  // Used only if a single collection is selected
+  collectionHeaderInfo?: {
+    logoURI?: string
+    name?: string
+    chainId: number
+  }
 }) => {
   const pageSize = 8
 
@@ -101,6 +109,24 @@ export const CollectiblesList = ({
         </div>
         {enableFilters && <FilterButton label="Collectible Filters" type="collectibles" />}
       </div>
+
+      {collectionHeaderInfo && (
+        <div className="flex flex-col items-center mb-4">
+          <div className="my-2">
+            <TokenImage src={collectionHeaderInfo.logoURI} symbol={collectionHeaderInfo.name} size="lg" />
+          </div>
+          {collectionHeaderInfo.name && (
+            <h2 className="text-lg text-white font-medium text-center mb-2">{collectionHeaderInfo.name}</h2>
+          )}
+          <NetworkBadge chainId={collectionHeaderInfo.chainId} />
+
+          <p className="text-sm text-gray-500 mt-2">
+            {collectibleBalances.length} Unique Collectible
+            {collectibleBalances.length === 0 || collectibleBalances.length > 1 ? 's' : ''}
+          </p>
+        </div>
+      )}
+
       <div className="w-full">
         <CollectiblesTab
           displayedCollectibleBalances={search ? infiniteSearchBalances?.pages.flat() : infiniteBalances?.pages.flat()}

packages/wallet-widget/src/components/SequenceWalletProvider/utils/index.tsx

@@ -51,7 +51,12 @@ export const getContent = (navigation: Navigation) => {
     case 'search-tokens':
       return <SearchTokens />
     case 'search-collectibles':
-      return <SearchCollectibles />
+      return (
+        <SearchCollectibles
+          contractAddress={navigation.params?.selectedCollection?.contractAddress}
+          chainId={navigation.params?.selectedCollection?.chainId}
+        />
+      )
     case 'settings':
       return <SettingsMenu />
     case 'settings-wallets':

packages/wallet-widget/src/contexts/Navigation.ts

@@ -87,6 +87,17 @@ export interface SendCollectibleNavigation {
   params: SendCollectibleParams
 }
 
+export interface SearchCollectiblesParams {
+  selectedCollection: {
+    chainId: number
+    contractAddress: string
+  }
+}
+
+export interface SearchCollectiblesNavigation {
+  location: 'search-collectibles'
+  params?: SearchCollectiblesParams
+}
 export interface BasicNavigation {
   location:
     | 'home'
@@ -108,14 +119,14 @@ export interface BasicNavigation {
     | 'connect-dapp'
     | 'search'
     | 'search-tokens'
-    | 'search-collectibles'
 }
 
 export type Navigation =
   | BasicNavigation
   | CoinDetailsNavigation
   | CollectibleDetailsNavigation
   | TransactionDetailsNavigation
+  | SearchCollectiblesNavigation
   | SearchViewAllNavigation
   | SendCoinNavigation
   | SendCollectibleNavigation

packages/wallet-widget/src/hooks/useOpenWalletModal.ts

@@ -1,21 +1,22 @@
-import { useWalletModalContext } from '../contexts/WalletModal'
+import { useWalletModalContext, WalletOptions } from '../contexts/WalletModal'
 
 /**
  * Return type for the useOpenWalletModal hook.
  *
- * @property {function(isOpen: boolean): void} setOpenWalletModal - Function to open or close the Wallet modal
+ * @property {function(isOpen: boolean, options?: WalletOptions): void} setOpenWalletModal - Function to open or close the Wallet modal
  * @property {boolean} openWalletModalState - Current open state of the Wallet modal
  */
 type UseOpenWalletModalReturnType = {
-  setOpenWalletModal: (isOpen: boolean) => void
+  setOpenWalletModal: (isOpen: boolean, options?: WalletOptions) => void
   openWalletModalState: boolean
 }
 
 /**
- * Hook to manage the Wallet Inventory modal that allows users to view their tokens and NFTs.
+ * Hook to manage the Wallet Widget modal.
  *
- * This hook provides a method to open and close the wallet inventory modal, and access its current open state.
- * The Wallet modal displays all tokens, NFTs and collectibles present in the connected wallet.
+ * This hook provides a method to open and close the wallet widget modal, and access its current open state.
+ * The Wallet Widget displays your Tokens, Collectibles, Transactions, Settings, multiple connected / linked wallets and also allows
+ * to send, receive, buy (on-ramp) and swap tokens.
  *
  * @see {@link https://docs.sequence.xyz/sdk/web/hooks/useOpenWalletModal} for more detailed documentation.
  *
@@ -29,17 +30,17 @@ type UseOpenWalletModalReturnType = {
  *   // Get the function to open/close the wallet modal
  *   const { setOpenWalletModal } = useOpenWalletModal()
  *
- *   // Function to handle opening the wallet inventory
- *   const handleViewInventory = () => {
- *     setOpenWalletModal(true) // Open the wallet modal to view tokens
+ *   // Function to handle opening the wallet widget modal
+ *   const handleViewWallet = () => {
+ *     setOpenWalletModal(true) // Open the wallet widget modal
  *   }
  *
  *   return (
  *     <button
- *       onClick={handleViewInventory}
- *       title="Inventory"
+ *       onClick={handleViewWallet}
+ *       title="Wallet"
  *     >
- *       View all tokens in your wallet
+ *       View your wallet
  *     </button>
  *   )
  * }

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

@@ -374,7 +374,7 @@ export const Home = () => {
           </SlideupDrawer>
         )}
         {walletFilterOpen && (
-          <SlideupDrawer onClose={() => setWalletFilterOpen(false)} label="Select active wallet">
+          <SlideupDrawer onClose={() => setWalletFilterOpen(false)} label="Filter items by wallet">
             <WalletsFilter />
           </SlideupDrawer>
         )}