Implement AH example that covers AH creation, list and direct buy

auction-house/.eslintignore

@@ -0,0 +1,4 @@
+**/.next/*
+**/.vscode/*
+**/node_modules/*
+**/*.js

auction-house/.eslintrc

@@ -0,0 +1,26 @@
+{
+  "plugins": ["@typescript-eslint"],
+  "extends": [
+    "airbnb",
+    "airbnb/hooks",
+    "airbnb-typescript",
+    "next/core-web-vitals",
+    "plugin:@typescript-eslint/recommended",
+    "prettier"
+  ],
+  "parserOptions": {
+    "project": "./tsconfig.json"
+  },
+  "rules": {
+    "@typescript-eslint/no-unused-vars": "error",
+    "@typescript-eslint/no-explicit-any": "error",
+    "react/jsx-props-no-spreading": 0,
+    "react/require-default-props": 0,
+    "react/function-component-definition": [
+      "error",
+      {
+        "namedComponents": ["function-declaration", "arrow-function"]
+      }
+    ]
+  }
+}

auction-house/.gitignore

@@ -0,0 +1,36 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

auction-house/.prettierrc

@@ -0,0 +1,7 @@
+{
+  "semi": false,
+  "trailingComma": "es5",
+  "singleQuote": true,
+  "tabWidth": 2,
+  "useTabs": false
+}

auction-house/.vscode/settings.json

@@ -0,0 +1,7 @@
+{
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": true
+  },
+  "editor.formatOnSave": true,
+  "editor.defaultFormatter": "esbenp.prettier-vscode"
+}

auction-house/README.md

