feat(menu-list-nft): Allow the user to click list nft

It will navigate to nft details
TERITORI · Aug 14, 2023 · 1e94a1e · 1e94a1e
1 parent a21741f
commit 1e94a1e
Show file tree

Hide file tree

Showing 11 changed files with 54 additions and 44 deletions.
diff --git a/packages/components/cards/NFTAttributeCard.tsx b/packages/components/cards/NFTAttributeCard.tsx
@@ -2,7 +2,6 @@ import React from "react";
 import { StyleProp, View, ViewStyle } from "react-native";
 
 import { AttributeRarityFloor } from "../../api/marketplace/v1/marketplace";
-import { NFTInfo } from "../../screens/Marketplace/NFTDetailScreen";
 import { resolveColor } from "../../screens/Marketplace/utils";
 import { prettyPrice } from "../../utils/coins";
 import {
@@ -11,6 +10,7 @@ import {
   fontSemibold12,
 } from "../../utils/style/fonts";
 import { layout } from "../../utils/style/layout";
+import { NFTInfo } from "../../utils/types/nft";
 import { BrandText } from "../BrandText";
 import { TertiaryBox } from "../boxes/TertiaryBox";
 

diff --git a/packages/components/cards/NFTCancelListingCard.tsx b/packages/components/cards/NFTCancelListingCard.tsx
@@ -1,9 +1,9 @@
 import React from "react";
 import { StyleProp, View, ViewStyle } from "react-native";
 
-import { NFTInfo } from "../../screens/Marketplace/NFTDetailScreen";
 import { prettyPrice } from "../../utils/coins";
 import { fontSemibold12, fontSemibold28 } from "../../utils/style/fonts";
+import { NFTInfo } from "../../utils/types/nft";
 import { BrandText } from "../BrandText";
 import { CurrencyIcon } from "../CurrencyIcon";
 import { TertiaryBox } from "../boxes/TertiaryBox";

diff --git a/packages/components/cards/NFTPriceBuyCard.tsx b/packages/components/cards/NFTPriceBuyCard.tsx
@@ -1,9 +1,9 @@
 import React from "react";
 import { StyleProp, View, ViewStyle } from "react-native";
 
-import { NFTInfo } from "../../screens/Marketplace/NFTDetailScreen";
 import { prettyPrice } from "../../utils/coins";
 import { fontSemibold12, fontSemibold28 } from "../../utils/style/fonts";
+import { NFTInfo } from "../../utils/types/nft";
 import { BrandText } from "../BrandText";
 import { CurrencyIcon } from "../CurrencyIcon";
 import { TertiaryBox } from "../boxes/TertiaryBox";

diff --git a/packages/components/cards/NFTSellCard.tsx b/packages/components/cards/NFTSellCard.tsx
@@ -6,7 +6,7 @@ import {
   getNativeCurrency,
   keplrCurrencyFromNativeCurrencyInfo,
 } from "../../networks";
-import { NFTInfo } from "../../screens/Marketplace/NFTDetailScreen";
+import { NFTInfo } from "../../utils/types/nft";
 import { TertiaryBox } from "../boxes/TertiaryBox";
 import { PrimaryButton } from "../buttons/PrimaryButton";
 import { TextInputCustom } from "../inputs/TextInputCustom";

diff --git a/packages/components/nftDetails/NFTAttributes.tsx b/packages/components/nftDetails/NFTAttributes.tsx
@@ -2,8 +2,8 @@ import React, { useState } from "react";
 import { View } from "react-native";
 
 import { AttributeRarityFloor } from "../../api/marketplace/v1/marketplace";
-import { NFTInfo } from "../../screens/Marketplace/NFTDetailScreen";
 import { neutral33 } from "../../utils/style/colors";
+import { NFTInfo } from "../../utils/types/nft";
 import { ToggleableButton } from "../buttons/ToggleableButton";
 import { NFTAttributeCard } from "../cards/NFTAttributeCard";
 

diff --git a/packages/components/nftDetails/NFTMainInfo.tsx b/packages/components/nftDetails/NFTMainInfo.tsx
@@ -11,7 +11,6 @@ import {
 } from "../../api/marketplace/v1/marketplace";
 import { useTransactionModals } from "../../context/TransactionModalsProvider";
 import { parseNetworkObjectId } from "../../networks";
-import { NFTInfo } from "../../screens/Marketplace/NFTDetailScreen";
 import { mustGetMarketplaceClient } from "../../utils/backend";
 import { RootStackParamList } from "../../utils/navigation";
 import { neutral77, primaryColor } from "../../utils/style/colors";
@@ -22,6 +21,7 @@ import {
   fontSemibold28,
 } from "../../utils/style/fonts";
 import { layout, screenContentMaxWidth } from "../../utils/style/layout";
+import { NFTInfo } from "../../utils/types/nft";
 import { BrandText } from "../BrandText";
 import { ImageWithTextInsert } from "../ImageWithTextInsert";
 import { ActivityTable } from "../activity/ActivityTable";
@@ -262,7 +262,13 @@ export const NFTMainInfo: React.FC<{
               )}
             </>
           ) : (
-            <SpacerColumn size={2} />
+            <>
+              <SpacerColumn size={2} />
+              <BrandText style={{ color: neutral77 }}>
+                Marketplace Not Opened Yet
+              </BrandText>
+              <SpacerColumn size={2} />
+            </>
           )}
           <Tabs
             onSelect={setSelectedTab}

diff --git a/packages/components/nftDetails/components/NFTSellInfo.tsx b/packages/components/nftDetails/components/NFTSellInfo.tsx
@@ -8,10 +8,10 @@ import {
   mustGetNonSigningCosmWasmClient,
   NetworkKind,
 } from "../../../networks";
