Building Solana Mobile dApps with Expo

npm install -g eas-cli
eas login

npx create-expo-app

{
  "cli": {
    "version": ">= 5.12.0"
  },
  "build": {
    "development": {
      "developmentClient": true,
      "distribution": "internal"
    },
    "preview": {
      "distribution": "internal"
    },
    "production": {}
  },
  "submit": {
    "production": {}
  }
}

eas build --profile development --platform android --message "Developing on Android!" --local

adb install your-apk-file.apk

npx expo start --dev-client --android

npx expo install expo-sensors

import { Pedometer } from "expo-sensors";

// Learn more https://docs.expo.io/guides/customizing-metro
const { getDefaultConfig } = require("expo/metro-config");
 
/** @type {import('expo/metro-config').MetroConfig} */
const config = getDefaultConfig(__dirname);
 
// Add polyfill resolvers
config.resolver.extraNodeModules.crypto = require.resolve("expo-crypto");
 
module.exports = config;

npm install -g eas-cli
eas login

npx create-expo-app --template blank-typescript solana-expo
cd solana-expo
npx expo install expo-dev-client # This installs a library that enables the creation of custom development builds, providing useful tools for debugging and testing. While optional, it is recommended for a smoother development experience.

touch eas.json

{
  "cli": {
    "version": ">= 3.12.0"
  },
  "build": {
    "development": {
      "developmentClient": true,
      "distribution": "internal"
    },
    "preview": {
      "distribution": "internal"
    },
    "production": {}
  },
  "submit": {
    "production": {}
  }
}

npx eas build --profile development --platform android --local

npx expo start --dev-client --android

cd ..
git clone https://github.com/solana-developers/react-native-fake-solana-wallet
cd react-native-fake-solana-wallet
yarn

cd ..
cd solana-expo

yarn add \
  @solana/web3.js \
  @solana-mobile/mobile-wallet-adapter-protocol-web3js \
  @solana-mobile/mobile-wallet-adapter-protocol \
  expo-crypto \
  buffer

import { View, Text } from "react-native";
import React from "react";
 
export function MainScreen() {
  return (
    <View>
      <Text>Solana Expo App</Text>
    </View>
  );
}

import { getRandomValues as expoCryptoGetRandomValues } from "expo-crypto";
import { Buffer } from "buffer";
 
// Set global Buffer
global.Buffer = Buffer;
 
// Define Crypto class with getRandomValues method
class Crypto {
  getRandomValues = expoCryptoGetRandomValues;
}
 
// Check if crypto is already defined in the global scope
const hasInbuiltWebCrypto = typeof window.crypto !== "undefined";
 
// Use existing crypto if available, otherwise create a new Crypto instance
const webCrypto = hasInbuiltWebCrypto ? window.crypto : new Crypto();
 
// Polyfill crypto object if it's not already defined
if (!hasInbuiltWebCrypto) {
  Object.defineProperty(window, "crypto", {
    configurable: true,
    enumerable: true,
    get: () => webCrypto,
  });
}

import { ConnectionProvider } from "./components/ConnectionProvider";
import { AuthorizationProvider } from "./components/AuthorizationProvider";
import { clusterApiUrl } from "@solana/web3.js";
import { MainScreen } from "./screens/MainScreen";
import "./polyfills";
 
export default function App() {
  const cluster = "devnet";
  const endpoint = clusterApiUrl(cluster);
 
  return (
    <ConnectionProvider
      endpoint={endpoint}
      cluster={cluster}
      config={{ commitment: "processed" }}
    >
      <AuthorizationProvider cluster={cluster}>
        <MainScreen />
      </AuthorizationProvider>
    </ConnectionProvider>
  );
}

  "scripts": {
    "start": "expo start --dev-client",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web",
    "build": "npx eas build --profile development --platform android",
    "build:local": "npx eas build --profile development --platform android --local",
    "test": "echo \"No tests specified\" && exit 0",
    "clean": "rm -rf node_modules && yarn"
  }

yarn run build:local

yarn run android

