nfts: mints

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",

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();

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()`
@@ -78,9 +79,14 @@ export const event = {
   nftOffersSelectedSortCriterion: 'Selected NFT Offers Sort Criterion',
   nftOffersAcceptedOffer: 'Accepted NFT Offer',
 
+  nftMintsOpenedSheet: 'Opened NFT Mint Sheet',
+  nftMintsMintingNFT: 'Minting NFT',
+  nftMintsMintedNFT: 'Minted NFT',
+
   poapsOpenedMintSheet: 'Opened POAP mint sheet',
   poapsMintedPoap: 'Minted POAP',
   poapsViewedOnPoap: 'Viewed POAP on poap.gallery',
+
   positionsOpenedSheet: 'Opened position Sheet',
   positionsOpenedExternalDapp: 'Viewed external dapp',
 
@@ -292,6 +298,23 @@ export type EventProperties = {
     rainbowFee: number;
     offerCurrency: { symbol: string; contractAddress: string };
   };
+  [event.nftMintsMintingNFT]: {
+    contract: string;
+    network: Network;
+    quantity: number;
+    collectionName: string;
+  };
+  [event.nftMintsMintedNFT]: {
+    contract: string;
+    network: Network;
+    quantity: number;
+    collectionName: string;
+  };
+  [event.nftMintsOpenedSheet]: {
+    contract: string;
+    network: Network;
+    collectionName: string;
+  };
   [event.poapsMintedPoap]: {
     eventId: number;
     type: 'qrHash' | 'secretWord';

src/components/cards/FeaturedMintCard.tsx

@@ -29,6 +29,8 @@ 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;
 
@@ -123,7 +125,11 @@ export function FeaturedMintCard() {
                     ),
                   }
                 );
-                Linking.openURL(featuredMint.externalURL);
+                const network = ethereumUtils.getNetworkFromChainId(
+                  featuredMint.chainId
+                );
+                navigateToMintCollection(featuredMint.contract, network);
+                // Linking.openURL(featuredMint.externalURL);
               }}
               scaleTo={0.96}
             >

src/components/cards/MintsCard/CollectionCell.tsx

@@ -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;
 
@@ -98,7 +99,9 @@ export function CollectionCell({
           chainId: collection.chainId,
           priceInEth: amount,
         });
-        Linking.openURL(collection.externalURL);
+
+        const network = ethereumUtils.getNetworkFromChainId(collection.chainId);
+        navigateToMintCollection(collection.contract, network);
       }}
       style={{ width: NFT_IMAGE_SIZE }}
     >

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, {

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

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({

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'

src/components/expanded-state/CustomGasState.js

@@ -10,7 +10,6 @@ import { SlackSheet } from '../sheet';
 import { FeesPanel, FeesPanelTabs } from './custom-gas';
 import { getTrendKey } from '@/helpers/gas';
 import {
-  useAccountSettings,
   useColorForAsset,
   useDimensions,
   useGas,
@@ -42,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);

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),

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',

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',

src/graphql/config.js

@@ -17,7 +17,7 @@ exports.config = {
     document: './queries/arc.graphql',
     schema: {
       method: 'GET',
-      url: 'https://arc-graphql.rainbow.me/graphql',
+      url: 'https://arc-graphql.rainbowdotme.workers.dev/graphql',
       headers: {
         'x-api-key': 'ARC_GRAPHQL_API_KEY',
       },

src/graphql/index.ts

@@ -9,5 +9,5 @@ export const ensClient = getEnsSdk(getFetchRequester(config.ens));
 export const metadataClient = getMetadataSdk(
   getFetchRequester(config.metadata)
 );
-export const arcClient = getArcSdk(getFetchRequester(config.arc));
+export const arcClient = getArcSdk(getFetchRequester(config.arcDev));
 export const arcDevClient = getArcDevSdk(getFetchRequester(config.arcDev));

src/graphql/queries/arc.graphql

@@ -101,6 +101,51 @@ query claimPoapBySecretWord($walletAddress: String!, $secretWord: String!) {
   }
 }
 
+query getReservoirCollection($contractAddress: String!, $chainId: Int!) {
+  getReservoirCollection(contractAddress: $contractAddress, chainId: $chainId) {
+    collection {
+      id
+      chainId
+      createdAt
+      name
+      image
+      description
+      sampleImages
+      tokenCount
+      creator
+      ownerCount
+      isMintingPublicSale
+      publicMintInfo {
+        stage
+        kind
+        price {
+          currency {
+            contract
+            name
+            symbol
+            decimals
+          }
+          amount {
+            raw
+            decimal
+            usd
+            native
+          }
+          netAmount {
+            raw
+            decimal
+            usd
+            native
+          }
+        }
+        startTime
+        endTime
+        maxMintsPerWallet
+      }
+    }
+  }
+}
+
 fragment mintStatus on MintStatus {
   isMintable
   price

src/handlers/transactions.ts

@@ -114,6 +114,8 @@ const getConfirmedState = (type?: TransactionType): TransactionStatus => {
       return TransactionStatus.approved;
     case TransactionTypes.sell:
       return TransactionStatus.sold;
+    case TransactionTypes.mint:
+      return TransactionStatus.minted;
     case TransactionTypes.deposit:
       return TransactionStatus.deposited;
     case TransactionTypes.withdraw:

src/helpers/transactions.ts

@@ -99,6 +99,8 @@ export const getConfirmedState = (
       return TransactionStatus.purchased;
     case TransactionTypes.sell:
       return TransactionStatus.sold;
+    case TransactionTypes.mint:
+      return TransactionStatus.minted;
     default:
       return TransactionStatus.sent;
   }

src/hooks/useGas.ts

@@ -186,6 +186,18 @@ export default function useGas({
     [dispatch]
   );
 
+  const getTotalGasPrice = () => {
+    const txFee = gasData?.selectedGasFee?.gasFee;
+    const isLegacyGasNetwork =
+      getNetworkObj(gasData?.txNetwork).gas.gasType === 'legacy';
+    const txFeeValue = isLegacyGasNetwork
+      ? (txFee as LegacyGasFee)?.estimatedFee
+      : (txFee as GasFee)?.maxFee;
+
+    const txFeeAmount = fromWei(txFeeValue?.value?.amount);
+    return txFeeAmount;
+  };
+
   return {
     isGasReady,
     isSufficientGas,
@@ -197,6 +209,7 @@ export default function useGas({
     updateGasFeeOption,
     updateToCustomGasFee,
     updateTxFee,
+    getTotalGasPrice,
     ...gasData,
   };
 }