gallery view

package.json

@@ -23,6 +23,7 @@
     "@metaplex-foundation/umi-signer-wallet-adapters": "^0.9.2",
     "@metaplex-foundation/umi-uploader-irys": "^0.10.0-beta.0",
     "@metaplex-foundation/umi-web3js-adapters": "^0.9.2",
+    "@nfteyez/sol-rayz-react": "^0.10.2",
     "@noble/ed25519": "^1.7.1",
     "@solana/pay": "^0.2.5",
     "@solana/wallet-adapter-base": "^0.9.22",
@@ -38,6 +39,8 @@
     "next-compose-plugins": "^2.2.1",
     "next-transpile-modules": "^10.0.0",
     "react": "^18.2.0",
+    "react-alert": "^7.0.3",
+    "react-alert-template-basic": "^1.0.2",
     "react-dom": "^18.2.0",
     "zustand": "^3.6.9"
   },

src/components/Loader.tsx

@@ -0,0 +1,33 @@
+import { FC } from "react";
+
+type Props = {
+  noText?: boolean;
+  text?: string;
+};
+export const Loader: FC<Props> = ({ text = "Loading...", noText = false }) => {
+  return (
+    <div className="flex flex-col justify-center items-center text-xl font-light">
+      <svg
+        className="animate-spin h-8 w-8 text-white"
+        xmlns="http://www.w3.org/2000/svg"
+        fill="white"
+        viewBox="0 0 24 24"
+      >
+        <circle
+          className="opacity-5"
+          cx="12"
+          cy="12"
+          r="10"
+          stroke="currentColor"
+          strokeWidth="4"
+        ></circle>
+        <path
+          className="opacity-75"
+          fill="currentColor"
+          d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+        ></path>
+      </svg>{" "}
+      {!noText ? <div className="opacity-50 mt-4">{text}</div> : null}
+    </div>
+  );
+};

src/components/SelectAndConnectWalletButton.tsx

@@ -0,0 +1,47 @@
+import { FC, useEffect } from "react";
+import { useWallet } from "@solana/wallet-adapter-react";
+import { useWalletModal } from "@solana/wallet-adapter-react-ui";
+
+type Props = {
+  onUseWalletClick: () => void;
+};
+
+export const SelectAndConnectWalletButton: FC<Props> = ({
+  onUseWalletClick,
+}) => {
+  const { setVisible } = useWalletModal();
+  const { wallet, connect, connecting, publicKey } = useWallet();
+
+  useEffect(() => {
+    if (!publicKey && wallet) {
+      try {
+        connect();
+      } catch (error) {
+        console.log("Error connecting to the wallet: ", (error as any).message);
+      }
+    }
+  }, [wallet]);
+
+  const handleWalletClick = () => {
+    try {
+      if (!wallet) {
+        setVisible(true);
+      } else {
+        connect();
+      }
+      onUseWalletClick();
+    } catch (error) {
+      console.log("Error connecting to the wallet: ", (error as any).message);
+    }
+  };
+
+  return (
+    <button
+      className="btn btn-primary btn-lg"
+      onClick={handleWalletClick}
+      disabled={connecting}
+    >
+      {publicKey ? <div>Use Wallet Address</div> : <div>Connect Wallet</div>}
+    </button>
+  );
+};

src/components/SolanaLogo.tsx

@@ -0,0 +1,52 @@
+export const SolanaLogo = () => (
+  <svg
+    width="46"
+    height="35"
+    xmlns="http://www.w3.org/2000/svg"
+    className="inline"
+  >
+    <defs>
+      <linearGradient
+        x1="90.737%"
+        y1="34.776%"
+        x2="35.509%"
+        y2="55.415%"
+        id="a"
+      >
+        <stop stopColor="#00FFA3" offset="0%" />
+        <stop stopColor="#DC1FFF" offset="100%" />
+      </linearGradient>
+      <linearGradient x1="66.588%" y1="43.8%" x2="11.36%" y2="64.439%" id="b">
+        <stop stopColor="#00FFA3" offset="0%" />
+        <stop stopColor="#DC1FFF" offset="100%" />
+      </linearGradient>
+      <linearGradient
+        x1="78.586%"
+        y1="39.317%"
+        x2="23.358%"
+        y2="59.956%"
+        id="c"
+      >
+        <stop stopColor="#00FFA3" offset="0%" />
+        <stop stopColor="#DC1FFF" offset="100%" />
+      </linearGradient>
+    </defs>
+    <g fillRule="nonzero" fill="none">
+      <path
+        d="M7.256 26.713c.27-.27.64-.427 1.033-.427h35.64a.73.73 0 0 1 .517 1.247l-7.04 7.04c-.27.27-.64.427-1.034.427H.732a.73.73 0 0 1-.516-1.246l7.04-7.04Z"
+        fill="url(#a)"
+        transform="translate(.98)"
+      />
+      <path
+        d="M7.256.427C7.536.157 7.907 0 8.289 0h35.64a.73.73 0 0 1 .517 1.246l-7.04 7.04c-.27.27-.64.428-1.034.428H.732a.73.73 0 0 1-.516-1.247l7.04-7.04Z"
+        fill="url(#b)"
+        transform="translate(.98)"
+      />
+      <path
+        d="M37.405 13.486c-.27-.27-.64-.427-1.033-.427H.732a.73.73 0 0 0-.516 1.246l7.04 7.04c.27.27.64.428 1.033.428h35.64a.73.73 0 0 0 .517-1.247l-7.04-7.04Z"
+        fill="url(#c)"
+        transform="translate(.98)"
+      />
+    </g>
+  </svg>
+);

src/components/index.tsx