yarn add assert \
  util \
  crypto-browserify \
  stream-browserify \
  readable-stream \
  browserify-zlib \
  path-browserify \
  react-native-url-polyfill \
  @metaplex-foundation/umi \
  @metaplex-foundation/umi-bundle-defaults \
  @metaplex-foundation/umi-signer-wallet-adapters \
  @metaplex-foundation/umi-web3js-adapters \
  @metaplex-foundation/mpl-token-metadata \
  @metaplex-foundation/mpl-candy-machine

touch metro.config.js

// Learn more https://docs.expo.io/guides/customizing-metro
const { getDefaultConfig } = require("expo/metro-config");
 
/** @type {import('expo/metro-config').MetroConfig} */
const config = getDefaultConfig(__dirname);
 
// Add polyfill resolvers
config.resolver.extraNodeModules.crypto = require.resolve("expo-crypto");
 
module.exports = config;

import { createContext, ReactNode, useContext } from "react";
import type { Umi } from "@metaplex-foundation/umi";
import {
  createNoopSigner,
  publicKey,
  signerIdentity,
} from "@metaplex-foundation/umi";
import { createUmi } from "@metaplex-foundation/umi-bundle-defaults";
import { walletAdapterIdentity } from "@metaplex-foundation/umi-signer-wallet-adapters";
import { mplTokenMetadata } from "@metaplex-foundation/mpl-token-metadata";
import { mplCandyMachine } from "@metaplex-foundation/mpl-candy-machine";
import { useAuthorization } from "./AuthorizationProvider";
 
type UmiContext = {
  umi: Umi | null;
};
 
const DEFAULT_CONTEXT: UmiContext = {
  umi: null,
};
 
export const UmiContext = createContext<UmiContext>(DEFAULT_CONTEXT);
 
export const UmiProvider = ({
  endpoint,
  children,
}: {
  endpoint: string;
  children: ReactNode;
}) => {
  const { selectedAccount } = useAuthorization();
  const umi = createUmi(endpoint)
    .use(mplTokenMetadata())
    .use(mplCandyMachine());
  if (selectedAccount === null) {
    const noopSigner = createNoopSigner(
      publicKey("11111111111111111111111111111111"),
    );
    umi.use(signerIdentity(noopSigner));
  } else {
    umi.use(walletAdapterIdentity(selectedAccount));
  }
 
  return <UmiContext.Provider value={{ umi }}>{children}</UmiContext.Provider>;
};
 
export function useUmi(): Umi {
  const umi = useContext(UmiContext).umi;
  if (!umi) {
    throw new Error(
      "Umi context was not initialized. " +
        "Did you forget to wrap your app with <UmiProvider />?",
    );
  }
  return umi;
}

import "react-native-url-polyfill/auto";
import { useConnection } from "./ConnectionProvider";
import { Account, useAuthorization } from "./AuthorizationProvider";
import React, { ReactNode, createContext, useContext, useState } from "react";
import { useUmi } from "./UmiProvider";
import { Umi } from "@metaplex-foundation/umi";
 
export interface NFTProviderProps {
  children: ReactNode;
}
 
export interface NFTContextState {
  umi: Umi | null;
}
 
const DEFAULT_NFT_CONTEXT_STATE: NFTContextState = {
  umi: null,
};
 
const NFTContext = createContext<NFTContextState>(DEFAULT_NFT_CONTEXT_STATE);
 
export function NFTProvider(props: NFTProviderProps) {
  const { children } = props;
 
  const { connection } = useConnection();
  const { authorizeSession } = useAuthorization();
  const [account, setAccount] = useState<Account | null>(null);
  const { umi } = useUmi(connection, account, authorizeSession);
 
  const state: NFTContextState = {
    umi,
  };
 
  return <NFTContext.Provider value={state}>{children}</NFTContext.Provider>;
}
 
export const useNFT = (): NFTContextState => useContext(NFTContext);

import "./polyfills";
import { ConnectionProvider } from "./components/ConnectionProvider";
import { AuthorizationProvider } from "./components/AuthorizationProvider";
import { clusterApiUrl } from "@solana/web3.js";
import { MainScreen } from "./screens/MainScreen";
import { NFTProvider } from "./components/NFTProvider";
 
