Adds Interaction Template generation/query & display for transactions generated by NFT Catalog

ui/apps/nft-portal/src/app/components/catalog/catalog-select.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useState } from "react"
 import { useNavigate } from "react-router-dom"
 import { getAllNFTsInAccountFromCatalog, getCollections, getProposals, getSupportedGeneratedTransactions, getSupportedGeneratedScripts, getProposalsCount } from "../../../flow/utils"
-import { Network } from "./network-dropdown";
+import { Network } from "../../constants/networks";
 import { changeFCLEnvironment } from "../../../flow/setup";
 import { Badge } from "../shared/badge";
 

ui/apps/nft-portal/src/app/components/catalog/index.tsx

@@ -1,6 +1,7 @@
 import { useCallback, useState } from "react"
 import { useParams } from "react-router-dom";
-import { NetworkDropDown, Network } from "./network-dropdown";
+import { NetworkDropDown } from "./network-dropdown";
+import { Network } from "../../constants/networks"
 import { CatalogSelect } from "./catalog-select";
 import { NftCollectionContent } from "./nft-collection-content";
 import { ProposalContent } from "./proposal-content";

ui/apps/nft-portal/src/app/components/catalog/network-dropdown.tsx

@@ -1,25 +1,16 @@
 import { flushSync } from "react-dom";
 import { DropDown } from "../shared/drop-down"
+import { networks as _networks, Network, NetworkOption } from "../../constants/networks";
 import * as fcl from "@onflow/fcl";
 
-export type Network = "mainnet" | "testnet";
-
-type NetworkOption = {
-  value: Network,
-  label: string
-}
-
 type NetworkDropDownProps = {
   network: Network
   onNetworkChange: (value: Network) => void;
 };
 
 export function NetworkDropDown({ network, onNetworkChange }: NetworkDropDownProps) {
 
-  const networks: NetworkOption[] = [
-    { value: "mainnet", label: "Mainnet" },
-    { value: "testnet", label: "Testnet" },
-  ];
+  const networks: NetworkOption[] = _networks as  NetworkOption[];
   return <DropDown label="Network" options={networks} value={network} onChange={(e) => {
     fcl.unauthenticate()
     return onNetworkChange(e)

ui/apps/nft-portal/src/app/components/nft/index.tsx

@@ -1,5 +1,6 @@
 import { useCallback } from "react"
-import { NetworkDropDown, Network } from "../catalog/network-dropdown";
+import { NetworkDropDown } from "../catalog/network-dropdown";
+import { Network } from "../../constants/networks";
 import { useParams, useNavigate } from "react-router-dom";
 import { CatalogSelect } from "../catalog/catalog-select";
 import { NFTContent } from "./nft-content";

ui/apps/nft-portal/src/app/components/nft/nft-content.tsx

@@ -9,7 +9,7 @@ import { DisplayView } from "../shared/views/display-view"
 import { CollectionDisplayView } from "../shared/views/collection-display-view"
 import { EmptyContent } from "../catalog/empty-content"
 import { Button } from "../shared/button"
-import { Network } from "../catalog/network-dropdown";
+import { Network } from "../../constants/networks";
 
 export function NFTContent({ nftID, identifier, walletAddress, network }: { nftID: string | undefined, identifier: string | undefined, walletAddress: string | undefined, network: Network }) {
     const [loading, setLoading] = useState<boolean>(false)

ui/apps/nft-portal/src/app/components/shared/spinner.tsx

@@ -1,7 +1,7 @@
-export function Spinner({}: {}) {
+export function Spinner({ message }: { message?: string | null }) {
   return (
     <div className="flex items-center justify-center">
-      Loading...
+      { message ? message : "Loading..." }
     </div>
   )
 }

ui/apps/nft-portal/src/app/components/transactions/index.tsx

@@ -1,5 +1,6 @@
 import { useCallback, useState } from "react"
-import { NetworkDropDown, Network } from "../catalog/network-dropdown";
+import { NetworkDropDown } from "../catalog/network-dropdown";
+import { Network } from "../../constants/networks"
 import { useParams, useNavigate } from "react-router-dom";
 import { CatalogSelect } from "../catalog/catalog-select";
 import { changeFCLEnvironment } from "apps/nft-portal/src/flow/setup";