@@ -0,0 +1,19 @@
+export { Loader } from "./Loader";
+export { SolanaLogo } from "./SolanaLogo";
+export { SelectAndConnectWalletButton } from "./SelectAndConnectWalletButton";
+export { CreateToken } from "./CreateToken";
+export { AppBar } from "./AppBar";
+export { ContentContainer } from "./ContentContainer";
+export { CreateAccountError } from "./CreateAccountError";
+export { MintNFT } from "./CreateNft";
+export { Footer } from "./Footer";
+export { GetMetadata } from "./GetMetadata";
+export { RequestAirdrop } from "./RequestAirdrop";
+export { SendTransaction } from "./SendTransaction";
+export { SendTransactionRequest } from "./SendTransactionRequest";
+export { SendTransferRequest } from "./SendTransferRequest";
+export { SendVersionedTransaction } from "./SendVersionedTransaction";
+export { SignMessage } from "./SignMessage";
+export { TransactionRequestQR } from "./TransactionRequestQR";
+export { TransferRequestQR } from "./TransferRequestQR";
+export { UpdateMetadata } from "./UpdateMetadata";

src/pages/gallery.tsx

@@ -0,0 +1,17 @@
+import type { NextPage } from "next";
+import Head from "next/head";
+import { GalleryView } from "views/GalleryView";
+
+const Home: NextPage = (props) => {
+  return (
+    <div>
+      <Head>
+        <title>NFT Gallery!</title>
+        <meta name="description" content="This site will fly high 🦤" />
+      </Head>
+      <GalleryView />
+    </div>
+  );
+};
+
+export default Home;

src/pages/mint.tsx

@@ -0,0 +1,31 @@
+import type { NextPage } from "next";
+import Head from "next/head";
+// import { CandyMachineMintView } from "../views";
+import { transitions, positions, Provider as AlertProvider } from "react-alert";
+import AlertTemplate from "react-alert-template-basic";
+
+// optional configuration
+const options = {
+  // you can also just use 'bottom center'
+  position: positions.BOTTOM_LEFT,
+  timeout: 5000,
+  offset: "10px",
+  // you can also just use 'scale'
+  transition: transitions.SCALE,
+};
+
+const Mint: NextPage = (props) => {
+  return (
+    <div>
+      <Head>
+        <title>Mint NFT!</title>
+        <meta name="description" content="This site will fly high 🦤" />
+      </Head>
+      <AlertProvider template={AlertTemplate} {...options}>
+        {/* <CandyMachineMintView /> */}
+      </AlertProvider>
+    </div>
+  );
+};
+
+export default Mint;

src/utils/fetcher.ts

@@ -0,0 +1,18 @@
+export const fetcher = async (url: string): Promise<any> => {
+  const res = await fetch(url);
+
+  // If the status code is not in the range 200-299,
+  // we still try to parse and throw it.
+  if (!res.ok) {
+    const error = new Error("An error occurred while fetching the data.");
+    // Attach extra info to the error object.
+    const info = await res.json();
+    (error as any).status = res.status;
+
+    console.warn(url, "\nAn error occured while fetching:\n", info);
+
+    throw error;
+  }
+
+  return res.json();
+};

src/views/CandyMachineMintView/config.ts

@@ -0,0 +1,6 @@
+export const config = {
+  CANDY_MACHINE_CONFIG: "6vbr5zpU44G4Ni2S36S6m7bhjMwy4ZiabVG5nJnxWWeK",
+  CANDY_MACHINE_ID: "4f2UZyh476EMGeMo12yRmmxYNBHnGhjyvuwQJMBAnKbd",
+  CANDY_START_DATE: "1639155600",
+  TREASURY_ADDRESS: "CBBUMHRmbVUck99mTCip5sHP16kzGj3QTYB8K3XxwmQx",
+};

src/views/GalleryView/NftCard.tsx

@@ -0,0 +1,63 @@
+import { FC, useState, useEffect } from "react";
+import useSWR from "swr";
+import { EyeOffIcon } from "@heroicons/react/outline";
+import { fetcher } from "utils/fetcher";
+
+type Props = {
+  details: any;
+  onSelect: (id: string) => void;
+  onTokenDetailsFetched?: (props: any) => unknown;
+};
+
+export const NftCard: FC<Props> = ({
+  details,
+  onSelect,
+  onTokenDetailsFetched = () => {},
+}) => {
+  const [fallbackImage, setFallbackImage] = useState(false);
+  const { name, uri } = details?.data ?? {};
+
+  const { data, error } = useSWR(
+    // uri || url ? getMetaUrl(details) : null,
+    uri,
+    fetcher,
+    {
+      revalidateIfStale: false,
+      revalidateOnFocus: false,
+      revalidateOnReconnect: false,
+    }
+  );
+  // console.log("data", data);
+
+  useEffect(() => {
+    if (!error && !!data) {
+      onTokenDetailsFetched(data);
+    }
+  }, [data, error]);
+
+  const onImageError = () => setFallbackImage(true);
+  const { image } = data ?? {};
+
+  return (
+    <div className={`card bordered max-w-xs compact rounded-md`}>
+      <figure className="min-h-16 animation-pulse-color">
+        {!fallbackImage || !error ? (
+          <img
+            src={image}
+            onError={onImageError}
+            className="bg-gray-800 object-cover"
+          />
+        ) : (
+          // Fallback when preview isn't available
+          // This could be broken image, video, or audio
+          <div className="w-auto h-48 flex items-center justify-center bg-gray-900 bg-opacity-40">
+            <EyeOffIcon className="h-16 w-16 text-white-500" />
+          </div>
+        )}
+      </figure>
+      <div className="card-body">
+        <h2 className="card-title text-sm text-left">{name}</h2>
+      </div>
+    </div>
+  );
+};