From f04ddc0e12e5572ec70e5fb99d791136e14f6bf6 Mon Sep 17 00:00:00 2001
From: Ben Goldberg <bengoldberg@rainbow.me>
Date: Tue, 26 Sep 2023 17:08:39 -0700
Subject: [PATCH] Mints Feature (#5037)

* generic card

* static card

* stuff

* more things

* stuff

* ui

* just committing stuff

* fun

* stuff

* for christian

* dnoe ish

* overlay

* img stuff

* img stuff

* analytics

* stuff

* media component

* Improve FeaturedMintCard accent color contrast

* lots of things

* refactor

* tweak

* english

* turn on feature flag

* network badges

* rename index + show chain badge for mainnet

* fixes

* api updates

* fix account switching crash

* remote config

* turn off local flag

* fix

* flashlist -> flatlist

* lang

* perf

* remove no data state

* discover layout

* fix e2e

* lint

* fix

* fix e2e

* fix sizing

* recent mint gif

* png

* rm

* disable wallet switcher android

* wc: use bottom sheets on android

* tab bar color

* avatar fix

---------

Co-authored-by: Christian Baroni <7061887+christianbaroni@users.noreply.github.com>
Co-authored-by: skylarbarrera <skylar.barrera@gmail.com>
---
 src/analytics/event.ts                        |  25 ++
 src/analytics/userProperties.ts               |   5 +
 src/components/Media.tsx                      |  88 +++++
 src/components/PromoSheet.tsx                 |   1 -
 src/components/cards/CarouselCard.tsx         | 170 +++++++++
 src/components/cards/FeaturedMintCard.tsx     | 333 ++++++++++++++++++
 .../cards/MintsCard/CollectionCell.tsx        | 205 +++++++++++
 src/components/cards/MintsCard/Menu.tsx       |  69 ++++
 src/components/cards/MintsCard/MintsCard.tsx  | 105 ++++++
 src/config/experimental.ts                    |   2 +
 src/graphql/queries/arc.graphql               |  57 +++
 src/handlers/imgix.ts                         |   2 +-
 src/helpers/utilities.ts                      |  20 ++
 src/languages/en_US.json                      |  26 ++
 src/model/config.ts                           |   5 +-
 src/navigation/Routes.android.tsx             |  24 +-
 src/navigation/Routes.ios.tsx                 |   7 +
 src/navigation/config.tsx                     |  10 +
 src/navigation/effects.tsx                    |   4 +
 src/navigation/routesNames.ts                 |   1 +
 src/resources/mints.ts                        | 149 ++++++++
 src/screens/MintsSheet/MintsSheet.tsx         | 185 ++++++++++
 src/screens/MintsSheet/TabBar.tsx             | 152 ++++++++
 src/screens/MintsSheet/card/Card.tsx          | 176 +++++++++
 .../MintsSheet/card/RecentMintCell.tsx        |  95 +++++
 src/screens/MintsSheet/utils.ts               |  22 ++
 .../discover/components/DiscoverHome.js       |  24 +-
 .../discover/components/ListsSection.js       | 131 +++----
 28 files changed, 2013 insertions(+), 80 deletions(-)
 create mode 100644 src/components/Media.tsx
 create mode 100644 src/components/cards/CarouselCard.tsx
 create mode 100644 src/components/cards/FeaturedMintCard.tsx
 create mode 100644 src/components/cards/MintsCard/CollectionCell.tsx
 create mode 100644 src/components/cards/MintsCard/Menu.tsx
 create mode 100644 src/components/cards/MintsCard/MintsCard.tsx
 create mode 100644 src/resources/mints.ts
 create mode 100644 src/screens/MintsSheet/MintsSheet.tsx
 create mode 100644 src/screens/MintsSheet/TabBar.tsx
 create mode 100644 src/screens/MintsSheet/card/Card.tsx
 create mode 100644 src/screens/MintsSheet/card/RecentMintCell.tsx
 create mode 100644 src/screens/MintsSheet/utils.ts

diff --git a/src/analytics/event.ts b/src/analytics/event.ts
index 38cec79df99..c187be4dc56 100644
--- a/src/analytics/event.ts
+++ b/src/analytics/event.ts
@@ -83,6 +83,12 @@ export const event = {
   poapsViewedOnPoap: 'Viewed POAP on poap.gallery',
   positionsOpenedSheet: 'Opened position Sheet',
   positionsOpenedExternalDapp: 'Viewed external dapp',
+
+  mintsPressedFeaturedMintCard: 'Pressed featured mint card',
+  mintsPressedCollectionCell: 'Pressed collection cell in mints card',
+  mintsPressedMintButton: 'Pressed mint button in mints sheet',
+  mintsPressedViewAllMintsButton: 'Pressed view all mints button in mints card',
+  mintsChangedFilter: 'Changed mints filter',
 } as const;
 
 /**
@@ -304,4 +310,23 @@ export type EventProperties = {
   [event.positionsOpenedSheet]: {
     dapp: string;
   };
+  [event.mintsPressedFeaturedMintCard]: {
+    contractAddress: string;
+    chainId: number;
+    totalMints: number;
+    mintsLastHour: number;
+    priceInEth: number;
+  };
+  [event.mintsPressedCollectionCell]: {
+    contractAddress: string;
+    chainId: number;
+    priceInEth: number;
+  };
+  [event.mintsPressedMintButton]: {
+    contractAddress: string;
+    chainId: number;
+    priceInEth: number;
+  };
+  [event.mintsPressedViewAllMintsButton]: undefined;
+  [event.mintsChangedFilter]: { filter: string };
 };
diff --git a/src/analytics/userProperties.ts b/src/analytics/userProperties.ts
index 490a97c0d6d..ec0521a4440 100644
--- a/src/analytics/userProperties.ts
+++ b/src/analytics/userProperties.ts
@@ -20,6 +20,11 @@ export interface UserProperties {
   nftOffersMeanOfferVariance?: number;
   nftOffersMedianOfferVariance?: number;
 
+  // mint.fun
+  numberOfMints?: number;
+  numberOfFreeMints?: number;
+  numberOfPaidMints?: number;
+
   // ens
   // TODO: remove ensProfile tracking the entire object
   ensProfile?: Record<any, any>;
diff --git a/src/components/Media.tsx b/src/components/Media.tsx
new file mode 100644
index 00000000000..bc1f72421fa
--- /dev/null
+++ b/src/components/Media.tsx
@@ -0,0 +1,88 @@
+import React, { useState } from 'react';
+import { maybeSignUri } from '@/handlers/imgix';
+import { Image, ImageStyle, View } from 'react-native';
+// @ts-ignore
+import Video from 'react-native-video';
+import SvgImage from './svg/SvgImage';
+
+export enum MimeType {
+  MP4 = 'video/mp4',
+  GIF = 'image/gif',
+  PNG = 'image/png',
+  SVG = 'image/svg+xml',
+  JPG = 'image/jpeg',
+}
+
+export function Media({
+  url,
+  mimeType,
+  fallbackUrl,
+  style,
+  size,
+  onLayout,
+  onError,
+}: {
+  url: string;
+  mimeType?: string;
+  fallbackUrl?: string;
+  style?: ImageStyle;
+  size?: number;
+  onLayout?: () => void;
+  onError?: () => void;
+}) {
+  const [loading, setLoading] = useState(false);
+
+  const signedUrl = maybeSignUri(url, {
+    // resizing breaks svg
+    w: mimeType === MimeType.SVG ? undefined : size,
+    fm: !mimeType ? 'png' : undefined,
+  });
+  const signedFallbackUrl = maybeSignUri(fallbackUrl ?? url, {
+    w: size,
+    fm: 'png',
+  });
+
+  switch (mimeType) {
+    case MimeType.MP4:
+      return (
+        <Video
+          onLayout={onLayout}
+          loading={loading}
+          onError={onError}
+          muted
+          resizeMode="cover"
+          poster={signedFallbackUrl}
+          posterResizeMode="cover"
+          setLoading={setLoading}
+          repeat
+          style={style}
+          source={{ uri: signedUrl }}
+          uri={signedUrl}
+        />
+      );
+    case MimeType.SVG:
+      return (
+        <View style={{ ...style, overflow: 'hidden' }}>
+          <SvgImage
+            fallbackUri={signedFallbackUrl}
+            onLayout={onLayout}
+            onError={onError}
+            style={style}
+            source={{ uri: signedUrl }}
+          />
+        </View>
+      );
+    case MimeType.GIF:
+    case MimeType.PNG:
+    case MimeType.JPG:
+    default:
+      return (
+        <Image
+          onLayout={onLayout}
+          onError={onError}
+          source={{ uri: signedUrl }}
+          style={style}
+        />
+      );
+  }
+}
diff --git a/src/components/PromoSheet.tsx b/src/components/PromoSheet.tsx
index 1eee1dae43f..42a404aa8a4 100644
--- a/src/components/PromoSheet.tsx
+++ b/src/components/PromoSheet.tsx
@@ -4,7 +4,6 @@ import LinearGradient from 'react-native-linear-gradient';
 import MaskedView from '@react-native-masked-view/masked-view';
 import { SheetActionButton, SheetHandle, SlackSheet } from '@/components/sheet';
 import { CampaignKey } from '@/campaigns/campaignChecks';
-import { ImgixImage } from '@/components/images';
 import { analytics } from '@/analytics';
 import {
   AccentColorProvider,
diff --git a/src/components/cards/CarouselCard.tsx b/src/components/cards/CarouselCard.tsx
new file mode 100644
index 00000000000..aca62ef9881
--- /dev/null
+++ b/src/components/cards/CarouselCard.tsx
@@ -0,0 +1,170 @@
+import {
+  Bleed,
+  Box,
+  Column,
+  Columns,
+  Inline,
+  Stack,
+  Text,
+  useColorMode,
+  useForegroundColor,
+} from '@/design-system';
+import React from 'react';
+import { FlashList, ListRenderItem } from '@shopify/flash-list';
+import { ButtonPressAnimation } from '@/components/animations';
+import { useDimensions } from '@/hooks';
+import ActivityIndicator from '@/components/ActivityIndicator';
+import { IS_ANDROID } from '@/env';
+import Spinner from '@/components/Spinner';
+import { ScrollView, View } from 'react-native';
+
+const HORIZONTAL_PADDING = 20;
+
+const LoadingSpinner = IS_ANDROID ? Spinner : ActivityIndicator;
+
+type CarouselItem<T> = {
+  renderItem: ListRenderItem<T>;
+  keyExtractor: (item: T, index: number) => string;
+  placeholder: React.ReactNode;
+  width: number;
+  height: number; // make sure to include extra 20px to accommodate for vertical bleed
+  padding: number;
+  verticalOverflow?: number;
+};
+
+export function CarouselCard<T>({
+  title,
+  data,
+  carouselItem,
+  button,
+  menu,
+  refresh,
+  canRefresh,
+  isRefreshing,
+}: {
+  title: string | React.ReactNode;
+  data: T[] | null | undefined;
+  carouselItem: CarouselItem<T>;
+  button: React.ReactNode;
+  menu?: React.ReactNode;
+  refresh?: () => void;
+  canRefresh?: boolean;
+  isRefreshing?: boolean;
+}) {
+  const borderColor = useForegroundColor('separator');
+  const { width: deviceWidth } = useDimensions();
+  const { colorMode } = useColorMode();
+
+  const actualItemHeight =
+    carouselItem.height + (carouselItem.verticalOverflow ?? 0) * 2;
+
+  return (
+    <Stack space="20px">
+      <Box
+        flexDirection="row"
+        alignItems="center"
+        justifyContent="space-between"
+      >
+        {typeof title === 'string' ? (
+          <Text color="label" weight="heavy" size="20pt">
+            {title}
+          </Text>
+        ) : (
+          <Box width="full">{title}</Box>
+        )}
+        {menu}
+      </Box>
+      {/* FlashList vertical visible overflow does not work due to a bug,
+      so we need to manually add vertical padding to the recycled component.
+      The vertical bleed here is to accommodate the vertical padding w/o affecting the layout. 
+      See https://github.com/Shopify/flash-list/issues/723*/}
+      <Bleed
+        horizontal="20px"
+        vertical={{ custom: carouselItem.verticalOverflow ?? 0 }}
+      >
+        <Box height={{ custom: actualItemHeight }}>
+          {data?.length ? (
+            <FlashList
+              data={data}
+              showsHorizontalScrollIndicator={false}
+              contentContainerStyle={{
+                paddingHorizontal: HORIZONTAL_PADDING,
+              }}
+              estimatedItemSize={carouselItem.width}
+              horizontal
+              estimatedListSize={{
+                height: actualItemHeight,
+                width: deviceWidth * 2,
+              }}
+              style={{ flex: 1 }}
+              renderItem={info => (
+                <View
+                  style={{
+                    paddingVertical: carouselItem.verticalOverflow,
+                    alignItems: 'center',
+                  }}
+                >
+                  {carouselItem.renderItem(info)}
+                </View>
+              )}
+              ItemSeparatorComponent={() => (
+                <View style={{ width: carouselItem.padding }} />
+              )}
+              keyExtractor={carouselItem.keyExtractor}
+            />
+          ) : (
+            // need this due to FlashList bug https://github.com/Shopify/flash-list/issues/757
+            <ScrollView
+              horizontal
+              showsHorizontalScrollIndicator={false}
+              contentContainerStyle={{
+                paddingHorizontal: HORIZONTAL_PADDING,
+              }}
+            >
+              <Inline space={{ custom: carouselItem.padding }}>
+                {carouselItem.placeholder}
+                {carouselItem.placeholder}
+                {carouselItem.placeholder}
+                {carouselItem.placeholder}
+                {carouselItem.placeholder}
+              </Inline>
+            </ScrollView>
+          )}
+        </Box>
+      </Bleed>
+      <Columns space="10px">
+        <Column>{button}</Column>
+        {!!refresh && (
+          <Column width="content">
+            <Box
+              as={ButtonPressAnimation}
+              // @ts-ignore
+              disabled={!canRefresh}
+              onPress={refresh}
+              justifyContent="center"
+              alignItems="center"
+              borderRadius={18}
+              style={{
+                borderWidth: isRefreshing ? 0 : 1,
+                borderColor,
+                width: 36,
+                height: 36,
+              }}
+            >
+              {isRefreshing ? (
+                <LoadingSpinner
+                  color={colorMode === 'light' ? 'black' : 'white'}
+                  size={20}
+                />
+              ) : (
+                <Text align="center" color="label" size="17pt" weight="bold">
+                  􀅈
+                </Text>
+              )}
+            </Box>
+          </Column>
+        )}
+      </Columns>
+    </Stack>
+  );
+}
diff --git a/src/components/cards/FeaturedMintCard.tsx b/src/components/cards/FeaturedMintCard.tsx
new file mode 100644
index 00000000000..02149cbca2e
--- /dev/null
+++ b/src/components/cards/FeaturedMintCard.tsx
@@ -0,0 +1,333 @@
+import styled from '@/styled-thing';
+import {
+  AccentColorProvider,
+  Box,
+  ColorModeProvider,
+  Column,
+  Columns,
+  Cover,
+  Inline,
+  Stack,
+  Text,
+  globalColors,
+  useColorMode,
+  useForegroundColor,
+} from '@/design-system';
+import React, { useEffect, useState } from 'react';
+import { ButtonPressAnimation } from '../animations';
+import { useMints } from '@/resources/mints';
+import { useAccountProfile, useDimensions } from '@/hooks';
+import { usePersistentDominantColorFromImage } from '@/hooks/usePersistentDominantColorFromImage';
+import { ImgixImage } from '../images';
+import {
+  abbreviateNumber,
+  convertRawAmountToRoundedDecimal,
+} from '@/helpers/utilities';
+import { BlurView } from '@react-native-community/blur';
+import { Linking, View } from 'react-native';
+import { IS_IOS } from '@/env';
+import { Media } from '../Media';
+import { analyticsV2 } from '@/analytics';
+import * as i18n from '@/languages';
+
+const IMAGE_SIZE = 111;
+
+const BlurWrapper = styled(View).attrs({
+  shouldRasterizeIOS: true,
+})({
+  // @ts-expect-error missing theme types
+  backgroundColor: ({ theme: { colors } }) => colors.trueBlack,
+  height: '100%',
+  left: 0,
+  overflow: 'hidden',
+  position: 'absolute',
+  width: '100%',
+});
+
+export function FeaturedMintCard() {
+  const { accountAddress } = useAccountProfile();
+  const {
+    data: { featuredMint },
+  } = useMints({
+    walletAddress: accountAddress,
+  });
+  const { width: deviceWidth } = useDimensions();
+
+  const [mediaRendered, setMediaRendered] = useState(false);
+  const { colorMode } = useColorMode();
+  const isDarkMode = colorMode === 'dark';
+
+  const imageUrl =
+    featuredMint?.imageURL ||
+    featuredMint?.recentMints?.find(m => m.imageURI)?.imageURI;
+
+  const mimeType = featuredMint?.imageURL
+    ? featuredMint?.imageMimeType
+    : featuredMint?.recentMints?.find(m => m.imageURI)?.mimeType;
+
+  const labelSecondary = useForegroundColor('labelSecondary');
+  const accentColor = usePersistentDominantColorFromImage(imageUrl);
+  const secondaryTextColor = imageUrl ? 'accent' : 'labelSecondary';
+
+  useEffect(() => setMediaRendered(false), [imageUrl]);
+
+  return featuredMint ? (
+    <ColorModeProvider value="darkTinted">
+      <AccentColorProvider color={accentColor ?? labelSecondary}>
+        <View
+          style={
+            IS_IOS
+              ? {
+                  shadowColor: globalColors.grey100,
+                  shadowOffset: { width: 0, height: 2 },
+                  shadowOpacity: 0.02,
+                  shadowRadius: 3,
+                }
+              : {}
+          }
+        >
+          <View
+            style={
+              IS_IOS
+                ? {
+                    shadowColor: globalColors.grey100,
+                    shadowOffset: { width: 0, height: 6 },
+                    shadowOpacity: isDarkMode ? 0.24 : 0.08,
+                    shadowRadius: 9,
+                  }
+                : {
+                    shadowColor: globalColors.grey100,
+                    elevation: 12,
+                    shadowOpacity: 1,
+                  }
+            }
+          >
+            <ButtonPressAnimation
+              style={{
+                borderRadius: 24,
+                overflow: 'hidden',
+                padding: 12,
+              }}
+              onPress={() => {
+                analyticsV2.track(
+                  analyticsV2.event.mintsPressedFeaturedMintCard,
+                  {
+                    contractAddress: featuredMint.contractAddress,
+                    chainId: featuredMint.chainId,
+                    totalMints: featuredMint.totalMints,
+                    mintsLastHour: featuredMint.totalMints,
+                    priceInEth: convertRawAmountToRoundedDecimal(
+                      featuredMint.mintStatus.price,
+                      18,
+                      6
+                    ),
+                  }
+                );
+                Linking.openURL(featuredMint.externalURL);
+              }}
+              scaleTo={0.96}
+            >
+              <Cover>
+                <BlurWrapper>
+                  {!!imageUrl && (
+                    <Cover>
+                      <ImgixImage
+                        resizeMode="cover"
+                        style={{
+                          borderRadius: 24,
+                          height: '100%',
+                          width: '100%',
+                        }}
+                        source={{ uri: imageUrl }}
+                        size={deviceWidth - 40}
+                        fm="png"
+                      />
+                    </Cover>
+                  )}
+                  <Cover>
+                    <BlurView
+                      blurAmount={100}
+                      blurType="light"
+                      style={{
+                        width: '100%',
+                        height: '100%',
+                      }}
+                    />
+                  </Cover>
+                  <Cover>
+                    <View
+                      style={{
+                        height: '100%',
+                        width: '100%',
+                        backgroundColor: `rgba(22, 22, 22, ${ios ? 0.5 : 1})`,
+                      }}
+                    />
+                  </Cover>
+                </BlurWrapper>
+              </Cover>
+              <Columns>
+                <Column>
+                  <Box
+                    alignItems="flex-start"
+                    justifyContent="space-between"
+                    flexGrow={1}
+                    flexBasis={0}
+                    padding="8px"
+                  >
+                    <Stack space="10px">
+                      <Inline space="6px" alignVertical="center">
+                        <Text
+                          size="11pt"
+                          align="center"
+                          weight="heavy"
+                          color={secondaryTextColor}
+                        >
+                          􀫸
+                        </Text>
+                        <Text
+                          size="13pt"
+                          weight="heavy"
+                          color={secondaryTextColor}
+                        >
+                          {i18n.t(
+                            i18n.l.mints.featured_mint_card.featured_mint
+                          )}
+                        </Text>
+                      </Inline>
+                      <Text
+                        size="20pt"
+                        weight="heavy"
+                        color="label"
+                        numberOfLines={1}
+                      >
+                        {featuredMint.name}
+                      </Text>
+                    </Stack>
+                    <Stack space={{ custom: 14 }}>
+                      <Inline space="6px" alignVertical="center">
+                        <Text
+                          size="11pt"
+                          align="center"
+                          weight="heavy"
+                          color={secondaryTextColor}
+                        >
+                          􀋥
+                        </Text>
+                        <Text size="13pt" weight="heavy" color="label">
+                          {featuredMint.totalMints === 1
+                            ? i18n.t(i18n.l.mints.featured_mint_card.one_mint)
+                            : i18n.t(i18n.l.mints.featured_mint_card.x_mints, {
+                                numMints: abbreviateNumber(
+                                  featuredMint.totalMints
+                                ),
+                              })}
+                        </Text>
+                      </Inline>
+                      <Inline space="6px" alignVertical="center">
+                        <Text
+                          size="11pt"
+                          align="center"
+                          weight="heavy"
+                          color={secondaryTextColor}
+                        >
+                          􀐫
+                        </Text>
+                        <Text size="13pt" weight="heavy" color="label">
+                          {i18n.t(i18n.l.mints.featured_mint_card.x_past_hour, {
+                            numMints: abbreviateNumber(
+                              featuredMint.mintsLastHour
+                            ),
+                          })}
+                        </Text>
+                      </Inline>
+                    </Stack>
+                  </Box>
+                </Column>
+                <Column width="content">
+                  {!mediaRendered ? (
+                    <Box
+                      background="fillSecondary"
+                      width={{ custom: IMAGE_SIZE }}
+                      height={{ custom: IMAGE_SIZE }}
+                      borderRadius={12}
+                      justifyContent="center"
+                      alignItems="center"
+                    >
+                      <Text
+                        size="20pt"
+                        weight="semibold"
+                        color="labelQuaternary"
+                        align="center"
+                      >
+                        􀣵
+                      </Text>
+                    </Box>
+                  ) : (
+                    <Box
+                      width={{ custom: IMAGE_SIZE }}
+                      height={{ custom: IMAGE_SIZE }}
+                    />
+                  )}
+                  <Cover>
+                    {!!imageUrl && (
+                      <View
+                        style={
+                          IS_IOS
+                            ? {
+                                shadowColor: globalColors.grey100,
+                                shadowOffset: { width: 0, height: 2 },
+                                shadowOpacity: 0.02,
+                                shadowRadius: 3,
+                              }
+                            : {}
+                        }
+                      >
+                        <View
+                          style={
+                            IS_IOS
+                              ? {
+                                  shadowColor:
+                                    isDarkMode || !accentColor
+                                      ? globalColors.grey100
+                                      : accentColor,
+                                  shadowOffset: { width: 0, height: 4 },
+                                  shadowOpacity: 0.16,
+                                  shadowRadius: 6,
+                                }
+                              : {
+                                  shadowColor:
+                                    isDarkMode || !accentColor
+                                      ? globalColors.grey100
+                                      : accentColor,
+                                  elevation: 8,
+                                  opacity: 1,
+                                }
+                          }
+                        >
+                          <Media
+                            onLayout={() => setMediaRendered(true)}
+                            onError={() => setMediaRendered(false)}
+                            url={imageUrl}
+                            mimeType={mimeType ?? undefined}
+                            style={{
+                              width: IMAGE_SIZE,
+                              height: IMAGE_SIZE,
+                              borderRadius: 12,
+                            }}
+                            size={IMAGE_SIZE}
+                          />
+                        </View>
+                      </View>
+                    )}
+                  </Cover>
+                </Column>
+              </Columns>
+            </ButtonPressAnimation>
+          </View>
+        </View>
+      </AccentColorProvider>
+    </ColorModeProvider>
+  ) : (
+    <></>
+  );
+}
diff --git a/src/components/cards/MintsCard/CollectionCell.tsx b/src/components/cards/MintsCard/CollectionCell.tsx
new file mode 100644
index 00000000000..c9eae64f150
--- /dev/null
+++ b/src/components/cards/MintsCard/CollectionCell.tsx
@@ -0,0 +1,205 @@
+import React, { useEffect, useState } from 'react';
+import { globalColors } from '@/design-system/color/palettes';
+import { convertRawAmountToRoundedDecimal } from '@/helpers/utilities';
+import { CoinIcon } from '@/components/coin-icon';
+import {
+  AccentColorProvider,
+  Bleed,
+  Box,
+  Cover,
+  Inline,
+  Inset,
+  Text,
+} from '@/design-system';
+import { ButtonPressAnimation } from '@/components/animations';
+import { useTheme } from '@/theme';
+import { Linking, View } from 'react-native';
+import { MintableCollection } from '@/graphql/__generated__/arc';
+import { getNetworkFromChainId } from '@/utils/ethereumUtils';
+import { getNetworkObj } from '@/networks';
+import { analyticsV2 } from '@/analytics';
+import * as i18n from '@/languages';
+import { IS_IOS } from '@/env';
+import { ImgixImage } from '@/components/images';
+
+export const NFT_IMAGE_SIZE = 111;
+
+export function Placeholder() {
+  const { colors } = useTheme();
+  return (
+    <AccentColorProvider color={colors.skeleton}>
+      <Inset vertical="10px">
+        <Box
+          background="accent"
+          width={{ custom: NFT_IMAGE_SIZE }}
+          height={{ custom: NFT_IMAGE_SIZE }}
+          borderRadius={12}
+        />
+        <Box paddingBottom="10px" paddingTop="12px">
+          <Inline space="4px" alignVertical="center">
+            <Bleed vertical="4px">
+              <Box
+                background="accent"
+                width={{ custom: 12 }}
+                height={{ custom: 12 }}
+                borderRadius={6}
+              />
+            </Bleed>
+            <Box
+              background="accent"
+              width={{ custom: 50 }}
+              height={{ custom: 8 }}
+              borderRadius={4}
+            />
+          </Inline>
+        </Box>
+        <Box
+          background="accent"
+          width={{ custom: 50 }}
+          height={{ custom: 8 }}
+          borderRadius={4}
+        />
+      </Inset>
+    </AccentColorProvider>
+  );
+}
+
+export function CollectionCell({
+  collection,
+}: {
+  collection: MintableCollection;
+}) {
+  const { isDarkMode } = useTheme();
+
+  const [mediaRendered, setMediaRendered] = useState(false);
+
+  const currency = getNetworkObj(getNetworkFromChainId(collection.chainId))
+    .nativeCurrency;
+
+  const amount = convertRawAmountToRoundedDecimal(
+    collection.mintStatus.price,
+    18,
+    6
+  );
+
+  const isFree = !amount;
+
+  const imageUrl =
+    collection.imageURL ||
+    collection?.recentMints?.find(m => m.imageURI)?.imageURI;
+
+  useEffect(() => setMediaRendered(false), [imageUrl]);
+
+  return (
+    <ButtonPressAnimation
+      onPress={() => {
+        analyticsV2.track(analyticsV2.event.mintsPressedCollectionCell, {
+          contractAddress: collection.contractAddress,
+          chainId: collection.chainId,
+          priceInEth: amount,
+        });
+        Linking.openURL(collection.externalURL);
+      }}
+      style={{ width: NFT_IMAGE_SIZE }}
+    >
+      <View
+        style={{
+          width: NFT_IMAGE_SIZE,
+          height: NFT_IMAGE_SIZE,
+        }}
+      >
+        {!mediaRendered && (
+          <Box
+            width="full"
+            height="full"
+            alignItems="center"
+            justifyContent="center"
+            borderRadius={12}
+            background="fillSecondary"
+          >
+            <Text
+              align="center"
+              color="labelQuaternary"
+              size="20pt"
+              weight="semibold"
+            >
+              􀣵
+            </Text>
+          </Box>
+        )}
+        {!!imageUrl && (
+          <Cover>
+            <View
+              style={{
+                shadowColor: globalColors.grey100,
+                shadowOffset: { width: 0, height: 2 },
+                shadowOpacity: 0.02,
+                shadowRadius: 3,
+              }}
+            >
+              <View
+                style={
+                  IS_IOS
+                    ? {
+                        shadowColor: globalColors.grey100,
+                        shadowOffset: { width: 0, height: 6 },
+                        shadowOpacity: 0.24,
+                        shadowRadius: 9,
+                      }
+                    : {
+                        shadowColor: globalColors.grey100,
+                        elevation: 12,
+                        shadowOpacity: isDarkMode ? 1 : 0.6,
+                      }
+                }
+              >
+                <ImgixImage
+                  style={{
+                    width: NFT_IMAGE_SIZE,
+                    height: NFT_IMAGE_SIZE,
+                    borderRadius: 12,
+                  }}
+                  size={NFT_IMAGE_SIZE}
+                  source={{ uri: imageUrl }}
+                  fm="png"
+                />
+              </View>
+            </View>
+          </Cover>
+        )}
+      </View>
+      <View
+        style={{
+          paddingBottom: 10,
+          paddingTop: 12,
+          flexDirection: 'row',
+          alignItems: 'center',
+        }}
+      >
+        {!isFree && (
+          <CoinIcon
+            address={currency.address}
+            size={12}
+            symbol={currency.symbol}
+            style={{ marginRight: 4, marginVertical: -4 }}
+          />
+        )}
+        <View style={{ width: NFT_IMAGE_SIZE - 16 }}>
+          <Text color="label" size="11pt" weight="bold" numberOfLines={1}>
+            {isFree
+              ? i18n.t(i18n.l.mints.mints_card.collection_cell.free)
+              : amount}
+          </Text>
+        </View>
+      </View>
+      <Text
+        color="labelTertiary"
+        size="11pt"
+        weight="semibold"
+        numberOfLines={1}
+      >
+        {collection.name}
+      </Text>
+    </ButtonPressAnimation>
+  );
+}
diff --git a/src/components/cards/MintsCard/Menu.tsx b/src/components/cards/MintsCard/Menu.tsx
new file mode 100644
index 00000000000..a8927aa603c
--- /dev/null
+++ b/src/components/cards/MintsCard/Menu.tsx
@@ -0,0 +1,69 @@
+import React from 'react';
+import ContextMenuButton from '@/components/native-context-menu/contextMenu';
+import { ButtonPressAnimation } from '@/components/animations';
+import { Inline, Inset, Text } from '@/design-system';
+import { haptics } from '@/utils';
+import {
+  MintsFilter,
+  getMintsFilterLabel,
+  useMintsFilter,
+} from '@/resources/mints';
+
+export function Menu() {
+  const { filter, setFilter } = useMintsFilter();
+
+  const menuConfig = {
+    menuTitle: '',
+    menuItems: [
+      {
+        actionKey: MintsFilter.All,
+        actionTitle: getMintsFilterLabel(MintsFilter.All),
+        menuState: filter === MintsFilter.All ? 'on' : 'off',
+      },
+      {
+        actionKey: MintsFilter.Free,
+        actionTitle: getMintsFilterLabel(MintsFilter.Free),
+        menuState: filter === MintsFilter.Free ? 'on' : 'off',
+      },
+      {
+        actionKey: MintsFilter.Paid,
+        actionTitle: getMintsFilterLabel(MintsFilter.Paid),
+        menuState: filter === MintsFilter.Paid ? 'on' : 'off',
+      },
+    ],
+  };
+
+  const onPressMenuItem = ({
+    nativeEvent: { actionKey: filter },
+  }: {
+    nativeEvent: { actionKey: MintsFilter };
+  }) => {
+    haptics.selection();
+    setFilter(filter);
+  };
+
+  return (
+    <ContextMenuButton
+      menuConfig={menuConfig}
+      onPressMenuItem={onPressMenuItem}
+    >
+      <ButtonPressAnimation>
+        <Inset top="2px">
+          <Inline alignVertical="center" space={{ custom: 5 }}>
+            <Inline alignVertical="center">
+              <Text color="label" size="17pt" weight="bold">
+                {
+                  menuConfig.menuItems.find(item => item.actionKey === filter)
+                    ?.actionTitle
+                }
+              </Text>
+              <Text color="label" size="15pt" weight="bold">
+                􀆈
+              </Text>
+            </Inline>
+          </Inline>
+        </Inset>
+      </ButtonPressAnimation>
+    </ContextMenuButton>
+  );
+}
diff --git a/src/components/cards/MintsCard/MintsCard.tsx b/src/components/cards/MintsCard/MintsCard.tsx
new file mode 100644
index 00000000000..a59273e1201
--- /dev/null
+++ b/src/components/cards/MintsCard/MintsCard.tsx
@@ -0,0 +1,105 @@
+import React, { useEffect, useState } from 'react';
+import { CarouselCard } from '../CarouselCard';
+import { CollectionCell, NFT_IMAGE_SIZE, Placeholder } from './CollectionCell';
+import { Menu } from './Menu';
+import { useNavigation } from '@/navigation';
+import Routes from '@/navigation/routesNames';
+import { mintsQueryKey, useMints } from '@/resources/mints';
+import { useAccountSettings, useDimensions } from '@/hooks';
+import { MintableCollection } from '@/graphql/__generated__/arc';
+import { queryClient } from '@/react-query';
+import {
+  ButtonPressAnimation,
+  ShimmerAnimation,
+} from '@/components/animations';
+import { Box, Text, useForegroundColor } from '@/design-system';
+import { analyticsV2 } from '@/analytics';
+import * as i18n from '@/languages';
+
+export function MintsCard() {
+  const { navigate } = useNavigation();
+  const { accountAddress } = useAccountSettings();
+  const {
+    data: { mints, featuredMint },
+  } = useMints({
+    walletAddress: accountAddress,
+  });
+  const { width: deviceWidth } = useDimensions();
+  const fillSecondary = useForegroundColor('fillSecondary');
+
+  const [canRefresh, setCanRefresh] = useState(true);
+  const [isRefreshing, setIsRefreshing] = useState(false);
+
+  useEffect(() => {
+    if (!canRefresh) {
+      setIsRefreshing(true);
+      setTimeout(() => {
+        setIsRefreshing(false);
+        setCanRefresh(true);
+      }, 30_000);
+    }
+  }, [canRefresh]);
+
+  return (
+    <CarouselCard
+      title={i18n.t(i18n.l.mints.mints_card.mints)}
+      data={mints?.filter(
+        c => c.contractAddress !== featuredMint?.contractAddress
+      )}
+      carouselItem={{
+        renderItem: ({ item }) => <CollectionCell collection={item} />,
+        keyExtractor: (item: MintableCollection) =>
+          item.contractAddress + item.chainId,
+        placeholder: <Placeholder />,
+        width: NFT_IMAGE_SIZE,
+        height: 147,
+        padding: 10,
+        verticalOverflow: 10,
+      }}
+      button={
+        <Box
+          as={ButtonPressAnimation}
+          background="fillSecondary"
+          height="36px"
+          width="full"
+          borderRadius={99}
+          justifyContent="center"
+          alignItems="center"
+          style={{
+            overflow: 'hidden',
+          }}
+          onPress={() => {
+            analyticsV2.track(analyticsV2.event.mintsPressedViewAllMintsButton);
+            navigate(Routes.MINTS_SHEET);
+          }}
+        >
+          {/* unfortunately shimmer width must be hardcoded */}
+          <ShimmerAnimation
+            color={fillSecondary}
+            width={
+              deviceWidth -
+              // 40 = 20px padding on each side
+              40 -
+              // 46 = 36px refresh button width + 10px spacing
+              46
+            }
+          />
+          <Text color="label" align="center" size="15pt" weight="bold">
+            {i18n.t(i18n.l.mints.mints_card.view_all_mints)}
+          </Text>
+        </Box>
+      }
+      menu={<Menu />}
+      refresh={() => {
+        setCanRefresh(false);
+        queryClient.invalidateQueries(
+          mintsQueryKey({
+            address: accountAddress,
+          })
+        );
+      }}
+      canRefresh={canRefresh}
+      isRefreshing={isRefreshing}
+    />
+  );
+}
diff --git a/src/config/experimental.ts b/src/config/experimental.ts
index b99b9311834..dd496578702 100644
--- a/src/config/experimental.ts
+++ b/src/config/experimental.ts
@@ -18,6 +18,7 @@ export const CROSSCHAIN_SWAPS = 'Crosschain Swaps';
 export const OP_REWARDS = '$OP Rewards';
 export const DEFI_POSITIONS = 'Defi Positions';
 export const NFT_OFFERS = 'NFT Offers';