export default function App() {
  const cluster = "devnet";
  const endpoint = clusterApiUrl(cluster);
 
  return (
    <ConnectionProvider
      endpoint={endpoint}
      cluster={cluster}
      config={{ commitment: "processed" }}
    >
      <AuthorizationProvider cluster={cluster}>
        <NFTProvider>
          <MainScreen />
        </NFTProvider>
      </AuthorizationProvider>
    </ConnectionProvider>
  );
}

npx eas build --profile development --platform android --local

npx expo start --dev-client --android

npx expo install expo-image-picker

  "expo": {
    // ....
    "plugins": [
      [
        "expo-image-picker",
        {
          "photosPermission": "Allows you to use images to create solana NFTs"
        }
      ]
    ],
    // ....
  }

// Launch the camera to take a picture using ImagePicker
const result = await ImagePicker.launchCameraAsync({
  // Restrict media types to images only (no videos)
  mediaTypes: ImagePicker.MediaTypeOptions.Images,
 
  // Allow the user to edit/crop the image after taking it
  allowsEditing: true,
 
  // Specify the aspect ratio of the cropping frame (1:1 for a square)
  aspect: [1, 1],
 
  // Set the image quality to maximum (1.0 = highest quality, 0.0 = lowest)
  quality: 1,
});
 
// 'result' will contain information about the captured image
// If the user cancels, result.cancelled will be true, otherwise it will contain the image URI

npx eas build --profile development --platform android --local

npx expo start --dev-client --android

export interface NFTContextState {
  metaplex: Metaplex | null; // Holds the metaplex object that we use to call `fetch` and `create` on.
  publicKey: PublicKey | null; // The public key of the authorized wallet
  isLoading: boolean; // Loading state
  loadedNFTs: DigitalAsset[] | null; // Array of loaded NFTs that contain metadata
  nftOfTheDay: DigitalAsset | null; // The NFT snapshot created on the current day
  connect: () => void; // Connects (and authorizes) us to the Devnet-enabled wallet
  fetchNFTs: () => void; // Fetches the NFTs using the `metaplex` object
  createNFT: (name: string, description: string, fileUri: string) => void; // Creates the NFT
}

const fetchNFTs = useCallback(async () => {
  if (!umi || !account || isLoading) return;
  setIsLoading(true);
  try {
    const creatorPublicKey = fromWeb3JsPublicKey(account.publicKey);
    const nfts = await fetchAllDigitalAssetByCreator(umi, creatorPublicKey);
    setLoadedNFTs(nfts);
  } catch (error) {
    console.error("Failed to fetch NFTs:", error);
  } finally {
    setIsLoading(false);
  }
}, [umi, account, isLoading]);

const ipfsPrefix = `https://${process.env.EXPO_PUBLIC_NFT_PINATA_GATEWAY_URL}/ipfs/`;
async function uploadImageFromURI(fileUri: string) {
  try {
    const form = new FormData();
    const randomFileName = `image_${Date.now()}_${Math.floor(Math.random() * 10000)}.jpg`;
 
    form.append("file", {
      uri: Platform.OS === "android" ? fileUri : fileUri.replace("file://", ""),
      type: "image/jpeg", // Adjust the type as necessary
      name: randomFileName, // Adjust the name as necessary
    });
 
    const options = {
      method: "POST",
      headers: {
        Authorization: `Bearer ${process.env.EXPO_PUBLIC_NFT_PINATA_JWT}`,
        "Content-Type": "multipart/form-data",
      },
      body: form,
    };
 
    const response = await fetch(
      "https://api.pinata.cloud/pinning/pinFileToIPFS",
      options,
    );
    const responseJson = await response.json();
    return responseJson;
  } catch (error) {
    console.error("Upload failed:", error);
  } finally {
    console.log("Upload process completed.");
  }
}
 