-import { NFTInfo } from "../../../screens/Marketplace/NFTDetailScreen";
 import { prettyPrice } from "../../../utils/coins";
 import { trimFixed } from "../../../utils/numbers";
 import { fontMedium14 } from "../../../utils/style/fonts";
+import { NFTInfo } from "../../../utils/types/nft";
 import { BrandText } from "../../BrandText";
 
 export const NFTSellInfo: React.FC<{

diff --git a/packages/components/nfts/NFTView.tsx b/packages/components/nfts/NFTView.tsx
@@ -217,12 +217,17 @@ export const NFTView: React.FC<{
                           label="Set as Avatar"
                         />
                         <SpacerColumn size={0.5} />
-                        <DropdownOption
-                          onPress={closeOpenedDropdown}
-                          isComingSoon
-                          icon={gridSVG}
-                          label="List this NFT"
-                        />
+                        <OmniLink
+                          to={{
+                            screen: "NFTDetail",
+                            params: { id: nft.id },
+                          }}
+                        >
+                          <DropdownOption
+                            icon={gridSVG}
+                            label="List this NFT"
+                          />
+                        </OmniLink>
                         <SpacerColumn size={0.5} />
                         <DropdownOption
                           onPress={closeOpenedDropdown}

diff --git a/packages/hooks/useNFTInfo.ts b/packages/hooks/useNFTInfo.ts
@@ -1,7 +1,5 @@
 import { useQuery } from "@tanstack/react-query";
 
-import { TeritoriNft__factory } from "./../evm-contracts-clients/teritori-nft/TeritoriNft__factory";
-import { NFTAttribute } from "./../utils/types/nft";
 import { useBreedingConfig } from "./useBreedingConfig";
 import { TeritoriBreedingQueryClient } from "../contracts-clients/teritori-breeding/TeritoriBreeding.client";
 import { ConfigResponse as BreedingConfigResponse } from "../contracts-clients/teritori-breeding/TeritoriBreeding.types";
@@ -10,6 +8,7 @@ import { TeritoriNameServiceQueryClient } from "../contracts-clients/teritori-na
 import { TeritoriNftQueryClient } from "../contracts-clients/teritori-nft/TeritoriNft.client";
 import { TeritoriNftVaultQueryClient } from "../contracts-clients/teritori-nft-vault/TeritoriNftVault.client";
 import { TeritoriMinter__factory } from "../evm-contracts-clients/teritori-bunker-minter/TeritoriMinter__factory";
+import { TeritoriNft__factory } from "../evm-contracts-clients/teritori-nft/TeritoriNft__factory";
 import { NFTVault__factory } from "../evm-contracts-clients/teritori-nft-vault/NFTVault__factory";
 import {
   CosmosNetworkInfo,
@@ -21,9 +20,9 @@ import {
   NetworkKind,
   getUserId,
 } from "../networks";
-import { NFTInfo } from "../screens/Marketplace/NFTDetailScreen";
 import { getEthereumProvider } from "../utils/ethereum";
 import { ipfsURLToHTTPURL } from "../utils/ipfs";
+import { NFTAttribute, NFTInfo } from "../utils/types/nft";
 
 export const useNFTInfo = (nftId: string, userId?: string | undefined) => {
   const [network, minterContractAddress, tokenId] = parseNftId(nftId);

diff --git a/packages/screens/Marketplace/NFTDetailScreen.tsx b/packages/screens/Marketplace/NFTDetailScreen.tsx
@@ -21,41 +21,16 @@ import { useNFTInfo } from "../../hooks/useNFTInfo";
 import useSelectedWallet from "../../hooks/useSelectedWallet";
 import { useSellNFT } from "../../hooks/useSellNFT";
 import {
-  NetworkKind,
   getCollectionId,
   getKeplrSigningCosmWasmClient,
   mustGetCosmosNetwork,
   mustGetEthereumNetwork,
+  NetworkKind,
   parseNftId,
 } from "../../networks";
 import { getMetaMaskEthereumSigner } from "../../utils/ethereum";
 import { ScreenFC, useAppNavigation } from "../../utils/navigation";
-import { NFTAttribute } from "../../utils/types/nft";
-
-export interface NFTInfo {
-  name: string;
-  description: string;
-  attributes: NFTAttribute[];
-  nftAddress: string;
-  imageURL: string;
-  tokenId: string;
-  mintAddress: string;
-  ownerAddress: string;
-  isSeller: boolean;
-  isListed: boolean;
-  isOwner: boolean;
-  canSell: boolean;
-  price: string;
-  priceDenom: string;
-  collectionName: string;
-  textInsert?: string;
-  collectionImageURL: string;
-  mintDenom: string;
-  royalty: number;
-  breedingsAvailable?: number;
-  networkId: string;
-  collectionId: string;
-}
+import { NFTInfo } from "../../utils/types/nft";
 
 const Content: React.FC<{
   id: string;

diff --git a/packages/utils/types/nft.ts b/packages/utils/types/nft.ts
@@ -18,3 +18,28 @@ export type FooterNftData = NftData & {
   imageUri: string;
   borderRadius: number;
 };
+
+export interface NFTInfo {
+  name: string;
+  description: string;
+  attributes: NFTAttribute[];
+  nftAddress: string;
+  imageURL: string;
+  tokenId: string;
+  mintAddress: string;
+  ownerAddress: string;
+  isSeller: boolean;
+  isListed: boolean;
+  isOwner: boolean;
+  canSell: boolean;
+  price: string;
+  priceDenom: string;
+  collectionName: string;
+  textInsert?: string;
+  collectionImageURL: string;
+  mintDenom: string;
+  royalty: number;
+  breedingsAvailable?: number;
+  networkId: string;
+  collectionId: string;
+}