add initial services for loading nfts

.env.example

@@ -0,0 +1,4 @@
+SESSION_SECRET=fill_me
+SHYFT_API_KEY=fill_me
+WALLET_NETWORK=devnet
+WALLET_ADDRESS=fill_me

app/components/products/ProductCard.tsx

@@ -0,0 +1,50 @@
+import { HeartIcon, ShareIcon } from '@heroicons/react/20/solid'
+import React from 'react'
+
+import type { Product } from '~/models/product';
+
+import Avatar from '../ui/Avatar';
+
+type ProductCardProps = {
+  product: Product
+}
+
+const avatarImg = 'https://avatars.githubusercontent.com/u/2154886?s=40&v=4'
+
+const ProductCard: React.FC<ProductCardProps> = ({
+  product,
+}) => {
+  return (
+    <article className="rounded-lg border border-gray-200 bg-white shadow dark:border-gray-700 dark:bg-slate-900">
+      <a href={`/product/${product.id}`}>
+        <img className="rounded-t-lg" src={product.imageSrc} alt={product.imageAlt} />
+      </a>
+      <div className="flex w-full items-center justify-between space-x-6 p-3 pb-0">
+        <div className="flex-1">
+          <div className="flex items-center space-x-3">
+            <h3 className="text-base font-semibold text-dark-gray dark:text-dark">
+              {product.name}
+            </h3>
+          </div>
+        </div>
+        <div className="flex flex-row">
+          <HeartIcon className="m-2 h-5 w-5 text-dark-gray dark:text-dark" aria-hidden="true" />
+          <ShareIcon className="m-2 h-5 w-5 text-dark-gray dark:text-dark" aria-hidden="true" />
+        </div>
+      </div>
+      <div className="flex w-full items-center justify-between space-x-6 p-3">
+        <Avatar img={product.authorImg || avatarImg} name={product.authorName || 'Author'} details={product.authorUsername || '@jdnichollsc'} />
+        <div className="pt-3">
+          <h2 className="text-sm font-medium text-gray-700 dark:text-medium group-hover:text-gray-900">
+            $ {product.price}
+          </h2>
+          <p className="text-xs font-medium text-gray-500 group-hover:text-gray-700">
+
+          </p>
+        </div>
+      </div>
+    </article>
+  )
+}
+
+export default ProductCard

app/components/ui/Avatar.tsx

@@ -1,7 +1,9 @@
 import clsx from 'clsx'
-import {
+import type {
   HTMLAttributes,
   PropsWithChildren,
+} from 'react'
+import {
   forwardRef,
 } from 'react'
 
@@ -55,4 +57,6 @@ const Avatar = forwardRef<HTMLDivElement, AvatarProps>(
   }
 )
 
+Avatar.displayName = 'Avatar'
+
 export default Avatar

app/config/security.ts

@@ -2,21 +2,48 @@ const localDomains = process.env.NODE_ENV === 'development' ? '127.0.0.1:* local
 const domains = 'https://*.concertx.com https://*.githubusercontent.com';
 const envDomains = [domains, localDomains].filter(Boolean).join(' ');
 
-export const ContentSecurityPolicy = `
-  default-src 'self' data: blob:;
-  script-src 'self' 'unsafe-inline' data: blob: ${envDomains};
+export function replaceNewLinesWithSpaces(str: string) {
+  return str.replace(/\s{2,}/g, ' ').trim();
+}
+
+export const defaultSrc = replaceNewLinesWithSpaces(`
+  https://*.shyft.to
+`);
+
+export const scriptSrc = replaceNewLinesWithSpaces(`
+  ${defaultSrc}
+`);
+
+export const frameSrc = replaceNewLinesWithSpaces(`
+  ${defaultSrc}
+`);
+
+export const connectSrc = replaceNewLinesWithSpaces(`
+  ${defaultSrc}
+`);
+
+export const imgSrc = replaceNewLinesWithSpaces(`
+  ${defaultSrc}
+  https://*.genesysgo.net
+  https://arweave.net
+  https://*.arweave.net
+`);
+
+export const contentSecurityPolicy = replaceNewLinesWithSpaces(`
+  default-src 'self' data: blob: ${defaultSrc};
+  script-src 'self' 'unsafe-inline' data: blob: ${envDomains} ${scriptSrc};
   style-src 'self' 'unsafe-inline' https://fonts.googleapis.com https://rsms.me;
   object-src 'none';
   base-uri 'self';
-  connect-src 'self' ${envDomains} ;
+  connect-src 'self' ${envDomains} ${connectSrc};
   font-src 'self' data: https://rsms.me https://fonts.gstatic.com;