async function uploadMetadataJson(
  name: string,
  description: string,
  imageCID: string,
) {
  const randomFileName = `metadata_${Date.now()}_${Math.floor(Math.random() * 10000)}.json`;
  const data = JSON.stringify({
    pinataContent: {
      name,
      description,
      imageCID,
    },
    pinataMetadata: {
      name: randomFileName,
    },
  });
  const response = await fetch(
    "https://api.pinata.cloud/pinning/pinJSONToIPFS",
    {
      method: "POST",
      headers: {
        "Content-Type": "application/x-www-form-urlencoded",
        Accept: "application/json",
        Authorization: `Bearer ${process.env.EXPO_PUBLIC_NFT_PINATA_JWT}`,
      },
      body: data,
    },
  );
  const responseBody = await response.json();
 
  return responseBody;
}
 
const uploadImage = useCallback(async (fileUri: string): Promise<string> => {
  const upload = await uploadImageFromURI(fileUri);
  return upload.IpfsHash;
}, []);
 
const uploadMetadata = useCallback(
  async (
    name: string,
    description: string,
    imageCID: string,
  ): Promise<string> => {
    const uploadResponse = await uploadMetadataJson(
      name,
      description,
      imageCID,
    );
    return uploadResponse.IpfsHash;
  },
  [],
);

const createNFT = useCallback(
  async (name: string, description: string, fileUri: string) => {
    if (!umi || !account || isLoading) return;
    setIsLoading(true);
    try {
      console.log(`Creating NFT...`);
      const imageCID = await uploadImage(fileUri);
      const metadataCID = await uploadMetadata(name, description, imageCID);
      const mint = generateSigner(umi);
      const transaction = createNft(umi, {
        mint,
        name,
        uri: ipfsPrefix + metadataCID,
        sellerFeeBasisPoints: percentAmount(0),
      });
      await transaction.sendAndConfirm(umi);
      const createdNft = await fetchDigitalAsset(umi, mint.publicKey);
      setNftOfTheDay(createdNft);
    } catch (error) {
      console.error("Failed to create NFT:", error);
    } finally {
      setIsLoading(false);
    }
  },
  [umi, account, isLoading, uploadImage, uploadMetadata],
);

import "react-native-url-polyfill/auto";
import {
  DigitalAsset,
  createNft,
  fetchAllDigitalAssetByCreator,
  fetchDigitalAsset,
} from "@metaplex-foundation/mpl-token-metadata";
import {
  PublicKey,
  Umi,
  generateSigner,
  percentAmount,
} from "@metaplex-foundation/umi";
import { fromWeb3JsPublicKey } from "@metaplex-foundation/umi-web3js-adapters";
import { clusterApiUrl, PublicKey as solanaPublicKey } from "@solana/web3.js";
import React, {
  ReactNode,
  createContext,
  useCallback,
  useContext,
  useEffect,
  useMemo,
  useState,
} from "react";
import { useUmi } from "./UmiProvider";
import { useMobileWallet } from "../utils/useMobileWallet";
import { Account, useAuthorization } from "./AuthorizationProvider";
import { Platform } from "react-native";
 
export interface NFTProviderProps {
  children: ReactNode;
}
 
export interface NFTContextState {
  umi: Umi | null; // Holds the Umi object that we use to call `fetch` and `create` on.
  publicKey: PublicKey | null; // The public key of the authorized wallet
  isLoading: boolean; // Loading state
  loadedNFTs: DigitalAsset[] | null; // Array of loaded NFTs that contain metadata
  nftOfTheDay: DigitalAsset | null; // The NFT snapshot created on the current day
  connect: () => void; // Connects (and authorizes) us to the Devnet-enabled wallet
  fetchNFTs: () => void; // Fetches the NFTs using the `metaplex` object
  createNFT: (name: string, description: string, fileUri: string) => void; // Creates the NFT
}
 
export function formatDate(date: Date) {
  return `${date.getDate()}.${date.getMonth()}.${date.getFullYear()}`;
}
 
const NFTContext = createContext<NFTContextState | null>(null);
 