@@ -0,0 +1,87 @@
+# Auction House usage example
+
+In this example, we will see how to use [Auction House](https://docs.metaplex.com/programs/auction-house/overview) program using the [Metaplex JS SDK](https://github.com/metaplex-foundation/js).
+
+Once the user has connected their wallet, we display input for the Auction House address and allow the user to create their own Auction House marketplace.
+
+This is achieved by using AuctionHouse context from `./context/AuctionHouse.tsx`.
+
+**Auction House context**
+
+The `./context/AuctionHouse.tsx` file is responsible for creating and exposing a new Auction House Context which will be used within our components to access the Auction House SDK.
+
+It gives the ability to create an auction house.
+
+  ```ts
+  const response = await client.create({
+    sellerFeeBasisPoints: 200, // 2% Fee
+  })
+  ```
+
+To fetch the user's auction house.
+
+  ```ts
+  const userAuctionHouse = await client.findByCreatorAndMint({
+    creator: toPublicKey(wallet.publicKey),
+    treasuryMint: WRAPPED_SOL_MINT,
+  })
+  ```
+
+To load auction house by address.
+
+  ```ts
+  const userAuctionHouse = await client.findByAddress({
+    address: ahAddress,
+  })
+  ```
+
+**Assets Loading hook**
+
+The `./hooks/useAssets.tsx` file is responsible to fetch the user's NFTs and SFTs that can be then listed in the auction house.
+
+  ```ts
+  // Finds and loads user's assets.
+  const userAssetsMetadata = await fetchAssetsMetadata() // todo: JS SDK method as it will be developed
+  if (!userAssetsMetadata) {
+    return
+  }
+
+  const promises: Promise<LoadMetadataOutput>[] = []
+  userAssetsMetadata.forEach((metadata) => {
+    if (isMetadata(metadata)) {
+      promises.push(client.load({ metadata }))
+    }
+  })
+
+  const userAssets = await Promise.all(promises)
+  ```
+
+
+**Listings Loading hook**
+
+The `./hooks/useListings.tsx` file is responsible to fetch the user's listings or listings of a given user in the current auction house.
+
+  ```ts
+  // Finds and loads listings from auction house.
+  const lazyListings = seller
+    ? await client.findListings({
+        auctionHouse,
+        seller
+      })
+    : await client.findListings({
+        auctionHouse
+      })
+
+  if (!lazyListings) {
+    return
+  }
+
+  // Fetch listing for lazy listings
+  const fetchedListings = await Promise.all(
+    lazyListings.map((listing) =>
+      !listing.lazy
+        ? Promise.resolve(listing)
+        : client.loadListing({ lazyListing: listing })
+    )
+  )
+  ```

auction-house/components/ArtworkCard/index.tsx

@@ -0,0 +1,112 @@
+import { Avatar, Box, BoxProps, Flex, Image, Text } from '@chakra-ui/react'
+import { isSft, Listing, LoadMetadataOutput } from '@metaplex-foundation/js'
+import React from 'react'
+
+import formatPrice from 'utils/formatPrice'
+
+interface Props extends BoxProps {
+  artwork: LoadMetadataOutput
+  listing?: Listing
+}
+
+const ArtworkCard: React.FC<Props> = ({
+  artwork,
+  listing,
+  children,
+  ...boxProps
+}) => {
+  const { name } = artwork
+  const imageSrc = artwork.json?.image
+  const tokenType = isSft(artwork) ? 'SFT' : 'NFT'
+
+  return (
+    <Box
+      layerStyle="base"
+      p={0}
+      overflow="hidden"
+      w="full"
+      maxW="full"
+      {...boxProps}
+      role="group"
+      transition="transform 100ms ease-in-out"
+      _hover={{
+        transform: 'translateY(-2px)',
+      }}
+      cursor="pointer"
+      borderRadius="xl"
+      backgroundColor="#292929"
+    >
+      <Box layerStyle="base" p={0}>
+        <Box
+          borderRadius="xl"
+          transition="background 100ms ease-in-out"
+          _groupHover={{
+            bg: 'rgba(255, 255, 255, 0.02)',
+          }}
+        >
+          <Image
+            pos="relative"
+            _groupHover={{
+              zIndex: -1,
+              filter: 'none',
+            }}
+            src={imageSrc}
+            objectFit="cover"
+            w="full"
+            h="360px"
+            filter="drop-shadow(0px 0px 24px rgba(0, 0, 0, 0.2))"
+            borderRadius="xl"
+            alt="NFT"
+          />
+        </Box>
+
+        <Box p={4}>
+          <Flex alignItems="center">
+            <Avatar
+              size="2xs"
+              borderRadius="2px"
+              src="https://bit.ly/kent-c-dodds"
+            />
+          </Flex>
+
+          <Flex flexDirection="row" justifyContent="space-between">
+            <Text
+              mt={4}
+              fontSize="2xl"
+              fontWeight="bold"
+              textTransform="capitalize"
+              color="white"
+            >
+              {name}
+            </Text>
+
+            <Text
+              mt={4}
+              fontSize="2xl"
+              fontWeight="bold"
+              textTransform="capitalize"
+              color="white"
+            >
+              {tokenType}
+            </Text>
+          </Flex>
+        </Box>
+      </Box>
+      {listing && (
+        <Text
+          mt={4}
+          fontSize="2xl"
+          fontWeight="bold"
+          textTransform="capitalize"
+          textAlign="start"
+          padding="2px 10px 10px 5px"
+          color="white"
+        >
+          {formatPrice(listing)}
+        </Text>
+      )}
+    </Box>
+  )
+}
+
+export default ArtworkCard

auction-house/components/NavBar/index.tsx

@@ -0,0 +1,45 @@
+import React from 'react'
+import { Box, Button, Flex, Text } from '@chakra-ui/react'
+import { WalletMultiButton } from '@solana/wallet-adapter-react-ui'
+import { useAuctionHouse } from '../../context/AuctionHouse'
+
+const NavBar: React.FC = () => {
+  const { auctionHouse, handleAuctionHouseDisconnect } = useAuctionHouse()
+
+  return (
+    <Box flexGrow={1}>
+      <Flex
+        flexDirection="row"
+        justifyContent="space-between"
+        alignItems="start"
+      >
+        <Box marginTop="20px">
+          <WalletMultiButton />{' '}
+        </Box>
+        {auctionHouse && (
+          <>
+            <Text
+              mt={5}
+              fontSize="xl"
+              fontWeight="bold"
+              textTransform="capitalize"
+              color="white"
+            >
+              {`Auction House Address: ${auctionHouse.address.toBase58()}`}
+            </Text>
+            <Button
+              colorScheme="purple"
+              size="md"
+              mt={5}
+              onClick={handleAuctionHouseDisconnect}
+            >
+              Disconnect from Auction House
+            </Button>
+          </>
+        )}
+      </Flex>
+    </Box>
+  )
+}
+
+export default NavBar