+export const MINTS = 'Mints';
 
 /**
  * A developer setting that pushes log lines to an array in-memory so that
@@ -45,6 +46,7 @@ export const defaultConfig: Record<string, ExperimentalValue> = {
   [LOG_PUSH]: { settings: true, value: false },
   [DEFI_POSITIONS]: { settings: true, value: true },
   [NFT_OFFERS]: { settings: true, value: true },
+  [MINTS]: { settings: true, value: false },
 };
 
 const storageKey = 'config';
diff --git a/src/graphql/queries/arc.graphql b/src/graphql/queries/arc.graphql
index 4dcfd7d2dfa..62f542bc5ea 100644
--- a/src/graphql/queries/arc.graphql
+++ b/src/graphql/queries/arc.graphql
@@ -100,3 +100,60 @@ query claimPoapBySecretWord($walletAddress: String!, $secretWord: String!) {
     error
   }
 }
+
+fragment mintStatus on MintStatus {
+  isMintable
+  price
+}
+
+fragment mintedNFT on MintedNFT {
+  tokenID
+  imageURI
+  mimeType
+  title
+  value
+  mintTime
+}
+
+fragment mintableCollection on MintableCollection {
+  externalURL
+  contract
+  contractAddress
+  chainId
+  deployer
+  name
+  imageURL
+  imageMimeType
+  mintsLastHour
+  addressesLastHour
+  lastEvent
+  firstEvent
+  totalMints
+  maxSupply
+  recentMints {
+    ...mintedNFT
+  }
+  mintStatus {
+    ...mintStatus
+  }
+}
+
+fragment mintableCollectionsResult on MintableCollectionsResult {
+  collections {
+    ...mintableCollection
+  }
+}
+
+fragment mintableCollectionResult on MintableCollectionResult {
+  collection {
+    ...mintableCollection
+  }
+}
+
+query getMintableCollections($walletAddress: String!) {
+  getMintableCollections(walletAddress: $walletAddress) {
+    collections {
+      ...mintableCollection
+    }
+  }
+}
diff --git a/src/handlers/imgix.ts b/src/handlers/imgix.ts
index 4d4133bdb61..70c76e273e2 100644
--- a/src/handlers/imgix.ts
+++ b/src/handlers/imgix.ts
@@ -144,7 +144,7 @@ export const maybeSignUri = (
   skipCaching: boolean = false
 ): string | undefined => {
   // If the image has already been signed, return this quickly.
-  const signature = `${externalImageUri}-${options?.w}`;
+  const signature = `${externalImageUri}-${options?.w}-${options?.fm}`;
   if (
     typeof externalImageUri === 'string' &&
     staticSignatureLRU.has(signature as string) &&
diff --git a/src/helpers/utilities.ts b/src/helpers/utilities.ts
index c081ef15fd8..12f33bf7975 100644
--- a/src/helpers/utilities.ts
+++ b/src/helpers/utilities.ts
@@ -270,6 +270,26 @@ export const abbreviateBigNumber = (
   }
 };
 
+/**
+ * Abbreviates number like 1,200,000 to "1.2m", 1,000 to "1k", etc.
+ * Rounds to 1 decimal place, stripping trailing zeros.
+ */
+export const abbreviateNumber = (number: number): string => {
+  let prefix = number;
+  let suffix = '';
+  if (number >= 1_000_000_000) {
+    prefix = number / 1_000_000_000;
+    suffix = 'b';
+  } else if (number >= 1_000_000) {
+    prefix = number / 1_000_000;
+    suffix = 'm';
+  } else if (number >= 1000) {
+    prefix = number / 1000;
+    suffix = 'k';
+  }
+  return prefix.toFixed(1).replace(/\.0$/, '') + suffix;
+};
+
 export const handleSignificantDecimals = (
   value: BigNumberish,
   decimals: number,
diff --git a/src/languages/en_US.json b/src/languages/en_US.json
index e8e65dd9aec..281227c1001 100644
--- a/src/languages/en_US.json
+++ b/src/languages/en_US.json
@@ -1051,6 +1051,32 @@
       "web3_not_unlocked": "Please unlock your MetaMask wallet",
       "web3_unknown_network": "Unknown network, please switch to another one"
     },
