osGallery

2024-08-29

ethOS is the world's first Ethereum operating system. It's an open source project so anyone can contribute and build dApps for their dApp store. I bought a Pixel 7a last year and installed ethOS on it using their web installer.

Recently I've been on a bit of a career hiatus, so I took an evening out to build an Expo Android app that would use the ethOS SDK to display a gallery of the NFTs in the ethOS system wallet.

The app is really simple, just one screen that leverages the React Native flat list component to display the NFTs. I retrieve the address using the ethOS SDK, and then use Alchemy to retrieve the NFTs in the wallet. Then for each NFT, you can click into it and a bottom sheet opens up with some more details. I used the React Native Bottom Sheet package for that. Here's the function for retrieving the NFTs from Alchemy:

const address = ExpoWalletsdk.getAddress();

// with pagination, this gets rate limited if not on paid tier and more than a few 100 NFTs
const fetchNfts = async (
  chainId = null,
  pageKey = null,
  accumulatedNfts = []
) => {
  const chainParam = chainId || chain;
  const baseUrl = CHAIN_URLS[chainParam];

  let url = '${baseUrl}/${ALCHEMY_API_KEY}/getNFTsForOwner?owner=${address}&withMetadata=true&pageSize=100`;
  if (pageKey) {
    url += `&pageKey=${pageKey}`;
  }

  try {
    const response = await fetch(url, {
      method: "GET",
      headers: {
        accept: "application/json",
      },
    });

    const data = await response.json();

    const allNfts = [...accumulatedNfts, ...(data.ownedNfts || [])];

    if (data.pageKey) {
      return fetchNfts(chainId, data.pageKey, allNfts);
    } else {
      setNfts(allNfts);
    }
  } catch (err) {
    console.error(err);
    setNfts([]);
  }
};

Check out the code for the app at my Github in this repo. Also you can watch a screen recording of how it looks on my ethOS device for my wallet here.

FCTwitterZora
© 2024