nfts: mints (#5019)

* init * inti * new api + routing * nftOffers -> reservior * pending tx padding * i18n * analytics WIP * api updates + clean up * prettier & revert gascard * revert dev only endpoint * graphql * rm french strings * android route * analytics * connect the dots * bump reservior sdk * add fallback color to gas components * quantityButton: handle disabled state * gas: add util to get total gas price * tweak nft image size for tx cell * mint sheet updates * i18n * query update * use dev endpoints for testing * add back tx ref * tweak quantity button disabled color * fix disabled state color * add max label * fix price calculation * max mint fallback + native display * add refferal addresses * rm log * error handling * useCallbacks * clean up search logic * i18n + analytics clean up * debug logging * format + lint * priceInEth * fix disabled state * add error event * revert to prod * callback * oops
rainbow-me · Oct 13, 2023 · e53aed1 · e53aed1
1 parent 922ab6b
commit e53aed1
Show file tree

Hide file tree

Showing 34 changed files with 1,498 additions and 112 deletions.
diff --git a/package.json b/package.json
@@ -115,7 +115,7 @@
     "@react-navigation/material-top-tabs": "6.6.2",
     "@react-navigation/native": "6.1.6",
     "@react-navigation/stack": "6.3.16",
-    "@reservoir0x/reservoir-sdk": "1.2.1",
+    "@reservoir0x/reservoir-sdk": "1.4.5",
     "@segment/analytics-react-native": "2.15.0",
     "@segment/sovran-react-native": "1.0.4",
     "@sentry/react-native": "3.4.1",

diff --git a/src/App.js b/src/App.js
@@ -85,7 +85,7 @@ import { migrate } from '@/migrations';
 import { initListeners as initWalletConnectListeners } from '@/walletConnect';
 import { saveFCMToken } from '@/notifications/tokens';
 import branch from 'react-native-branch';
-import { initializeReservoirClient } from '@/resources/nftOffers/utils';
+import { initializeReservoirClient } from '@/resources/reservoir/client';
 
 if (__DEV__) {
   reactNativeDisableYellowBox && LogBox.ignoreAllLogs();

diff --git a/src/analytics/event.ts b/src/analytics/event.ts
@@ -1,6 +1,7 @@
 import { CardType } from '@/components/cards/GenericCard';
 import { LearnCategory } from '@/components/cards/utils/types';
 import { FiatProviderName } from '@/entities/f2c';
+import { Network } from '@/networks/types';
 
 /**
  * All events, used by `analytics.track()`
@@ -81,6 +82,7 @@ export const event = {
   poapsOpenedMintSheet: 'Opened POAP mint sheet',
   poapsMintedPoap: 'Minted POAP',
   poapsViewedOnPoap: 'Viewed POAP on poap.gallery',
+
   positionsOpenedSheet: 'Opened position Sheet',
   positionsOpenedExternalDapp: 'Viewed external dapp',
 
@@ -89,6 +91,12 @@ export const event = {
   mintsPressedMintButton: 'Pressed mint button in mints sheet',
   mintsPressedViewAllMintsButton: 'Pressed view all mints button in mints card',
   mintsChangedFilter: 'Changed mints filter',
+
+  mintsOpenedSheet: 'Opened NFT Mint Sheet',
+  mintsOpeningMintDotFun: 'Opening Mintdotfun',
+  mintsMintingNFT: 'Minting NFT',
+  mintsMintedNFT: 'Minted NFT',
+  mintsErrorMintingNFT: 'Error Minting NFT',
 } as const;
 
 /**
@@ -292,6 +300,37 @@ export type EventProperties = {
     rainbowFee: number;
     offerCurrency: { symbol: string; contractAddress: string };
   };
+  [event.mintsMintingNFT]: {
+    contract: string;
+    chainId: number;
+    quantity: number;
+    collectionName: string;
+    priceInEth: string;
+  };
+  [event.mintsMintedNFT]: {
+    contract: string;
+    chainId: number;
+    quantity: number;
+    collectionName: string;
+    priceInEth: string;
+  };
+  [event.mintsErrorMintingNFT]: {
+    contract: string;
+    chainId: number;
+    quantity: number;
+    collectionName: string;
+    priceInEth: string;
+  };
+  [event.mintsOpenedSheet]: {
+    contract: string;
+    chainId: number;
+    collectionName: string;
+  };
+  [event.mintsOpeningMintDotFun]: {
+    contract: string;
+    chainId: number;
+    collectionName: string;
+  };
   [event.poapsMintedPoap]: {
     eventId: number;
     type: 'qrHash' | 'secretWord';

diff --git a/src/components/cards/FeaturedMintCard.tsx b/src/components/cards/FeaturedMintCard.tsx
@@ -13,7 +13,7 @@ import {
   useColorMode,
   useForegroundColor,
 } from '@/design-system';
-import React, { useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import { ButtonPressAnimation } from '../animations';
 import { useMints } from '@/resources/mints';
 import { useAccountProfile, useDimensions } from '@/hooks';
@@ -24,11 +24,13 @@ import {
   convertRawAmountToRoundedDecimal,
 } from '@/helpers/utilities';
 import { BlurView } from '@react-native-community/blur';
-import { Linking, View } from 'react-native';
+import { View } from 'react-native';
 import { IS_IOS } from '@/env';
 import { Media } from '../Media';
 import { analyticsV2 } from '@/analytics';
 import * as i18n from '@/languages';
+import { navigateToMintCollection } from '@/resources/reservoir/mints';
+import { ethereumUtils } from '@/utils';
 
 const IMAGE_SIZE = 111;
 
@@ -71,6 +73,24 @@ export function FeaturedMintCard() {
 
   useEffect(() => setMediaRendered(false), [imageUrl]);
 
+  const handlePress = useCallback(() => {
+    if (featuredMint) {
+      analyticsV2.track(analyticsV2.event.mintsPressedFeaturedMintCard, {
+        contractAddress: featuredMint.contractAddress,
+        chainId: featuredMint.chainId,
+        totalMints: featuredMint.totalMints,
+        mintsLastHour: featuredMint.totalMints,
+        priceInEth: convertRawAmountToRoundedDecimal(
+          featuredMint.mintStatus.price,
+          18,
+          6
+        ),
+      });
+      const network = ethereumUtils.getNetworkFromChainId(featuredMint.chainId);
+      navigateToMintCollection(featuredMint.contract, network);
+    }
+  }, [featuredMint]);
+
   return featuredMint ? (
     <ColorModeProvider value="darkTinted">
       <AccentColorProvider color={accentColor ?? labelSecondary}>
@@ -108,23 +128,7 @@ export function FeaturedMintCard() {
                 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);
-              }}
+              onPress={handlePress}
               scaleTo={0.96}
             >
               <Cover>

diff --git a/src/components/cards/MintsCard/CollectionCell.tsx b/src/components/cards/MintsCard/CollectionCell.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import { globalColors } from '@/design-system/color/palettes';
 import { convertRawAmountToRoundedDecimal } from '@/helpers/utilities';
 import { CoinIcon } from '@/components/coin-icon';
@@ -15,12 +15,13 @@ 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 ethereumUtils, { 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';
+import { navigateToMintCollection } from '@/resources/reservoir/mints';
 
 export const NFT_IMAGE_SIZE = 111;
 
@@ -90,16 +91,25 @@ export function CollectionCell({
 
   useEffect(() => setMediaRendered(false), [imageUrl]);
 
+  const handlePress = useCallback(() => {
+    analyticsV2.track(analyticsV2.event.mintsPressedCollectionCell, {
+      contractAddress: collection.contractAddress,
+      chainId: collection.chainId,
+      priceInEth: amount,
+    });
+
+    const network = ethereumUtils.getNetworkFromChainId(collection.chainId);
+    navigateToMintCollection(collection.contract, network);
+  }, [
+    amount,
+    collection.chainId,
+    collection.contract,
+    collection.contractAddress,
+  ]);
+
   return (
     <ButtonPressAnimation
-      onPress={() => {
-        analyticsV2.track(analyticsV2.event.mintsPressedCollectionCell, {
-          contractAddress: collection.contractAddress,
-          chainId: collection.chainId,
-          priceInEth: amount,
-        });
-        Linking.openURL(collection.externalURL);
-      }}
+      onPress={handlePress}
       style={{ width: NFT_IMAGE_SIZE }}
     >
       <View

diff --git a/src/components/cards/NFTOffersCard/index.tsx b/src/components/cards/NFTOffersCard/index.tsx
@@ -19,7 +19,10 @@ import {
   ShimmerAnimation,
 } from '@/components/animations';
 import { useAccountSettings, useDimensions } from '@/hooks';
-import { nftOffersQueryKey, useNFTOffers } from '@/resources/nftOffers';
+import {
+  nftOffersQueryKey,
+  useNFTOffers,
+} from '@/resources/reservoir/nftOffersQuery';
 import { convertAmountToNativeDisplay } from '@/helpers/utilities';
 import * as i18n from '@/languages';
 import Animated, {

diff --git a/src/components/coin-row/FastTransactionCoinRow.tsx b/src/components/coin-row/FastTransactionCoinRow.tsx
@@ -10,6 +10,9 @@ import { useNavigation } from '@/navigation';
 import Routes from '@rainbow-me/routes';
 import { ImgixImage } from '../images';
 import { CardSize } from '../unique-token/CardSize';
+import { ChainBadge } from '../coin-icon';
+import { Network } from '@/networks/types';
+import { ethereumUtils } from '@/utils';
 
 const BottomRow = React.memo(function BottomRow({
   description,
@@ -139,6 +142,14 @@ export default React.memo(function TransactionCoinRow({
                   }}
                 />
               </View>
+              {item.network !== Network.mainnet && (
+                <ChainBadge
+                  assetType={ethereumUtils.getAssetTypeFromNetwork(
+                    item.network
+                  )}
+                  badgeYPosition={10}
+                />
+              )}
             </View>
           ) : (
             <FastCoinIcon

diff --git a/src/components/coin-row/FastTransactionStatusBadge.tsx b/src/components/coin-row/FastTransactionStatusBadge.tsx
@@ -135,6 +135,19 @@ const StatusProps = {
       marginTop: ios ? -3 : -5,
     },
   },
+  [TransactionStatusTypes.minted]: {
+    name: 'sunflower',
+    style: {
+      fontSize: 11,
+      left: -1.3,
+      marginRight: 1,
+      marginTop: ios ? -3 : -5,
+    },
+  },
+  [TransactionStatusTypes.minting]: {
+    marginRight: 4,
+    marginTop: ios ? 1 : 0,
+  },
 };
 
 const sx = StyleSheet.create({

diff --git a/src/components/contacts/ContactAvatar.js b/src/components/contacts/ContactAvatar.js
@@ -118,12 +118,10 @@ const ContactAvatar = ({ color, size = 'medium', value, ...props }) => {
   ]);
   const { isDarkMode } = useTheme();
 
-  const shadows = useMemo(() => buildShadows(color, size, isDarkMode, colors), [
-    color,
-    size,
-    isDarkMode,
-    colors,
-  ]);
+  const shadows = useMemo(
+    () => buildShadows(color, size, props?.forceDarkMode || isDarkMode, colors),
+    [color, size, props?.forceDarkMode, isDarkMode, colors]
+  );
 
   const backgroundColor =
     typeof color === 'number'

diff --git a/src/components/expanded-state/CustomGasState.js b/src/components/expanded-state/CustomGasState.js
@@ -41,12 +41,17 @@ const FeesPanelTabswrapper = styled(Column)(margin.object(19, 0, 24, 0));
 export default function CustomGasState({ asset }) {
   const { setParams } = useNavigation();
   const {
-    params: { longFormHeight, speeds, openCustomOptions } = {},
+    params: { longFormHeight, speeds, openCustomOptions, fallbackColor } = {},
   } = useRoute();
   const { colors } = useTheme();
   const { height: deviceHeight } = useDimensions();
   const keyboardHeight = useKeyboardHeight();
-  const colorForAsset = useColorForAsset(asset || {}, null, false, true);
+  const colorForAsset = useColorForAsset(
+    asset || {},
+    fallbackColor,
+    false,
+    true
+  );
   const { selectedGasFee, currentBlockParams, txNetwork } = useGas();
   const [canGoBack, setCanGoBack] = useState(true);
   const { tradeDetails } = useSelector(state => state.swap);

diff --git a/src/components/gas/GasSpeedButton.js b/src/components/gas/GasSpeedButton.js
@@ -137,6 +137,7 @@ const GasSpeedButton = ({
   asset,
   currentNetwork,
   horizontalPadding = 19,
+  fallbackColor,
   marginBottom = 20,
   marginTop = 18,
   speeds = null,
@@ -151,7 +152,12 @@ const GasSpeedButton = ({
   const { colors } = useTheme();
   const { navigate, goBack } = useNavigation();
   const { nativeCurrencySymbol, nativeCurrency } = useAccountSettings();
-  const rawColorForAsset = useColorForAsset(asset || {}, null, false, true);
+  const rawColorForAsset = useColorForAsset(
+    asset || {},
+    fallbackColor,
+    false,
+    true
+  );
   const [isLongWait, setIsLongWait] = useState(false);
 
   const { inputCurrency, outputCurrency } = useSwapCurrencies();
@@ -229,6 +235,7 @@ const GasSpeedButton = ({
     if (gasIsNotReady) return;
     navigate(Routes.CUSTOM_GAS_SHEET, {
       asset,
+      fallbackColor,
       flashbotTransaction,
       focusTo: shouldOpenCustomGasSheet.focusTo,
       openCustomOptions: focusTo => openCustomOptionsRef.current(focusTo),

diff --git a/src/entities/transactions/transactionStatus.ts b/src/entities/transactions/transactionStatus.ts
@@ -10,6 +10,8 @@ export enum TransactionStatus {
   depositing = 'depositing',
   dropped = 'dropped',
   failed = 'failed',
+  minted = 'minted',
+  minting = 'minting',
   purchased = 'purchased',
   purchasing = 'purchasing',
   received = 'received',
@@ -39,6 +41,8 @@ export default {
   depositing: 'depositing',
   dropped: 'dropped',
   failed: 'failed',
+  minted: 'minted',
+  minting: 'minting',
   purchased: 'purchased',
   purchasing: 'purchasing',
   received: 'received',

diff --git a/src/entities/transactions/transactionType.ts b/src/entities/transactions/transactionType.ts
@@ -7,6 +7,7 @@ export enum TransactionType {
   deposit = 'deposit',
   dropped = 'dropped',
   execution = 'execution',
+  mint = 'mint',
   purchase = 'purchase', // Rainbow-specific type
   receive = 'receive',
   repay = 'repay',
@@ -25,6 +26,7 @@ export default {
   deposit: 'deposit',
   dropped: 'dropped',
   execution: 'execution',
+  mint: 'mint',
   purchase: 'purchase',
   receive: 'receive',
   repay: 'repay',