+    "mints": {
+      "mints_sheet": {
+        "mints": "Mints",
+        "no_data_found": "No data found.",
+        "card": {
+          "x_ago": "%{timeElapsed} ago",
+          "one_mint_past_hour": "1 mint past hour",
+          "x_mints_past_hour": "%{numMints} mints past hour",
+          "x_mints": "%{numMints} mints",
+          "mint": "Mint",
+          "free": "FREE"
+        }
+      },
+      "mints_card": {
+        "view_all_mints": "View All Mints",
+        "mints": "Mints",
+        "collection_cell": { "free": "FREE" }
+      },
+      "featured_mint_card": {
+        "featured_mint": "Featured Mint",
+        "one_mint": "1 mint",
+        "x_mints": "%{numMints} mints",
+        "x_past_hour": "%{numMints} past hour"
+      },
+      "filter": { "all": "All", "free": "Free", "paid": "Paid" }
+    },
     "modal": {
       "approve_tx": "Approve transaction on %{walletType}",
       "back_up": {
diff --git a/src/model/config.ts b/src/model/config.ts
index 79017522e2f..0f9c8547fdb 100644
--- a/src/model/config.ts
+++ b/src/model/config.ts
@@ -67,6 +67,7 @@ export interface RainbowConfig
   goerli_tx_enabled: boolean;
 
   base_swaps_enabled: boolean;
+  mints_enabled: boolean;
 }
 
 const DEFAULT_CONFIG: RainbowConfig = {
@@ -125,6 +126,7 @@ const DEFAULT_CONFIG: RainbowConfig = {
   goerli_tx_enabled: true,
 
   base_swaps_enabled: false,
+  mints_enabled: true,
 };
 
 // Initialize with defaults in case firebase doesn't respond
@@ -177,7 +179,8 @@ const init = async () => {
         key === 'base_enabled' ||
         key === 'op_chains_enabled' ||
         key === 'goerli_enabled' ||
-        key === 'base_swaps_enabled'
+        key === 'base_swaps_enabled' ||
+        key === 'mints_enabled'
       ) {
         config[key] = entry.asBoolean();
       } else {
diff --git a/src/navigation/Routes.android.tsx b/src/navigation/Routes.android.tsx
index 75f88ef5d59..3826e4a9f6f 100644
--- a/src/navigation/Routes.android.tsx
+++ b/src/navigation/Routes.android.tsx
@@ -55,6 +55,7 @@ import {
   wcPromptPreset,
   addCashSheet,
   nftSingleOfferSheetPreset,
+  walletconnectBottomSheetPreset,
 } from './effects';
 import { InitialRouteContext } from './initialRoute';
 import { onNavigationStateChange } from './onNavigationStateChange';
@@ -80,6 +81,7 @@ import { NFTSingleOfferSheet } from '@/screens/NFTSingleOfferSheet';
 import ShowSecretView from '@/screens/SettingsSheet/components/ShowSecretView';
 import PoapSheet from '@/screens/mints/PoapSheet';
 import { PositionSheet } from '@/screens/positions/PositionSheet';
+import { MintsSheet } from '@/screens/MintsSheet/MintsSheet';
 
 const Stack = createStackNavigator();
 const OuterStack = createStackNavigator();
@@ -120,11 +122,6 @@ function MainNavigator() {
         name={Routes.POSITION_SHEET}
         options={expandedPreset}
       />
-      <Stack.Screen
-        component={TransactionConfirmationScreen}
-        name={Routes.CONFIRM_REQUEST}
-        options={exchangePreset}
-      />
 
       <Stack.Screen
         component={SpeedUpAndCancelSheet}
@@ -144,11 +141,7 @@ function MainNavigator() {
         name={Routes.RECEIVE_MODAL}
         options={androidRecievePreset}
       />
-      <Stack.Screen
-        component={WalletConnectApprovalSheet}
-        name={Routes.WALLET_CONNECT_APPROVAL_SHEET}
-        options={wcPromptPreset}
-      />
+
       <Stack.Screen
         component={WalletConnectRedirectSheet}
         name={Routes.WALLET_CONNECT_REDIRECT_SHEET}
@@ -383,6 +376,17 @@ function BSNavigator() {
         component={NFTSingleOfferSheet}
         options={nftSingleOfferSheetPreset}
       />
+      <BSStack.Screen name={Routes.MINTS_SHEET} component={MintsSheet} />
+      <BSStack.Screen
+        component={TransactionConfirmationScreen}
+        name={Routes.CONFIRM_REQUEST}
+        options={walletconnectBottomSheetPreset}
+      />
+      <Stack.Screen
+        component={WalletConnectApprovalSheet}
+        name={Routes.WALLET_CONNECT_APPROVAL_SHEET}
+        options={wcPromptPreset}
+      />
     </BSStack.Navigator>
   );
 }
diff --git a/src/navigation/Routes.ios.tsx b/src/navigation/Routes.ios.tsx
index 74ccc3d1f40..2a35fbcdfb1 100644
--- a/src/navigation/Routes.ios.tsx
+++ b/src/navigation/Routes.ios.tsx
@@ -45,6 +45,7 @@ import {
   expandedAssetSheetConfigWithLimit,
   explainSheetConfig,
   externalLinkWarningSheetConfig,
+  mintsSheetConfig,
   nativeStackDefaultConfig,
   nativeStackDefaultConfigWithoutStatusBar,
   nftOffersSheetConfig,
@@ -94,6 +95,7 @@ import PoapSheet from '@/screens/mints/PoapSheet';
 import { PositionSheet } from '@/screens/positions/PositionSheet';
 import { NFTOffersSheet } from '@/screens/NFTOffersSheet';
 import { NFTSingleOfferSheet } from '@/screens/NFTSingleOfferSheet';
+import { MintsSheet } from '@/screens/MintsSheet/MintsSheet';
 
 type StackNavigatorParams = {
   [Routes.SEND_SHEET]: unknown;
@@ -450,6 +452,11 @@ function NativeStackNavigator() {
         component={NFTSingleOfferSheet}
         {...nftSingleOfferSheetConfig}
       />
+      <NativeStack.Screen
+        name={Routes.MINTS_SHEET}
+        component={MintsSheet}
+        {...mintsSheetConfig}
+      />
     </NativeStack.Navigator>
   );
 }
diff --git a/src/navigation/config.tsx b/src/navigation/config.tsx
index 15af9a6f9ae..aff8136ca8b 100644
--- a/src/navigation/config.tsx
+++ b/src/navigation/config.tsx
@@ -190,6 +190,16 @@ export const nftSingleOfferSheetConfig = {
   }),
 };
 
+export const mintsSheetConfig = {
+  options: ({ route: { params = {} } }) => ({
+    ...buildCoolModalConfig({
+      ...params,
+      backgroundOpacity: 1,
+      scrollEnabled: true,
+    }),
+  }),
+};
+
 export const walletDiagnosticsSheetConfig = {
   options: ({ route }: { route: { params: any } }) => {
     return buildCoolModalConfig({
diff --git a/src/navigation/effects.tsx b/src/navigation/effects.tsx
index 0f9c44284cf..4e58e9ddf4d 100644
--- a/src/navigation/effects.tsx
+++ b/src/navigation/effects.tsx
@@ -458,6 +458,10 @@ export const bottomSheetPreset: StackNavigationOptions &
   gestureResponseDistance,
   transitionSpec: { close: closeSpec, open: sheetOpenSpec },
 };
+export const walletconnectBottomSheetPreset: BottomSheetNavigationOptions = {
+  backdropColor: 'black',
+  backdropOpacity: 1,
+};
 
 export const expandedPresetWithSmallGestureResponseDistance: StackNavigationOptions &
   BottomSheetNavigationOptions = {
diff --git a/src/navigation/routesNames.ts b/src/navigation/routesNames.ts
index 6b7582f38a2..b5ad44a6ecf 100644
--- a/src/navigation/routesNames.ts
+++ b/src/navigation/routesNames.ts
@@ -39,6 +39,7 @@ const Routes = {
   MAIN_NATIVE_BOTTOM_SHEET_NAVIGATOR: 'MainNativeBottomSheetNavigation',
   MAIN_NAVIGATOR: 'MainNavigator',
   MAIN_NAVIGATOR_WRAPPER: 'MainNavigatorWrapper',
+  MINTS_SHEET: 'MintsSheet',
   MODAL_SCREEN: 'ModalScreen',
   NATIVE_STACK: 'NativeStack',
   NETWORK_SWITCHER: 'NetworkSection',
diff --git a/src/resources/mints.ts b/src/resources/mints.ts
new file mode 100644
index 00000000000..2bf52f0bf16
--- /dev/null
+++ b/src/resources/mints.ts
@@ -0,0 +1,149 @@
+import { analyticsV2 } from '@/analytics';
+import { useCallback, useEffect, useMemo } from 'react';
+import { MINTS, useExperimentalFlag } from '@/config';
+import { IS_PROD, IS_TEST } from '@/env';
+import { arcClient, arcDevClient } from '@/graphql';
+import { GetMintableCollectionsQuery } from '@/graphql/__generated__/arc';
+import { createQueryKey } from '@/react-query';
+import { useQuery } from '@tanstack/react-query';
+import { atom, useRecoilState } from 'recoil';
+import { MMKV } from 'react-native-mmkv';
+import * as i18n from '@/languages';
+import config from '@/model/config';
+
+const graphqlClient = IS_PROD ? arcClient : arcDevClient;
+const mmkv = new MMKV();
+
+const MINTS_FILTER_MMKV_KEY = 'mintsFilter';
+
+export enum MintsFilter {
+  All = 'all',
+  Paid = 'paid',
+  Free = 'free',
+}
+
+const mintsFilterAtom = atom<MintsFilter>({
+  default:
+    (mmkv.getString(MINTS_FILTER_MMKV_KEY) as MintsFilter | undefined) ??
+    MintsFilter.All,
+  key: MINTS_FILTER_MMKV_KEY,
+});
+
+export function mintsQueryKey({ address }: { address: string }) {
+  return createQueryKey('mints', { address }, { persisterVersion: 1 });
+}
+
+/**
+ * Gets the label for a given `MintsFilter`.
+ */
+export function getMintsFilterLabel(filter: MintsFilter) {
+  switch (filter) {
+    case MintsFilter.All:
+      return i18n.t(i18n.l.mints.filter.all);
+    case MintsFilter.Paid:
+      return i18n.t(i18n.l.mints.filter.paid);
+    case MintsFilter.Free:
+      return i18n.t(i18n.l.mints.filter.free);
+  }
+}
+
+/**
+ * Hook that returns the current `MintsFilter` and a function to set it.
+ */
+export function useMintsFilter() {
+  const [filterState, setFilterState] = useRecoilState(mintsFilterAtom);
+
+  const setFilter = useCallback(
+    (filter: MintsFilter) => {
+      analyticsV2.track(analyticsV2.event.mintsChangedFilter, { filter });
+      setFilterState(filter);
+      mmkv.set(MINTS_FILTER_MMKV_KEY, filter);
+    },
+    [setFilterState]
+  );
+
+  return { filter: filterState, setFilter };
+}
+
+/**
+ * Hook that returns the mintable collections for a given wallet address.
+ */
+export function useMints({ walletAddress }: { walletAddress: string }) {
+  const mintsEnabled =
+    (useExperimentalFlag(MINTS) || config.mints_enabled) && !IS_TEST;
+  const { filter } = useMintsFilter();
+  const queryKey = mintsQueryKey({
+    address: walletAddress,
+  });
+
+  const query = useQuery<GetMintableCollectionsQuery>(
+    queryKey,
+    async () =>
+      await graphqlClient.getMintableCollections({
+        walletAddress,
+      }),
+    {
+      enabled: mintsEnabled && !!walletAddress,
+      staleTime: 300_000, // 5 minutes
+      cacheTime: 1_800_000, // 30 minutes
+      refetchInterval: 600_000, // 10 minutes
+    }
+  );
+
+  const featuredMint = query.data?.getMintableCollections?.collections?.find(
+    c => c.imageURL
+  );
+
+  const freeMints = useMemo(
+    () =>
+      query.data?.getMintableCollections?.collections.filter(
+        collection => collection.mintStatus.price === '0'
+      ),
+    [query.data?.getMintableCollections?.collections]
+  );
+
+  const paidMints = useMemo(
+    () =>
+      query.data?.getMintableCollections?.collections.filter(
+        collection => collection.mintStatus.price !== '0'
+      ),
+    [query.data?.getMintableCollections?.collections]
+  );
+
+  const allMints = useMemo(
+    () => query.data?.getMintableCollections?.collections,
+    [query.data?.getMintableCollections?.collections]
+  );
+
+  let filteredMints;
+  switch (filter) {
+    case MintsFilter.Free:
+      filteredMints = freeMints;
+      break;
+    case MintsFilter.Paid:
+      filteredMints = paidMints;
+      break;
+    case MintsFilter.All:
+    default:
+      filteredMints = allMints;
+      break;
+  }
+
+  useEffect(
+    () =>
+      analyticsV2.identify({
+        numberOfMints: allMints?.length ?? 0,
+        numberOfFreeMints: freeMints?.length ?? 0,
+        numberOfPaidMints: paidMints?.length ?? 0,
+      }),
+    [allMints?.length, freeMints?.length, paidMints?.length]
+  );
+
+  return {
+    ...query,
+    data: {
+      mints: filteredMints,
+      featuredMint,
+    },
+  };
+}
diff --git a/src/screens/MintsSheet/MintsSheet.tsx b/src/screens/MintsSheet/MintsSheet.tsx
new file mode 100644
index 00000000000..a88751b734a
--- /dev/null
+++ b/src/screens/MintsSheet/MintsSheet.tsx
@@ -0,0 +1,185 @@
+import React from 'react';
+import { SimpleSheet } from '@/components/sheet/SimpleSheet';
+import {
+  AccentColorProvider,
+  BackgroundProvider,
+  Box,
+  Column,
+  Columns,
+  Inset,
+  Separator,
+  Stack,
+  Text,
+  globalColors,
+  useColorMode,
+} from '@/design-system';
+import { useAccountProfile, useDimensions } from '@/hooks';
+import { mintsQueryKey, useMints } from '@/resources/mints';
+import { ButtonPressAnimation } from '@/components/animations';
+import { ImgixImage } from '@/components/images';
+import { TabBar } from './TabBar';
+import { Card } from './card/Card';
+import { FlashList } from '@shopify/flash-list';
+import { useNavigation } from '@/navigation';
+import Routes from '@/navigation/routesNames';
+import { ContactAvatar } from '@/components/contacts';
+import { queryClient } from '@/react-query';
+import ActivityIndicator from '@/components/ActivityIndicator';
+import { IS_ANDROID, IS_IOS } from '@/env';
+import Spinner from '@/components/Spinner';
+import * as i18n from '@/languages';
+
+const LoadingSpinner = IS_ANDROID ? Spinner : ActivityIndicator;
+
+export function MintsSheet() {
+  const {
+    accountAddress,
+    accountImage,
+    accountColor,
+    accountSymbol,
+  } = useAccountProfile();
+  const {
+    data: { mints },
+    isFetching,
+    dataUpdatedAt,
+  } = useMints({
+    walletAddress: accountAddress,
+  });
+  const { width: deviceWidth, height: deviceHeight } = useDimensions();
+  const { navigate } = useNavigation();
+  const { colorMode } = useColorMode();
+
+  const data = mints ?? [];
+
+  const isNoData = !data.length && !isFetching;
+
+  return (
+    <>
+      <BackgroundProvider color="surfaceSecondaryElevated">
+        {({ backgroundColor }) => (
+          <SimpleSheet backgroundColor={backgroundColor as string}>
+            <Inset top="20px" bottom={{ custom: IS_IOS ? 110 : 150 }}>
+              <Inset horizontal="20px">
+                <Stack space="10px">
+                  <Columns alignVertical="center">
+                    <Column width="content">
+                      <AccentColorProvider
+                        color={accountColor ?? globalColors.grey100}
+                      >
+                        <ButtonPressAnimation
+                          onPress={() => navigate(Routes.CHANGE_WALLET_SHEET)}
+                          disabled={IS_ANDROID}
+                        >
+                          {accountImage ? (
+                            <Box
+                              as={ImgixImage}
+                              background="surfaceSecondaryElevated"
+                              size={36}
+                              source={{ uri: accountImage }}
+                              width={{ custom: 36 }}
+                              height="36px"
+                              borderRadius={36}
+                              shadow="12px accent"
+                            />
+                          ) : (
+                            <Box
+                              as={ContactAvatar}
+                              background="surfacePrimary"
+                              shadow="12px accent"
+                              color={accountColor}
+                              size="smedium"
+                              borderRadius={36}
+                              value={accountSymbol}
+                            />
+                          )}
+                        </ButtonPressAnimation>
+                      </AccentColorProvider>
+                    </Column>
+                    <Column>
+                      <Text
+                        color="label"
+                        size="20pt"
+                        align="center"
+                        weight="heavy"
+                      >
+                        {i18n.t(i18n.l.mints.mints_sheet.mints)}
+                      </Text>
+                    </Column>
+                    <Column width="content">
+                      <Box width={{ custom: 36 }} />
+                    </Column>
+                  </Columns>
+                  <Separator thickness={1} color="separatorTertiary" />
+                </Stack>
+              </Inset>
+              {!isNoData && (
+                <FlashList
+                  data={data}
+                  estimatedItemSize={222}
+                  estimatedListSize={{
+                    height: deviceHeight,
+                    width: deviceWidth,
+                  }}
+                  renderItem={({ item }) => <Card collection={item} />}
+                  ItemSeparatorComponent={() => (
+                    <Separator thickness={1} color="separatorTertiary" />
+                  )}
+                  keyExtractor={item => item.contractAddress + item.chainId}
+                />
+              )}
+            </Inset>
+          </SimpleSheet>
+        )}
+      </BackgroundProvider>
+      {!data.length && (
+        <Box
+          alignItems="center"
+          justifyContent="center"
+          height="full"
+          position="absolute"
+          width="full"
+        >
+          {!isFetching ? (
+            <Stack space="20px">
+              <Text
+                size="17pt"
+                weight="bold"
+                align="center"
+                color="labelSecondary"
+              >
+                {i18n.t(i18n.l.mints.mints_sheet.no_data_found)}
+              </Text>
+              <ButtonPressAnimation
+                onPress={() => {
+                  // only allow refresh if data is at least 30 seconds old
+                  if (!dataUpdatedAt || Date.now() - dataUpdatedAt > 30_000) {
+                    queryClient.invalidateQueries({
+                      queryKey: mintsQueryKey({
+                        address: accountAddress,
+                      }),
+                    });
+                  }
+                }}
+              >
+                <Text
+                  align="center"
+                  color="labelSecondary"
+                  size="34pt"
+                  weight="bold"
+                >
+                  􀅈
+                </Text>
+              </ButtonPressAnimation>
+            </Stack>
+          ) : (
+            <LoadingSpinner
+              color={colorMode === 'light' ? 'black' : 'white'}
+              size={36}
+            />
+          )}
+        </Box>
+      )}
+      <TabBar />
+    </>
+  );
+}
diff --git a/src/screens/MintsSheet/TabBar.tsx b/src/screens/MintsSheet/TabBar.tsx
new file mode 100644
index 00000000000..7a818c8d7dc
--- /dev/null
+++ b/src/screens/MintsSheet/TabBar.tsx
@@ -0,0 +1,152 @@
+import { ButtonPressAnimation } from '@/components/animations';
+import {
+  AccentColorProvider,
+  Box,
+  Cover,
+  Inline,
+  globalColors,
+  Text,
+} from '@/design-system';
+import { IS_IOS } from '@/env';
+import {
+  MintsFilter,
+  getMintsFilterLabel,
+  useMintsFilter,
+} from '@/resources/mints';
+import { useTheme } from '@/theme';
+import { BlurView } from '@react-native-community/blur';
+import React from 'react';
+import { View } from 'react-native';
+import LinearGradient from 'react-native-linear-gradient';
+
+function FilterButton({ filter }: { filter: MintsFilter }) {
+  const { filter: currentFilter, setFilter } = useMintsFilter();
+  const { isDarkMode } = useTheme();
+
+  const highlightedBackgroundColor = isDarkMode
+    ? 'rgba(255, 218, 36, 0.2)'
+    : 'rgba(255, 203, 15, 0.6)';
+  const highlightedTextColor = isDarkMode
+    ? 'yellow'
+    : { custom: globalColors.yellow100 };
+
+  return (
+    <AccentColorProvider color={highlightedBackgroundColor}>
+      <View
+        style={
+          IS_IOS
+            ? {
+                shadowColor: globalColors.grey100,
+                shadowOffset: { width: 0, height: 2 },
+                shadowRadius: 3,
+                shadowOpacity: 0.02,
+              }
+            : {}
+        }
+      >
+        <View
+          style={{
+            ...(IS_IOS
+              ? {
+                  shadowOffset: { width: 0, height: 4 },
+                  shadowRadius: 6,
+                  shadowOpacity: 0.24,
+                }
+              : {
+                  elevation: 8,
+                  shadowOpacity: 1,
+                }),
+            shadowColor: isDarkMode
+              ? globalColors.grey100
+              : highlightedBackgroundColor,
+          }}
+        >
+          <Box
+            as={ButtonPressAnimation}
+            height="full"
+            width={{ custom: 64 }}
+            borderRadius={17}
+            alignItems="center"
+            justifyContent="center"
+            background={currentFilter === filter ? 'accent' : undefined}
+            onPress={() => {
+              setFilter(filter);
+            }}
+          >
+            <Text
+              size="17pt"
+              weight="heavy"
+              align="center"
+              color={
+                currentFilter === filter
+                  ? highlightedTextColor
+                  : 'labelSecondary'
+              }
+            >
+              {getMintsFilterLabel(filter)}
+            </Text>
+          </Box>
+        </View>
+      </View>
+    </AccentColorProvider>
+  );
+}
+
+export function TabBar() {
+  const { isDarkMode } = useTheme();
+  return (
+    <Box
+      style={{
+        shadowColor: globalColors.grey100,
+        shadowOffset: { width: 0, height: 15 },
+        shadowRadius: 22.5,
+        shadowOpacity: IS_IOS ? (isDarkMode ? 0.8 : 0.3) : 1,
+        elevation: 24,
+        alignSelf: 'center',
+      }}
+      position="absolute"
+      bottom={{ custom: 43.5 }}
+      height="46px"
+      borderRadius={23}
+    >
+      <Cover>
+        <Box
+          style={{
+            borderRadius: 23,
+            flex: 1,
+            overflow: 'hidden',
+          }}
+        >
+          <BlurView
+            blurAmount={15}
+            blurType={isDarkMode ? 'chromeMaterialDark' : 'light'}
+            style={{ height: '100%', width: '100%', borderRadius: 23 }}
+          />
+        </Box>
+      </Cover>
+      {/* @ts-ignore */}
+      <Box
+        as={isDarkMode ? Box : LinearGradient}
+        style={{
+          height: '100%',
+          width: '100%',
+          padding: 6,
+          borderRadius: 23,
+        }}
+        colors={
+          isDarkMode
+            ? ['rgba(45, 46, 51, 0.70)', 'rgba(45, 46, 51, 0.90)']
+            : ['rgba(250, 250, 250, 0.63)', 'rgba(240, 240, 240, 0.72)']
+        }
+        start={{ x: 0, y: 0 }}
+        end={{ x: 0, y: 1 }}
+      >
+        <Inline space="10px">
+          <FilterButton filter={MintsFilter.All} />
+          <FilterButton filter={MintsFilter.Free} />
+          <FilterButton filter={MintsFilter.Paid} />
+        </Inline>
+      </Box>
+    </Box>
+  );
+}
diff --git a/src/screens/MintsSheet/card/Card.tsx b/src/screens/MintsSheet/card/Card.tsx
new file mode 100644
index 00000000000..319f57f95ff
--- /dev/null
+++ b/src/screens/MintsSheet/card/Card.tsx
@@ -0,0 +1,176 @@
+import { MintableCollection, MintedNft } from '@/graphql/__generated__/arc';
+import React, { useEffect, useState } from 'react';
+import { getTimeElapsedFromDate } from '../utils';
+import {
+  Bleed,
+  Box,
+  Cover,
+  Inline,
+  Inset,
+  Stack,
+  Text,
+  useForegroundColor,
+} from '@/design-system';
+import {
+  abbreviateNumber,
+  convertRawAmountToRoundedDecimal,
+} from '@/helpers/utilities';
+import { getNetworkObj } from '@/networks';
+import { getNetworkFromChainId } from '@/utils/ethereumUtils';
+import { ButtonPressAnimation } from '@/components/animations';
+import { Placeholder, RecentMintCell } from './RecentMintCell';
+import { Linking, View } from 'react-native';
+import { useTheme } from '@/theme';
+import { analyticsV2 } from '@/analytics';
+import * as i18n from '@/languages';
+import ChainBadge from '@/components/coin-icon/ChainBadge';
+import { CoinIcon } from '@/components/coin-icon';
+import { Network } from '@/helpers';
+
+export const NUM_NFTS = 3;
+
+export function Card({ collection }: { collection: MintableCollection }) {
+  const { isDarkMode } = useTheme();
+
+  const [timeElapsed, setTimeElapsed] = useState(
+    collection.firstEvent
+      ? getTimeElapsedFromDate(new Date(collection.firstEvent))
+      : undefined
+  );
+
+  const separator = useForegroundColor('separator');
+  const separatorTertiary = useForegroundColor('separatorTertiary');
+
+  const price = convertRawAmountToRoundedDecimal(
+    collection.mintStatus.price,
+    18,
+    6
+  );
+  const currencySymbol = getNetworkObj(
+    getNetworkFromChainId(collection.chainId)
+  ).nativeCurrency.symbol;
+  const isFree = !price;
+
+  const network = getNetworkFromChainId(collection.chainId);
+
+  // update elapsed time every minute if it's less than an hour
+  useEffect(() => {
+    if (timeElapsed && timeElapsed[timeElapsed.length - 1] === 'm') {
+      const interval = setInterval(() => {
+        setTimeElapsed(getTimeElapsedFromDate(new Date(collection.firstEvent)));
+      }, 60_000);
+      return () => clearInterval(interval);
+    }
+  });
+
+  return (
+    <View style={{ paddingHorizontal: 20, marginVertical: 20 }}>
+      <Stack space="20px">
+        <Stack space="12px">
+          <Box>
+            <Inset right={{ custom: 28 }}>
+              <Text size="20pt" weight="heavy" color="label" numberOfLines={2}>
+                {collection.name}
+              </Text>
+            </Inset>
+            <Cover alignVertical="top" alignHorizontal="right">
+              <Bleed vertical="3px">
+                {network !== Network.mainnet ? (
+                  <ChainBadge
+                    assetType={network}
+                    position="relative"
+                    size="medium"
+                  />
+                ) : (
+                  <CoinIcon size={20} />
+                )}
+              </Bleed>
+            </Cover>
+          </Box>
+          <Inline space="3px" alignVertical="center">
+            <Text size="11pt" weight="semibold" color="labelQuaternary">
+              􀐫
+            </Text>
+            <Inline alignVertical="center">
+              <Text size="13pt" weight="semibold" color="labelTertiary">
+                {timeElapsed
+                  ? `${i18n.t(i18n.l.mints.mints_sheet.card.x_ago, {
+                      timeElapsed,
+                    })} · `
+                  : ''}
+                {collection.totalMints
+                  ? `${i18n.t(i18n.l.mints.mints_sheet.card.x_mints, {
+                      numMints: abbreviateNumber(collection.totalMints),
+                    })} · `
+                  : ''}
+                {collection.mintsLastHour === 1
+                  ? i18n.t(i18n.l.mints.mints_sheet.card.one_mint_past_hour)
+                  : i18n.t(i18n.l.mints.mints_sheet.card.x_mints_past_hour, {
+                      numMints: collection.mintsLastHour,
+                    })}
+              </Text>
+            </Inline>
+          </Inline>
+        </Stack>
+        <Inline space="10px">
+          {collection.recentMints.slice(0, 3).map((mint: MintedNft) => (
+            <RecentMintCell key={mint.tokenID} recentMint={mint} />
+          ))}
+          {Array.from({
+            length: Math.max(NUM_NFTS - collection.recentMints.length, 0),
+          }).map((_, index) => (
+            <Placeholder key={index} />
+          ))}
+        </Inline>
+        <ButtonPressAnimation
+          onPress={() => {
+            analyticsV2.track(analyticsV2.event.mintsPressedMintButton, {
+              contractAddress: collection.contractAddress,
+              chainId: collection.chainId,
+              priceInEth: price,
+            });
+            Linking.openURL(collection.externalURL);
+          }}
+          style={{
+            borderRadius: 99,
+            borderWidth: 1,
+            borderColor: isDarkMode ? separator : 'rgba(9, 17, 31, 0.1)',
+            paddingVertical: 8,
+            justifyContent: 'center',
+            alignItems: 'center',
+          }}
+        >
+          <Inline space="6px" alignVertical="center">
+            <Inline>
+              <Text size="15pt" weight="heavy" color="yellow">
+                􀫸
+              </Text>
+              <Text size="15pt" weight="heavy" color="label">
+                {` ${i18n.t(i18n.l.mints.mints_sheet.card.mint)}`}
+              </Text>
+            </Inline>
+            <Box
+              borderRadius={7}
+              padding={{ custom: 5.5 }}
+              alignItems="center"
+              justifyContent="center"
+              background="fillSecondary"
+              style={{ borderWidth: 1, borderColor: separatorTertiary }}
+            >
+              <Text
+                color="labelTertiary"
+                size="13pt"
+                weight="bold"
+                align="center"
+              >
+                {isFree
+                  ? i18n.t(i18n.l.mints.mints_sheet.card.free)
+                  : `${price} ${currencySymbol}`}
+              </Text>
+            </Box>
+          </Inline>
+        </ButtonPressAnimation>
+      </Stack>
+    </View>
+  );
+}
diff --git a/src/screens/MintsSheet/card/RecentMintCell.tsx b/src/screens/MintsSheet/card/RecentMintCell.tsx
new file mode 100644
index 00000000000..9f4f04e1500
--- /dev/null
+++ b/src/screens/MintsSheet/card/RecentMintCell.tsx
@@ -0,0 +1,95 @@
+import React, { useEffect, useState } from 'react';
+import { globalColors } from '@/design-system/color/palettes';
+import { Box, Cover, Text } from '@/design-system';
+import { useTheme } from '@/theme';
+import { View } from 'react-native';
+import { MintedNft } from '@/graphql/__generated__/arc';
+import { IS_IOS } from '@/env';
+import { deviceUtils } from '@/utils';
+import { NUM_NFTS } from './Card';
+import { ImgixImage } from '@/components/images';
+
+const NFT_IMAGE_SIZE =
+  (deviceUtils.dimensions.width - 40 - (NUM_NFTS - 1) * 10) / NUM_NFTS;
+
+export const Placeholder = () => {
+  return (
+    <Box
+      style={{
+        width: NFT_IMAGE_SIZE,
+        height: NFT_IMAGE_SIZE,
+      }}
+      alignItems="center"
+      justifyContent="center"
+      borderRadius={16}
+      background="fillSecondary"
+    >
+      <Text
+        align="center"
+        color="labelQuaternary"
+        size="20pt"
+        weight="semibold"
+      >
+        􀣵
+      </Text>
+    </Box>
+  );
+};
+
+export function RecentMintCell({ recentMint }: { recentMint: MintedNft }) {
+  const { isDarkMode } = useTheme();
+
+  const [mediaRendered, setMediaRendered] = useState(false);
+
+  useEffect(() => setMediaRendered(false), [recentMint.imageURI]);
+
+  return (
+    <Box style={{ width: NFT_IMAGE_SIZE, height: NFT_IMAGE_SIZE }}>
+      {!mediaRendered && <Placeholder />}
+      {!!recentMint?.imageURI && (
+        <Cover>
+          <View
+            style={
+              IS_IOS
+                ? {
+                    shadowColor: globalColors.grey100,
+                    shadowOffset: { width: 0, height: 2 },
+                    shadowOpacity: 0.02,
+                    shadowRadius: 3,
+                  }
+                : {}
+            }
+          >
+            <View
+              style={
+                IS_IOS
+                  ? {
+                      shadowColor: globalColors.grey100,
+                      shadowOffset: { width: 0, height: 6 },
+                      shadowOpacity: isDarkMode ? 0.24 : 0.08,
+                      shadowRadius: 9,
+                    }
+                  : {
+                      shadowColor: globalColors.grey100,
+                      elevation: 12,
+                      shadowOpacity: isDarkMode ? 1 : 0.6,
+                    }
+              }
+            >
+              <ImgixImage
+                style={{
+                  width: NFT_IMAGE_SIZE,
+                  height: NFT_IMAGE_SIZE,
+                  borderRadius: 16,
+                }}
+                size={NFT_IMAGE_SIZE}
+                source={{ uri: recentMint.imageURI }}
+                fm="png"
+              />
+            </View>
+          </View>
+        </Cover>
+      )}
+    </Box>
+  );
+}
diff --git a/src/screens/MintsSheet/utils.ts b/src/screens/MintsSheet/utils.ts
new file mode 100644
index 00000000000..e2a71d9779f
--- /dev/null
+++ b/src/screens/MintsSheet/utils.ts
@@ -0,0 +1,22 @@
+export function getTimeElapsedFromDate(date: Date) {
+  const msElapsed = new Date().getTime() - date.getTime();
+  const minutesElapsed = msElapsed / 1000 / 60;
+  const hoursElapsed = minutesElapsed / 60;
+  const daysElapsed = hoursElapsed / 24;
+  const monthsElapsed = daysElapsed / 30;
+  const yearsElapsed = monthsElapsed / 12;
+
+  if (yearsElapsed >= 1) {
+    return `>1y`;
+  } else if (monthsElapsed >= 1) {
+    return `${Math.ceil(monthsElapsed)}mo`;
+  } else if (daysElapsed >= 1) {
+    return `${Math.ceil(daysElapsed)}d`;
+  } else if (hoursElapsed >= 1) {
+    return `${Math.ceil(hoursElapsed)}h`;
+  } else if (minutesElapsed >= 1) {
+    return `${Math.ceil(minutesElapsed)}m`;
+  } else {
+    return '<1m';
+  }
+}
diff --git a/src/screens/discover/components/DiscoverHome.js b/src/screens/discover/components/DiscoverHome.js
index 1bcaafbf293..7886d2566f7 100644
--- a/src/screens/discover/components/DiscoverHome.js
+++ b/src/screens/discover/components/DiscoverHome.js
@@ -3,9 +3,9 @@ import useExperimentalFlag, {
   OP_REWARDS,
   PROFILES,
   HARDWARE_WALLETS,
+  MINTS,
   NFT_OFFERS,
 } from '@rainbow-me/config/experimentalHooks';
-import { IS_TESTING } from 'react-native-dotenv';
 import Lists from './ListsSection';
 import { isTestnetNetwork } from '@/handlers/web3';
 import { Inline, Inset, Stack } from '@/design-system';
@@ -25,13 +25,19 @@ import { LedgerCard } from '@/components/cards/LedgerCard';
 import config from '@/model/config';
 import walletTypes from '@/helpers/walletTypes';
 import { NFTOffersCard } from '@/components/cards/NFTOffersCard';
+import { MintsCard } from '@/components/cards/MintsCard/MintsCard';
+import { FeaturedMintCard } from '@/components/cards/FeaturedMintCard';
+import { useMints } from '@/resources/mints';
+import { IS_TEST } from '@/env';
 
 export default function DiscoverHome() {
-  const { network } = useAccountSettings();
+  const { accountAddress, network } = useAccountSettings();
   const profilesEnabledLocalFlag = useExperimentalFlag(PROFILES);
   const profilesEnabledRemoteFlag = config.profiles_enabled;
   const hardwareWalletsEnabled = useExperimentalFlag(HARDWARE_WALLETS);
   const nftOffersEnabled = useExperimentalFlag(NFT_OFFERS);
+  const mintsEnabled =
+    (useExperimentalFlag(MINTS) || config.mints_enabled) && !IS_TEST;
   const opRewardsLocalFlag = useExperimentalFlag(OP_REWARDS);
   const opRewardsRemoteFlag = config.op_rewards_enabled;
   const testNetwork = isTestnetNetwork(network);
@@ -39,6 +45,10 @@ export default function DiscoverHome() {
     profilesEnabledLocalFlag && profilesEnabledRemoteFlag;
 
   const { wallets } = useWallets();
+  const {
+    data: { mints, featuredMint },
+    isFetching,
+  } = useMints({ walletAddress: accountAddress });
 
   const hasHardwareWallets =
     Object.keys(wallets || {}).filter(
@@ -55,8 +65,16 @@ export default function DiscoverHome() {
                 <GasCard />
                 {isProfilesEnabled && <ENSSearchCard />}
               </Inline>
+              {mintsEnabled && (mints?.length || isFetching) && (
+                <Stack space="20px">
+                  {!!featuredMint && <FeaturedMintCard />}
+                  <Inset top="12px">
+                    <MintsCard />
+                  </Inset>
+                </Stack>
+              )}
               {/* FIXME: IS_TESTING disables nftOffers this makes some DETOX tests hang forever at exit - investigate */}
-              {IS_TESTING !== 'true' && nftOffersEnabled && <NFTOffersCard />}
+              {!IS_TEST && nftOffersEnabled && <NFTOffersCard />}
               {/* We have both flags here to be able to override the remote flag and show the card anyway in Dev*/}
               {(opRewardsRemoteFlag || opRewardsLocalFlag) && <OpRewardsCard />}
               {hardwareWalletsEnabled && !hasHardwareWallets && <LedgerCard />}
diff --git a/src/screens/discover/components/ListsSection.js b/src/screens/discover/components/ListsSection.js
index 31d5c2cecb6..8b93808de2d 100644
--- a/src/screens/discover/components/ListsSection.js
+++ b/src/screens/discover/components/ListsSection.js
@@ -26,6 +26,7 @@ import Routes from '@/navigation/routesNames';
 import styled from '@/styled-thing';
 import { ethereumUtils } from '@/utils';
 import { DefaultTokenLists } from '@/references';
+import { Inset } from '@/design-system';
 
 const ListButton = styled(ButtonPressAnimation).attrs({
   scaleTo: 0.96,
@@ -241,71 +242,73 @@ export default function ListSection() {
   );
 
   return (
-    <Column
-      style={
-        android && {
-          marginTop: -19,
+    <Inset vertical="10px">
+      <Column
+        style={
+          android && {
+            marginTop: -19,
+          }
         }
-      }
-      testID="lists-section"
-    >
-      <Flex paddingHorizontal={19}>
-        <Text size="larger" weight="heavy">
-          {lang.t('discover.lists.lists_title')}
-        </Text>
-      </Flex>
+        testID="lists-section"
+      >
+        <Flex paddingHorizontal={19}>
+          <Text size="larger" weight="heavy">
+            {lang.t('discover.lists.lists_title')}
+          </Text>
+        </Flex>
 
-      <Fragment>
-        <Column>
-          <FlatList
-            contentContainerStyle={{
-              paddingBottom: 6,
-              paddingHorizontal: 19,
-              paddingTop: 10,
-            }}
-            data={listData}
-            getItemLayout={getItemLayout}
-            horizontal
-            keyExtractor={item => item?.id}
-            ref={listRef}
-            renderItem={renderItem}
-            scrollsToTop={false}
-            showsHorizontalScrollIndicator={false}
-            testID={`lists-section-${selectedList}`}
-          />
-          {IS_TESTING !== 'true' && <EdgeFade />}
-        </Column>
-        <Column>
-          {!ready && IS_TESTING !== 'true' ? (
-            times(2, index => (
-              <AssetListItemSkeleton
-                animated
-                descendingOpacity
-                key={`skeleton-pools-${index}`}
-              />
-            ))
-          ) : listItems?.length ? (
-            listItems.map(item => (
-              <ListCoinRow
-                item={item}
-                key={`${selectedList}-list-item-${item.address}`}
-                onPress={() => handlePress(item)}
-                showBalance={false}
-              />
-            ))
-          ) : (
-            <Centered marginVertical={42}>
-              <Text
-                color={colors.alpha(colors.blueGreyDark, 0.3)}
-                size="large"
-                weight="semibold"
-              >
-                {lang.t('discover.lists.this_list_is_empty')}
-              </Text>
-            </Centered>
-          )}
-        </Column>
-      </Fragment>
-    </Column>
+        <Fragment>
+          <Column>
+            <FlatList
+              contentContainerStyle={{
+                paddingBottom: 6,
+                paddingHorizontal: 19,
+                paddingTop: 10,
+              }}
+              data={listData}
+              getItemLayout={getItemLayout}
+              horizontal
+              keyExtractor={item => item?.id}
+              ref={listRef}
+              renderItem={renderItem}
+              scrollsToTop={false}
+              showsHorizontalScrollIndicator={false}
+              testID={`lists-section-${selectedList}`}
+            />
+            {IS_TESTING !== 'true' && <EdgeFade />}
+          </Column>
+          <Column>
+            {!ready && IS_TESTING !== 'true' ? (
+              times(2, index => (
+                <AssetListItemSkeleton
+                  animated
+                  descendingOpacity
+                  key={`skeleton-pools-${index}`}
+                />
+              ))
+            ) : listItems?.length ? (
+              listItems.map(item => (
+                <ListCoinRow
+                  item={item}
+                  key={`${selectedList}-list-item-${item.address}`}
+                  onPress={() => handlePress(item)}
+                  showBalance={false}
+                />
+              ))
+            ) : (
+              <Centered marginVertical={42}>
+                <Text
+                  color={colors.alpha(colors.blueGreyDark, 0.3)}
+                  size="large"
+                  weight="semibold"
+                >
+                  {lang.t('discover.lists.this_list_is_empty')}
+                </Text>
+              </Centered>
+            )}
+          </Column>
+        </Fragment>
+      </Column>
+    </Inset>
   );
 }