feat: add collectibles widget, ref leather-io/issues#222

apps/mobile/src/components/home/home.tsx

@@ -1,4 +1,6 @@
 import { AccountsWidget } from '@/components/widgets/accounts/accounts-widget';
+import { CollectiblesWidget } from '@/components/widgets/collectibles/collectibles-widget';
+import { mockCollectibles } from '@/components/widgets/collectibles/collectibles.mocks';
 import { TokensWidget } from '@/components/widgets/tokens/tokens-widget';
 import { getMockTokens, mockTotalBalance } from '@/components/widgets/tokens/tokens.mocks';
 import { useAccounts } from '@/store/accounts/accounts.read';
@@ -16,6 +18,10 @@ export function Home() {
     <HomeLayout>
       <AccountsWidget accounts={accounts.list} wallets={wallets.list} />
       <TokensWidget tokens={getMockTokens()} totalBalance={mockTotalBalance.totalUsdBalance} />
+      <CollectiblesWidget
+        collectibles={mockCollectibles}
+        totalBalance={mockTotalBalance.totalUsdBalance}
+      />
     </HomeLayout>
   );
 }

apps/mobile/src/components/widgets/collectibles/collectibles-header.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+
+import { t } from '@lingui/macro';
+
+import { Box, ChevronRightIcon, Chip, SheetRef, Text } from '@leather.io/ui/native';
+
+import { FiatBalance } from '../components/balance/fiat-balance';
+
+interface CollectiblesHeaderProps {
+  collectibleCount: number;
+  sheetRef: React.RefObject<SheetRef>;
+  totalBalance: string;
+}
+
+function CollectiblesHeaderText() {
+  return <Text variant="heading05">{t`My collectibles`}</Text>;
+}
+
+export function CollectiblesHeader({ collectibleCount, totalBalance }: CollectiblesHeaderProps) {
+  const hasCollectibles = collectibleCount > 0;
+  if (!hasCollectibles) return <CollectiblesHeaderText />;
+  return (
+    <Box flexDirection="row" gap="1" alignItems="center" marginHorizontal="5">
+      <CollectiblesHeaderText />
+      <Chip label={collectibleCount} />
+      <ChevronRightIcon variant="small" />
+      <Box flex={1} justifyContent="flex-end" alignItems="flex-end">
+        <FiatBalance balance={totalBalance} color="ink.text-subdued" />
+      </Box>
+    </Box>
+  );
+}

apps/mobile/src/components/widgets/collectibles/collectibles-widget.layout.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import { ScrollView } from 'react-native-gesture-handler';
+
+import { useTheme } from '@shopify/restyle';
+
+import { Box, SheetRef, Theme } from '@leather.io/ui/native';
+
+import { Widget } from '../widget';
+
+interface CollectiblesWidgetProps {
+  balance?: React.ReactNode;
+  children: React.ReactNode;
+  header?: React.ReactNode;
+  sheetRef?: React.RefObject<SheetRef>;
+}
+
+export function CollectiblesWidgetLayout({ children, header }: CollectiblesWidgetProps) {
+  const theme = useTheme<Theme>();
+  return (
+    <Widget>
+      <Box>{header}</Box>
+      <ScrollView
+        showsHorizontalScrollIndicator={false}
+        horizontal
+        contentContainerStyle={{ gap: theme.spacing['3'], marginHorizontal: theme.spacing['5'] }}
+      >
+        {children}
+      </ScrollView>
+    </Widget>
+  );
+}

apps/mobile/src/components/widgets/collectibles/collectibles-widget.tsx

@@ -0,0 +1,35 @@
+import React, { useRef } from 'react';
+
+import { SheetRef } from '@leather.io/ui/native';
+
+import { TokenBalance } from '../components/balance/token-balance';
+import { CollectiblesHeader } from './collectibles-header';
+import { CollectiblesWidgetLayout } from './collectibles-widget.layout';
+import { type Collectible } from './collectibles.mocks';
+import { CollectiblesCard } from './components/collectible-card';
+
+interface CollectiblesWidgetProps {
+  collectibles: Collectible[];
+  totalBalance: string;
+}
+
+export function CollectiblesWidget({ collectibles, totalBalance }: CollectiblesWidgetProps) {
+  const sheetRef = useRef<SheetRef>(null);
+
+  return (
+    <CollectiblesWidgetLayout
+      header={
+        <CollectiblesHeader
+          collectibleCount={collectibles.length}
+          totalBalance={totalBalance}
+          sheetRef={sheetRef}
+        />
+      }
+      balance={collectibles.length > 0 && <TokenBalance balance={totalBalance} />}
+    >
+      {collectibles.map((collectible: Collectible, index: number) => (
+        <CollectiblesCard key={`collectible-${index}`} collectible={collectible} />
+      ))}
+    </CollectiblesWidgetLayout>
+  );
+}