-  frame-src 'self';
-  img-src 'self' data: blob: ${domains};
+  frame-src 'self' ${frameSrc};
+  img-src 'self' data: blob: ${domains} ${imgSrc};
   manifest-src 'self';
   media-src 'self' blob: ${domains};
   worker-src 'self' blob:;
   form-action 'self';
-`;
+`);
 
 export const securityHeaders: Record<string, string> = {
   // X-DNS-Prefetch-Control
@@ -32,5 +59,5 @@ export const securityHeaders: Record<string, string> = {
   // Referrer-Policy
   'Referrer-Policy': 'origin-when-cross-origin',
   // Content Security Policy
-  'Content-Security-Policy': ContentSecurityPolicy.replace(/\s{2,}/g, ' ').trim(),
+  'Content-Security-Policy': contentSecurityPolicy,
 };

app/constants/api.ts

@@ -0,0 +1,2 @@
+export const SHYFT_API_URL = 'https://api.shyft.to';
+

app/constants/index.ts

@@ -1,3 +1,5 @@
 export * from './links';
 export * from './navigation';
 export * from './theme';
+export * from './api';
+export * from './wallet';

app/constants/wallet.ts

@@ -0,0 +1,2 @@
+export const WALLET_ADDRESS = '7qNz946ZsxAkdwA6uX3U2J1PKeabaDw8EPWDvEMD4yUs';
+export const MINT_USDC = '4zMMC9srt5Ri5X14GAgXhaHii3GnPAEERYPJgZJDncDU';

app/env.server.ts

@@ -1,8 +1,9 @@
-// import { apiUrl } from '~/utils/misc.server';
+import { shyftApiKey, walletNetwork } from '~/utils/misc.server';
 
 export function getEnv() {
   return {
-    // API_URL: apiUrl,
+    WALLET_NETWORK: walletNetwork,
+    SHYFT_API_KEY: shyftApiKey,
   };
 }
 

app/hooks/index.ts

@@ -2,3 +2,4 @@ export * from './useScroll'
 export * from './useForwardedRef'
 export * from './useTruncate'
 export * from './useSolanaWallet'
+export * from './nfts';

app/hooks/nfts/index.ts

@@ -0,0 +1,3 @@
+export * from './useGetAllNFTs';
+export * from './useFindMarketplace';
+export * from './useCreateMarketplace';

app/hooks/nfts/useActiveListings.ts

@@ -0,0 +1,38 @@
+import axios from 'axios';
+import { useQuery } from '@tanstack/react-query';
+
+import { SHYFT_API_URL } from '~/constants';
+import { canUseDOM } from '~/utils/dom';
+
+export type UseActiveListings = {
+  network: string;
+  marketplaceAddress: string;
+};
+
+export const useActiveListings = ({ network, marketplaceAddress }: UseActiveListings) => {
+  const { data, refetch, status } = useQuery({
+    queryKey: ['marketplace_list', marketplaceAddress],
+    queryFn: async () => {
+      const url = new URL('/sol/v1/marketplace/active_listings', SHYFT_API_URL);
+      url.searchParams.append('network', network);
+      url.searchParams.append('marketplace_address', marketplaceAddress);
+      const res = await axios.get(url.toString(), {
+        headers: {
+          'x-api-key': window.ENV.SHYFT_API_KEY,
+        },
+      })
+      return res.data
+    },
+    enabled: !!marketplaceAddress && canUseDOM,
+    retry: true,
+    retryDelay: (attemptIndex: number) =>
+      Math.min(800 * 2 ** attemptIndex, 5000),
+    refetchIntervalInBackground: true,
+  });
+
+  return {
+    status,
+    data,
+    refetch,
+  };
+};

app/hooks/nfts/useCreateMarketplace.ts

@@ -0,0 +1,41 @@
+import axios from 'axios';
+import { useMutation } from '@tanstack/react-query';
+
+import { MINT_USDC, SHYFT_API_URL, WALLET_ADDRESS } from '~/constants';
+import { queryClient } from '~/utils/query';
+
+export type UseCreateMarketplace = {
+  network: string;
+  transactionFee?: number;
+  creatorWallet?: string;
+  currencyAddress?: string;
+};
+
+export const useCreateMarketplace = ({
+  network,
+  transactionFee = 10,
+  creatorWallet = WALLET_ADDRESS,
+  currencyAddress = MINT_USDC
+}: UseCreateMarketplace) => {
+  const { status, mutate } = useMutation({
+    mutationFn: () => {
+      const url = new URL('/sol/v1/marketplace/create', SHYFT_API_URL);
+      return axios.post(url.toString(), {
+        network,
+        transaction_fee: transactionFee,
+        creator_wallet: creatorWallet,
+        currency_address: currencyAddress
+      }, {
+        headers: {
+          'x-api-key': window.ENV.SHYFT_API_KEY,
+        },
+      })
+    },
+    onSettled: () => queryClient.invalidateQueries({ queryKey: ['marketplace', creatorWallet] }),
+  })
+
+  return {
+    status,
+    create: mutate,
+  };
+};

app/hooks/nfts/useFindMarketplace.ts

@@ -0,0 +1,51 @@
+import axios from 'axios';
+import { useQuery } from '@tanstack/react-query';
+
+import { MINT_USDC, SHYFT_API_URL, WALLET_ADDRESS } from '~/constants';
+import { canUseDOM } from '~/utils/dom';
+
+export type UseFindMarketplaceProps = {
+  network: string;
+  address?: string;
+  currencyAddress?: string;
+};
+
+export const useFindMarketplace = ({
+  network,
+  address = WALLET_ADDRESS,
+  currencyAddress = MINT_USDC
+}: UseFindMarketplaceProps) => {
+  const { data, refetch, status } = useQuery({
+    queryKey: ['marketplace', address],
+    queryFn: async () => {
+      const url = new URL('/sol/v1/marketplace/my_markets', SHYFT_API_URL);
+      url.searchParams.append('network', network);
+      // url.searchParams.append('creator_address', address);
+      // url.searchParams.append('currency_address', currencyAddress);
+      console.log('SHYFT_API_URL', url.toString(), window.ENV.SHYFT_API_KEY)
+      try {
+        const res = await axios.get(url.toString(), {
+          headers: {
+            'x-api-key': window.ENV.SHYFT_API_KEY,
+            'Access-Control-Allow-Origin': '*',
+          },
+        })
+        console.warn('UseFindMarketplaceProps', res.data)
+        return res.data
+      } catch (error) {
+        return null
+      }
+    },
+    enabled: !!address && canUseDOM,
+    retry: true,
+    retryDelay: (attemptIndex: number) =>
+      Math.min(800 * 2 ** attemptIndex, 5000),
+    refetchIntervalInBackground: true,
+  });
+
+  return {
+    status,
+    data,
+    refetch,
+  };
+};

app/hooks/nfts/useGetAllNFTs.ts

@@ -0,0 +1,37 @@
+import axios from 'axios';
+import { useQuery } from '@tanstack/react-query';
+
+import { SHYFT_API_URL } from '~/constants';
+import { canUseDOM } from '~/utils/dom';
+
+export type UseGetAllNFTsProps = {
+  address: string;
+};
+
+export const useGetAllNFTs = ({ address }: UseGetAllNFTsProps) => {
+  const { data, refetch, status } = useQuery({
+    queryKey: ['nft_read_all', address],
+    queryFn: async () => {
+      const url = new URL('/sol/v1/nft/read_all', SHYFT_API_URL);
+      url.searchParams.append('network', 'mainnet-beta');
+      url.searchParams.append('address', address);
+      const res = await axios.get(url.toString(), {
+        headers: {
+          'x-api-key': window.ENV.SHYFT_API_KEY,
+        },
+      })
+      return res.data
+    },
+    enabled: !!address && canUseDOM,
+    retry: true,
+    retryDelay: (attemptIndex: number) =>
+      Math.min(800 * 2 ** attemptIndex, 5000),
+    refetchIntervalInBackground: true,
+  });
+
+  return {
+    status,
+    data,
+    refetch,
+  };
+};

app/hooks/nfts/useListNFT.ts

@@ -0,0 +1,45 @@
+import axios from 'axios';
+import { useMutation } from '@tanstack/react-query';
+
+import { SHYFT_API_URL } from '~/constants';
+import { queryClient } from '~/utils/query';
+
+export type UseListNFT = {
+  network: string;
+  marketplaceAddress: string;
+  sellerWallet: string;
+};
+
+export type ListNFT = {
+  nftAddress: string;
+  price: number;
+}
+
+export const useListNFT = ({
+  network,
+  marketplaceAddress,
+  sellerWallet,
+}: UseListNFT) => {
+  const { status, mutate } = useMutation({
+    mutationFn: ({ price, nftAddress }: ListNFT) => {
+      const url = new URL('/sol/v1/marketplace/list', SHYFT_API_URL);
+      return axios.post(url.toString(), {
+        network,
+        nft_address: nftAddress,
+        marketplace_address: marketplaceAddress,
+        price: price,
+        seller_wallet: sellerWallet,
+      }, {
+        headers: {
+          'x-api-key': window.ENV.SHYFT_API_KEY,
+        },
+      })
+    },
+    onSettled: () => queryClient.invalidateQueries({ queryKey: ['marketplace_list', marketplaceAddress] }),
+  })
+
+  return {
+    status,
+    listNFT: mutate,
+  };
+};