export function NFTProvider(props: NFTProviderProps) {
  const ipfsPrefix = `https://${process.env.EXPO_PUBLIC_NFT_PINATA_GATEWAY_URL}/ipfs/`;
  const [account, setAccount] = useState<Account | null>(null);
  const [nftOfTheDay, setNftOfTheDay] = useState<DigitalAsset | null>(null);
  const [loadedNFTs, setLoadedNFTs] = useState<DigitalAsset[] | null>(null);
  const [isLoading, setIsLoading] = useState<boolean>(false);
  const umi = useUmi();
  const { children } = props;
  const connect = () => {
    if (isLoading) return;
 
    setIsLoading(true);
    transact(async wallet => {
      const auth = await authorizeSession(wallet);
      setAccount(auth);
    }).finally(() => {
      setIsLoading(false);
    });
  };
  async function uploadImageFromURI(fileUri: string) {
    try {
      const form = new FormData();
      const randomFileName = `image_${Date.now()}_${Math.floor(Math.random() * 10000)}.jpg`;
 
      // In React Native, especially when working with form data and files, you may need to send files using an object that contains a URI (file path), especially on Android and iOS platforms. However, this structure may not be recognized by TypeScript's strict type checking
      // @ts-ignore
      form.append("file", {
        uri:
          Platform.OS === "android" ? fileUri : fileUri.replace("file://", ""),
        type: "image/jpeg", // Adjust the type as necessary
        name: randomFileName, // Adjust the name as necessary
      });
 
      const options = {
        method: "POST",
        headers: {
          Authorization: `Bearer ${process.env.EXPO_PUBLIC_NFT_PINATA_JWT}`,
          "Content-Type": "multipart/form-data",
        },
        body: form,
      };
 
      const response = await fetch(
        "https://api.pinata.cloud/pinning/pinFileToIPFS",
        options,
      );
      const responseJson = await response.json();
      console.log(responseJson.IpfsHash);
 
      return responseJson;
    } catch (error) {
      console.error("Upload failed:", error);
    } finally {
      console.log("Upload process completed.");
    }
  }
 
  async function uploadMetadataJson(
    name = "Solanify",
    description = "A truly sweet NFT of your day.",
    imageCID = "bafkreih5aznjvttude6c3wbvqeebb6rlx5wkbzyppv7garjiubll2ceym4",
  ) {
    const randomFileName = `metadata_${Date.now()}_${Math.floor(Math.random() * 10000)}.json`;
    const data = JSON.stringify({
      pinataContent: {
        name,
        description,
        imageCID,
      },
      pinataMetadata: {
        name: randomFileName,
      },
    });
    const response = await fetch(
      "https://api.pinata.cloud/pinning/pinJSONToIPFS",
      {
        method: "POST",
        headers: {
          "Content-Type": "application/x-www-form-urlencoded",
          Accept: "application/json",
          Authorization: `Bearer ${process.env.EXPO_PUBLIC_NFT_PINATA_JWT}`,
        },
        body: data,
      },
    );
    const responseBody = await response.json();
 
    return responseBody;
  }
 
  const fetchNFTs = useCallback(async () => {
    if (!umi || !account || isLoading) return;
    setIsLoading(true);
    try {
      const creatorPublicKey = fromWeb3JsPublicKey(account.publicKey);
      const nfts = await fetchAllDigitalAssetByCreator(umi, creatorPublicKey);
      setLoadedNFTs(nfts);
    } catch (error) {
      console.error("Failed to fetch NFTs:", error);
    } finally {
      setIsLoading(false);
    }
  }, [umi, account, isLoading]);
 
  const uploadImage = useCallback(async (fileUri: string): Promise<string> => {
    const upload = await uploadImageFromURI(fileUri);
    return upload.IpfsHash;
  }, []);
 
  const uploadMetadata = useCallback(
    async (
      name: string,
      description: string,
      imageCID: string,
    ): Promise<string> => {
      const uploadResponse = await uploadMetadataJson(
        name,
        description,
        imageCID,
      );
      return uploadResponse.IpfsHash;
    },
    [],
  );
 
  const createNFT = useCallback(
    async (name: string, description: string, fileUri: string) => {
      if (!umi || !account || isLoading) return;
      setIsLoading(true);
      try {
        console.log(`Creating NFT...`);
        const imageCID = await uploadImage(fileUri);
        const metadataCID = await uploadMetadata(name, description, imageCID);
        const mint = generateSigner(umi);
        const transaction = createNft(umi, {
          mint,
          name,
          uri: ipfsPrefix + metadataCID,
          sellerFeeBasisPoints: percentAmount(0),
        });
        await transaction.sendAndConfirm(umi);
        const createdNft = await fetchDigitalAsset(umi, mint.publicKey);
        setNftOfTheDay(createdNft);
      } catch (error) {
        console.error("Failed to create NFT:", error);
      } finally {
        setIsLoading(false);
      }
    },
    [umi, account, isLoading, uploadImage, uploadMetadata],
  );
 
  const publicKey = useMemo(
    () =>
      account?.publicKey
        ? fromWeb3JsPublicKey(account.publicKey as solanaPublicKey)
        : null,
    [account],
  );
 
  const state: NFTContextState = {
    isLoading,
    publicKey,
    umi,
    nftOfTheDay,
    loadedNFTs,
    connect,
    fetchNFTs,
    createNFT,
  };
 
  return <NFTContext.Provider value={state}>{children}</NFTContext.Provider>;
}
 
