feat: burn capital, landing page and multi burn

networks.json

@@ -10894,7 +10894,11 @@
     "featureObjects": [
       {
         "type": "CosmWasmNFTsBurner",
-        "burnerContractAddress": "tori16tlfw7uq73d5n8j5tl0zl367c58f032j50jgxr3e7f09gez3xq5qvcrxy7"
+        "burnerContractAddress": "tori16tlfw7uq73d5n8j5tl0zl367c58f032j50jgxr3e7f09gez3xq5qvcrxy7",
+        "authorizedCollections": [
+          "tori-tori1upd858fjdlme0wv4vd2v7c4majyr9dg53rl72dzfhds9zusmn9mqzjk22e",
+          "tori-tori1quj5act407qgszngzsh9elcelzl9pgcglq3844cwqex3cxzzeres0ckprs"
+        ]
       }
     ],
     "registryName": "teritori",
@@ -11075,7 +11079,10 @@
       },
       {
         "type": "CosmWasmNFTsBurner",
-        "burnerContractAddress": "tori1qyl0j7a24amk8k8gcmvv07y2zjx7nkcwpk73js24euh64hkja6esd2p2xp"
+        "burnerContractAddress": "tori1qyl0j7a24amk8k8gcmvv07y2zjx7nkcwpk73js24euh64hkja6esd2p2xp",
+        "authorizedCollections": [
+          "testori-tori1r8raaqul4j05qtn0t05603mgquxfl8e9p7kcf7smwzcv2hc5rrlq0vket0"
+        ]
       }
     ],
     "currencies": [

packages/components/connectWallet/MainConnectWalletButton.tsx

@@ -16,6 +16,7 @@ export const MainConnectWalletButton: React.FC<{
     <View style={style}>
       <PrimaryButton
         size={size}
+        fullWidth
         text="Connect wallet"
         onPress={() => setIsConnectWalletVisible(true)}
       />

packages/components/nfts/NFTView.tsx

@@ -50,6 +50,7 @@ import { SecondaryButton } from "../buttons/SecondaryButton";
 import { UserAvatarWithFrame } from "../images/AvatarWithFrame";
 import { SpacerColumn, SpacerRow } from "../spacer";
 
+import { PrimaryButton } from "@/components/buttons/PrimaryButton";
 import { useFeedbacks } from "@/context/FeedbacksProvider";
 import { TeritoriNftClient } from "@/contracts-clients/teritori-nft/TeritoriNft.client";
 import { popularCollectionsQueryKey } from "@/hooks/marketplace/usePopularCollections";
@@ -59,6 +60,12 @@ import { nftBurnerUserCountQueryKey } from "@/hooks/nft-burner/useNFTBurnerUserC
 import { collectionStatsQueryKey } from "@/hooks/useCollectionStats";
 import { nftsQueryKey } from "@/hooks/useNFTs";
 import { getKeplrSigningCosmWasmClient } from "@/networks/signer";
+import {
+  addSelectedToBurn,
+  setShowBurnCart,
+  selectSelectedNFTIds as selectSelectedNFTIdsForBurn,
+  removeSelectedFromBurn,
+} from "@/store/slices/burnCartItems";
 
 // NOTE: we put content in a memoized component to only rerender the container when the window width changes
 
@@ -434,6 +441,23 @@ const NFTViewFooter: React.FC<{ nft: NFT; localSelected: boolean }> = memo(
   ({ nft, localSelected }) => {
     const selectedWallet = useSelectedWallet();
     const isOwner = nft.ownerId === selectedWallet?.userId;
+    const dispatch = useAppDispatch();
+
+    const burnerFeature = getNetworkFeature(
+      nft.networkId,
+      NetworkFeature.CosmWasmNFTsBurner,
+    );
+    const { data: authorizedCollections } = useNFTBurnerAuthorizedCollections(
+      nft.networkId,
+    );
+
+    const showRecycle =
+      !!burnerFeature &&
+      (authorizedCollections || []).includes(nft.nftContractAddress);
+
+    const selectedForBurn = useSelector(selectSelectedNFTIdsForBurn).includes(
+      nft.id,
+    );
     return (
       <View
         style={{
@@ -473,14 +497,30 @@ const NFTViewFooter: React.FC<{ nft: NFT; localSelected: boolean }> = memo(
               </BrandText>
             </>
           ) : (
-            <BrandText
-              style={{
-                fontSize: 12,
-                color: neutral77,
-              }}
-            >
-              Not listed
-            </BrandText>
+            <>
+              {showRecycle ? (
+                <PrimaryButton
+                  onPress={() => {
+                    dispatch(setShowBurnCart(true));
+                    if (!selectedForBurn) {
+                      dispatch(addSelectedToBurn(nft));
+                    } else {
+                      dispatch(removeSelectedFromBurn(nft.id));
+                    }
+                  }}
+                  text={selectedForBurn ? "Added to the burn 🔥" : "Burnable"}
+                />
+              ) : (
+                <BrandText
+                  style={{
+                    fontSize: 12,
+                    color: neutral77,
+                  }}
+                >
+                  Not listed
+                </BrandText>
+              )}
+            </>
           )}
         </View>
         <SpacerRow size={2} />

packages/hooks/useCollectionInfo.ts

@@ -35,6 +35,7 @@ import { isLinkBanned } from "@/utils/link-ban";
 export const useCollectionInfo = (
   id: string,
   forceInterval?: number,
+  enabled: boolean = true,
 ): {
   collectionInfo: CollectionInfo;
   notFound: boolean;

packages/hooks/useCollectionStats.ts

@@ -5,11 +5,14 @@ import { parseNetworkObjectId, NetworkKind } from "@/networks";
 import { getMarketplaceClient } from "@/utils/backend";
 
 export const collectionStatsQueryKey = (
-  collectionId: string,
+  collectionId?: string,
   ownerId?: string,
 ) => {
-  const qk = ["collectionStats", collectionId];
-  if (ownerId) {
+  const qk = ["collectionStats"];
+  if (collectionId) {
+    qk.push(collectionId);
+  }
+  if (collectionId && ownerId) {
     qk.push(ownerId);
   }
   return qk;

packages/networks/features.ts

@@ -32,6 +32,7 @@ export type CosmWasmPremiumFeed = z.infer<typeof zodCosmWasmPremiumFeed>;
 const zodCosmWasmNFTsBurner = z.object({
   type: z.literal(NetworkFeature.CosmWasmNFTsBurner),
   burnerContractAddress: z.string(),
+  authorizedCollections: z.array(z.string()), // FIXME: use nft contract address instead of minter contract address in ids
 });
 
 export type CosmWasmNFTsBurner = z.infer<typeof zodCosmWasmNFTsBurner>;

packages/networks/teritori-testnet/index.ts

@@ -19,6 +19,9 @@ const nftsBurnerFeature: CosmWasmNFTsBurner = {
   type: NetworkFeature.CosmWasmNFTsBurner,
   burnerContractAddress:
     "tori1qyl0j7a24amk8k8gcmvv07y2zjx7nkcwpk73js24euh64hkja6esd2p2xp",
+  authorizedCollections: [
+    "testori-tori1r8raaqul4j05qtn0t05603mgquxfl8e9p7kcf7smwzcv2hc5rrlq0vket0",
+  ],
 };
 
 const riotContractAddressGen0 =

packages/networks/teritori/index.ts

@@ -11,6 +11,10 @@ const burnCapitalFeature: CosmWasmNFTsBurner = {
   type: NetworkFeature.CosmWasmNFTsBurner,
   burnerContractAddress:
     "tori16tlfw7uq73d5n8j5tl0zl367c58f032j50jgxr3e7f09gez3xq5qvcrxy7",
+  authorizedCollections: [
+    "tori-tori1upd858fjdlme0wv4vd2v7c4majyr9dg53rl72dzfhds9zusmn9mqzjk22e", // Sasquatch Society Farmers
+    "tori-tori1quj5act407qgszngzsh9elcelzl9pgcglq3844cwqex3cxzzeres0ckprs", // ToriWadz
+  ],
 };
 
 export const teritoriNetwork: CosmosNetworkInfo = {

packages/screens/BurnCapital/BurnCapitalScreen.tsx

@@ -1,27 +1,101 @@
+import React, { useEffect } from "react";
+import { View } from "react-native";
+import { useDispatch } from "react-redux";
+
 import { BrandText } from "@/components/BrandText";
 import { ScreenContainer } from "@/components/ScreenContainer";
 import { useNFTBurnerTotal } from "@/hooks/nft-burner/useNFTBurnerTotal";
 import { useNFTBurnerUserCount } from "@/hooks/nft-burner/useNFTBurnerUserCount";
+import { useIsMobile } from "@/hooks/useIsMobile";
 import { useSelectedNetworkId } from "@/hooks/useSelectedNetwork";
 import useSelectedWallet from "@/hooks/useSelectedWallet";
-import { teritoriNetwork } from "@/networks/teritori";
-import { ScreenFC } from "@/utils/navigation";
+import { NetworkFeature, getNetwork } from "@/networks";
+import { BurnSideCart } from "@/screens/BurnCapital/components/BurnSideCart";
+import { BurnableNFTs } from "@/screens/BurnCapital/components/BurnableNFTs";
+import { TopSectionConnectWallet } from "@/screens/BurnCapital/components/TopSectionConnectWallet";
+import { setSelectedNetworkId } from "@/store/slices/settings";
+import { ScreenFC, useAppNavigation } from "@/utils/navigation";
+import { neutral00, neutral33 } from "@/utils/style/colors";
+import { fontSemibold20 } from "@/utils/style/fonts";
+import { layout } from "@/utils/style/layout";
 
 export const BurnCapitalScreen: ScreenFC<"BurnCapital"> = ({ route }) => {
-  const inputNetwork = route.params?.network || teritoriNetwork.id;
+  const inputNetwork = route.params?.network;
   const selectedWallet = useSelectedWallet();
   const selectedNetworkId = useSelectedNetworkId();
+  const dispatch = useDispatch();
+  const navigation = useAppNavigation();
+  const isMobile = useIsMobile();
+
+  useEffect(() => {
+    if (!inputNetwork) {
+      return;
+    }
+    const network = getNetwork(inputNetwork);
+    if (!network) {
+      return;
+    }
+    dispatch(setSelectedNetworkId(network.id));
+  }, [dispatch, inputNetwork]);
+
   const { data: count } = useNFTBurnerUserCount(selectedWallet?.userId);
   const { data: total } = useNFTBurnerTotal(selectedNetworkId);
   return (
-    <ScreenContainer fullWidth forceNetworkId={inputNetwork}>
-      <BrandText>Burn Capital</BrandText>
-      {typeof total === "number" && (
-        <BrandText>Total burned: {total}</BrandText>
-      )}
-      {typeof count === "number" && (
-        <BrandText>Burned by you: {count}</BrandText>
-      )}
+    <ScreenContainer
+      isLarge
+      footerChildren={<></>}
+      fullWidth
+      forceNetworkFeatures={[NetworkFeature.CosmWasmNFTsBurner]}
+      headerChildren={
+        <BrandText style={fontSemibold20}>BURN Capital 🔥</BrandText>
+      }
+      responsive
+      onBackPress={() => navigation.navigate("Marketplace")}
+    >
+      <View
+        style={{
+          marginTop: layout.spacing_x4,
+        }}
+      >
+        <View
+          style={{
+            flexWrap: "nowrap",
+            justifyContent: "space-between",
+            alignItems: "center",
+          }}
+        >
+          <TopSectionConnectWallet />
+          {typeof total === "number" && (
+            <BrandText>Total burned: {total}</BrandText>
+          )}
+          {typeof count === "number" && (
+            <BrandText>Burned by you: {count}</BrandText>
+          )}
+
+          <BurnableNFTs
+            ownerId={selectedWallet?.userId || ""}
+            style={{ marginHorizontal: layout.spacing_x3 }}
+          />
+          <BurnSideCart
+            style={{
+              position: isMobile ? "relative" : "absolute",
+              right: isMobile ? 0 : 50,
+              top: isMobile ? 0 : 500,
+              marginTop: layout.spacing_x4,
+              flexDirection: "column",
+              width: 245,
+              marginBottom: layout.spacing_x2_5,
+              backgroundColor: neutral00,
+              borderRadius: layout.spacing_x2,
+              borderColor: neutral33,
+              borderWidth: 1,
+              paddingVertical: layout.spacing_x1,
+              paddingHorizontal: layout.spacing_x1_5,
+              borderStyle: "solid",
+            }}
+          />
+        </View>
+      </View>
     </ScreenContainer>
   );
 };