widget-v2

packages/connect/src/index.ts

@@ -44,7 +44,15 @@ export {
 
 // Utils
 export { getConnectWallets } from './utils/getConnectWallets.js'
-export { capitalize, compareAddress, formatAddress, formatDisplay, isEmailValid, truncateAtMiddle } from './utils/helpers.js'
+export {
+  capitalize,
+  compareAddress,
+  formatAddress,
+  formatDisplay,
+  isEmailValid,
+  truncateAtIndex,
+  truncateAtMiddle
+} from './utils/helpers.js'
 export { createNativeTokenBalance, getNativeTokenInfoByChainId } from './utils/tokens.js'
 export { getModalPositionCss } from './utils/styling.js'
 export { getNetwork, getNetworkBackgroundColor, getNetworkColor } from './utils/networks.js'

packages/connect/src/styles.ts

@@ -7,7 +7,6 @@ export const styles = String.raw`
     --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
       "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
     --color-violet-600: oklch(54.1% 0.281 293.009);
-    --color-gray-500: oklch(55.1% 0.027 264.364);
     --color-black: #000;
     --color-white: #fff;
     --spacing: 0.25rem;
@@ -427,6 +426,9 @@ export const styles = String.raw`
   .h-\[1px\] {
     height: 1px;
   }
+  .h-\[2px\] {
+    height: 2px;
+  }
   .h-\[52px\] {
     height: 52px;
   }
@@ -686,6 +688,11 @@ export const styles = String.raw`
   .justify-self-center {
     justify-self: center;
   }
+  .truncate {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
   .overflow-hidden {
     overflow: hidden;
   }
@@ -1156,9 +1163,6 @@ 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);
   }

packages/connect/src/utils/helpers.ts

@@ -107,6 +107,16 @@ export const truncateAtMiddle = (text: string, truncateAt: number) => {
   return finalText
 }
 
+export const truncateAtIndex = (text: string, truncateIndex: number) => {
+  let finalText = text
+
+  if (text.length >= truncateIndex) {
+    finalText = text.slice(0, truncateIndex) + '...' + text.slice(text.length - 4, text.length)
+  }
+
+  return finalText
+}
+
 export const formatAddress = (text: string) => {
   return `0x${truncateAtMiddle(text?.substring(2) || '', 8)}`
 }

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

@@ -1,28 +1,37 @@
-import { Button, CheckmarkIcon, CopyIcon } from '@0xsequence/design-system'
+import { Button, CheckmarkIcon, CopyIcon, Text } from '@0xsequence/design-system'
 import { useClipboard } from '@0xsequence/hooks'
 import type { ComponentProps } from 'react'
 
 type ButtonProps = ComponentProps<typeof Button>
 
 interface CopyButtonProps extends ButtonProps {
   text: string
-  buttonVariant: 'icon' | 'with-label'
+  includeLabel?: boolean
+  size?: 'xs' | 'sm' | 'md' | 'lg'
 }
 
 export const CopyButton = (props: CopyButtonProps) => {
-  const { buttonVariant = 'icon', text, size = 'xs', ...rest } = props
+  const { includeLabel = false, text, size = 'xs' } = props
   const [isCopied, setCopied] = useClipboard({ timeout: 4000 })
 
   const label = isCopied ? 'Copied!' : 'Copy'
 
   return (
-    <Button
-      size={size!}
-      leftIcon={isCopied ? CheckmarkIcon : CopyIcon}
-      label={buttonVariant === 'with-label' ? label : undefined}
-      variant={buttonVariant === 'icon' ? 'ghost' : 'glass'}
-      onClick={() => setCopied(text)}
-      {...rest}
-    />
+    <div className="flex flex-row gap-1 items-center hover:opacity-80 cursor-pointer" onClick={() => setCopied(text)}>
+      {isCopied ? <CheckmarkIcon color="white" size={size} /> : <CopyIcon color="white" size={size} />}
+      {includeLabel && (
+        <Text color="primary" fontWeight="medium" variant="normal">
+          {label}
+        </Text>
+      )}
+    </div>
+    // <Button
+    //   size={size!}
+    //   leftIcon={isCopied ? CheckmarkIcon : CopyIcon}
+    //   label={buttonVariant === 'with-label' ? label : undefined}
+    //   variant={buttonVariant === 'icon' ? 'ghost' : buttonVariant === 'text' ? 'text' : 'glass'}
+    //   onClick={() => setCopied(text)}
+    //   {...rest}
+    // />
   )
 }

packages/wallet-widget/src/components/Filter/CollectionsFilter.tsx

@@ -1,55 +1,50 @@
-import { Text, TokenImage } from '@0xsequence/design-system'
+import { Text } from '@0xsequence/design-system'
 
-import { useGetCollections, useSettings } from '../../hooks/index.js'
-import { MediaIconWrapper } from '../IconWrappers/index.js'
+import { useGetAllTokensDetails, useSettings } from '../../hooks/index.js'
+import { useGetAllCollections } from '../../hooks/useGetAllCollections.js'
 import { ListCardSelect } from '../ListCard/ListCardSelect.js'
 
 export const CollectionsFilter = () => {
-  const { selectedCollectionsObservable, selectedNetworks, selectedWallets, setSelectedCollections } = useSettings()
-  const selectedCollections = selectedCollectionsObservable.get()
+  const { selectedWallets, selectedNetworks, showCollectionsObservable, setShowCollections, hideUnlistedTokens } = useSettings()
+  const showCollections = showCollectionsObservable.get()
 
-  const { data: collections } = useGetCollections({
+  const { data: collections } = useGetAllCollections({
     accountAddresses: selectedWallets.map(wallet => wallet.address),
     chainIds: selectedNetworks,
-    hideUnlistedTokens: true
+    hideUnlistedTokens
   })
 
+  const { data: tokens } = useGetAllTokensDetails({
+    accountAddresses: selectedWallets.map(wallet => wallet.address),
+    chainIds: selectedNetworks,
+    hideUnlistedTokens
+  })
+
+  const collectionsCount = collections.length
+  const itemsCount = tokens.filter(token => token.contractType === 'ERC721' || token.contractType === 'ERC1155').length
+
   return (
     <div className="flex flex-col bg-background-primary gap-3">
-      {collections?.length && collections.length > 1 && (
-        <ListCardSelect
-          key="all"
-          isSelected={selectedCollectionsObservable.get().length === 0}
-          onClick={() => setSelectedCollections([])}
-        >
-          <MediaIconWrapper
-            iconList={collections.map(collection => (
-              <div className="bg-background-backdrop rounded-full">
-                <TokenImage src={collection.logoURI} symbol={collection.name} />
-              </div>
-            ))}
-            size="sm"
-          />
-          <Text color="primary" fontWeight="medium" variant="normal">
-            All
+      <ListCardSelect key="Items" isSelected={!showCollections} onClick={() => setShowCollections(false)}>
+        <div>
+          <Text color="primary" variant="normal">
+            Items{' '}
+          </Text>
+          <Text color="muted" variant="normal">
+            ({itemsCount})
+          </Text>
+        </div>
+      </ListCardSelect>
+      <ListCardSelect key="Collections" isSelected={showCollections} onClick={() => setShowCollections(true)}>
+        <div>
+          <Text color="primary" variant="normal">
+            Collections{' '}
           </Text>
-        </ListCardSelect>
-      )}
-      {collections?.map(collection => (
-        <ListCardSelect
-          key={collection.contractAddress}
-          isSelected={
-            selectedCollections.some(c => c.contractAddress === collection.contractAddress && c.chainId === collection.chainId) ||
-            collections.length === 1
-          }
-          onClick={collections.length > 1 ? () => setSelectedCollections([collection]) : undefined}
-        >
-          <TokenImage src={collection.logoURI} symbol={collection.name} withNetwork={collection.chainId} />
-          <Text color="primary" fontWeight="medium" variant="normal">
-            {collection.name}
+          <Text color="muted" variant="normal">
+            ({collectionsCount})
           </Text>
-        </ListCardSelect>
-      ))}
+        </div>
+      </ListCardSelect>
     </div>
   )
 }