export const useNFT = (): NFTContextState => {
  const context = useContext(NFTContext);
  if (!context) {
    throw new Error("useNFT must be used within an NFTProvider");
  }
  return context;
};

const mintNFT = async () => {
  const result = await ImagePicker.launchCameraAsync({
    mediaTypes: ImagePicker.MediaTypeOptions.Images,
    allowsEditing: true,
    aspect: [1, 1],
    quality: 1,
  });
 
  if (!result.canceled) {
    setCurrentImage({
      uri: result.assets[0].uri,
      date: todaysDate,
    });
 
    createNFT(
      formatDate(todaysDate),
      `${todaysDate.getTime()}`,
      result.assets[0].uri,
    );
  }
};

import {
  View,
  Button,
  Image,
  StyleSheet,
  ScrollView,
  Text,
} from "react-native";
import React, { useEffect } from "react";
import { formatDate, useNFT } from "../components/NFTProvider";
import * as ImagePicker from "expo-image-picker";
 
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#292524",
  },
  titleText: {
    color: "white",
  },
  topSection: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    textAlign: "center",
    paddingTop: 30,
  },
  imageOfDay: {
    width: "80%",
    height: "80%",
    resizeMode: "cover",
    margin: 10,
  },
  bottomSection: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
  },
  carousel: {
    justifyContent: "center",
    alignItems: "center",
  },
  carouselText: {
    textAlign: "center",
    color: "white",
  },
  carouselImage: {
    width: 100,
    height: 100,
    margin: 5,
    resizeMode: "cover",
  },
});
 
export interface NFTSnapshot {
  uri: string;
  date: Date;
}
 
// Placeholder image URL or local source
const PLACEHOLDER: NFTSnapshot = {
  uri: "https://placehold.co/400x400/png",
  date: new Date(Date.now()),
};
const DEFAULT_IMAGES: NFTSnapshot[] = new Array(7).fill(PLACEHOLDER);
 
export function MainScreen() {
  const {
    fetchNFTs,
    connect,
    publicKey,
    isLoading,
    createNFT,
    loadedNFTs,
    nftOfTheDay,
  } = useNFT();
  const [currentImage, setCurrentImage] =
    React.useState<NFTSnapshot>(PLACEHOLDER);
  const [previousImages, setPreviousImages] =
    React.useState<NFTSnapshot[]>(DEFAULT_IMAGES);
  const todaysDate = new Date(Date.now());
  const ipfsPrefix = `https://${process.env.EXPO_PUBLIC_NFT_PINATA_GATEWAY_URL}/ipfs/`;
  type NftMetaResponse = {
    name: string;
    description: string;
    imageCID: string;
  };
  const fetchMetadata = async (uri: string) => {
    try {
      const response = await fetch(uri);
      const metadata = await response.json();
      return metadata as NftMetaResponse;
    } catch (error) {
      console.error("Error fetching metadata:", error);
      return null;
    }
  };
 
  useEffect(() => {
    if (!loadedNFTs) return;
 
    const loadSnapshots = async () => {
      const loadedSnapshots = await Promise.all(
        loadedNFTs.map(async loadedNft => {
          if (!loadedNft.metadata.name) return null;
          if (!loadedNft.metadata.uri) return null;
 
          const metadata = await fetchMetadata(loadedNft.metadata.uri);
          if (!metadata) return null;
 
          const { imageCID, description } = metadata;
          if (!imageCID || !description) return null;
 
          const unixTime = Number(description);
          if (isNaN(unixTime)) return null;
 
          return {
            uri: ipfsPrefix + imageCID,
            date: new Date(unixTime),
          } as NFTSnapshot;
        }),
      );
 
      // Filter out null values
      const cleanedSnapshots = loadedSnapshots.filter(
        (snapshot): snapshot is NFTSnapshot => snapshot !== null,
      );
 
      // Sort by date
      cleanedSnapshots.sort((a, b) => b.date.getTime() - a.date.getTime());
 
      setPreviousImages(cleanedSnapshots);
    };
 
    loadSnapshots();
  }, [loadedNFTs]);
 
  useEffect(() => {
    if (!nftOfTheDay) return;
 
    const fetchNftOfTheDayMetadata = async () => {
      try {
        if (!nftOfTheDay.metadata.uri) {
          console.error("No metadata URI found for nftOfTheDay");
          return;
        }
 
        const response = await fetchMetadata(nftOfTheDay.metadata.uri);
 
        if (!response?.imageCID) {
          console.error("No image found in nftOfTheDay metadata");
          return;
        }
 
        setCurrentImage({
          uri: ipfsPrefix + response.imageCID,
          date: todaysDate,
        });
      } catch (error) {
        console.error("Error fetching nftOfTheDay metadata:", error);
      }
    };
 
    fetchNftOfTheDayMetadata();
  }, [nftOfTheDay, todaysDate]);
  const mintNFT = async () => {
    const result = await ImagePicker.launchCameraAsync({
      mediaTypes: ImagePicker.MediaTypeOptions.Images,
      allowsEditing: true,
      aspect: [1, 1],
      quality: 1,
    });
 
    if (!result.canceled) {
      setCurrentImage({
        uri: result.assets[0].uri,
        date: todaysDate,
      });
 
      createNFT(
        formatDate(todaysDate),
        `${todaysDate.getTime()}`,
        result.assets[0].uri,
      );
    }
  };
 
  const handleNFTButton = async () => {
    if (!publicKey) {
      connect();
    } else if (loadedNFTs === null) {
      fetchNFTs();
    } else if (!nftOfTheDay) {
      mintNFT();
    } else {
      alert("All done for the day!");
    }
  };
 
  const renderNFTButton = () => {
    let buttonText = "";
    if (!publicKey) buttonText = "Connect Wallet";
    else if (loadedNFTs === null) buttonText = "Fetch NFTs";
    else if (!nftOfTheDay) buttonText = "Create Snapshot";
    else buttonText = "All Done!";
 
    if (isLoading) buttonText = "Loading...";
 
    return <Button title={buttonText} onPress={handleNFTButton} />;
  };
 
  const renderPreviousSnapshot = (snapshot: NFTSnapshot, index: number) => {
    const date = snapshot.date;
    const formattedDate = formatDate(date);
 
    return (
      <View key={index}>
        <Image source={snapshot} style={styles.carouselImage} />
        <Text style={styles.carouselText}>{formattedDate}</Text>
      </View>
    );
  };
 
  return (
    <View style={styles.container}>
      {/* Top Half */}
      <View style={styles.topSection}>
        <Text style={styles.titleText}>Mint-A-Day</Text>
        <Image source={currentImage} style={styles.imageOfDay} />
        {renderNFTButton()}
      </View>
 
      {/* Bottom Half */}
      <View style={styles.bottomSection}>
        <ScrollView horizontal contentContainerStyle={styles.carousel}>
          {previousImages.map(renderPreviousSnapshot)}
        </ScrollView>
      </View>
    </View>
  );
}