Merge branch 'main' into feature/limit-sdk-based-on-api-config

docs/hooks/README.md

@@ -1,3 +1,3 @@
-# NFT Hooks
+# React Hooks
 
-This package is a collection of hooks used to help you streamline the usual actions of an NFT Marketplace.
+This package is a collection of react hooks used to help you streamline the usual actions of an NFT Marketplace.

docs/pages/_meta.json

@@ -1,4 +1,8 @@
 {
   "index": "Introduction",
-  "hooks": "NFT Hooks"
+  "graphql-api": "GraphQL API",
+  "hooks": "React Hooks",
+  "components": "UI Components",
+  "templates": "UI Templates",
+  "starter-kit": "Starter Kit"
 }

docs/pages/components/README_symlink.md

@@ -0,0 +1,77 @@
+# UI Components
+
+List of components to use in any application. These components can be customized with a ChakraUI-based theme.
+
+## Installation
+
+```
+npm i @nft/components
+```
+
+## Documentation
+
+For more information about the different components available and how to use them, check the storybook https://storybook-components-liteflow.vercel.app/
+
+## Quick Start
+
+To get started with the components library you need to ensure that your application adds wraps the `LiteflowNFTApp` components.
+Here is an example with a next application.
+
+```tsx
+import LiteflowNFTApp from '@nft/components'
+import { InjectedConnector } from '@web3-react/injected-connector'
+import type { AppProps } from 'next/app'
+import { theme } from '../styles/theme'
+
+function MyApp({ Component, pageProps }: AppProps): JSX.Element {
+  return (
+    <LiteflowNFTApp
+      ssr={typeof window === 'undefined'}
+      endpointUri={'YOUR_LITEFLOW_GRAPHQL_ENDPOINT'}
+      cache={pageProps[APOLLO_STATE_PROP_NAME]}
+      user={pageProps.user}
+      connectors={{
+        injected: new InjectedConnector({
+          supportedChainIds: [1],
+        }),
+      }}
+      theme={theme}
+    >
+      <Component {...pageProps} />
+    </LiteflowNFTApp>
+  )
+}
+export default MyApp
+```
+
+Once this is done you can include any components in your different pages.
+Example:
+
+```tsx
+import { TokenCard } from '@nft/components'
+
+export default function Home() {
+  return (
+    <TokenCard
+      asset={{
+        id: 'xxx',
+        image: 'https://xxx',
+        name: 'xxx',
+        standard: 'ERC721',
+        unlockedContent: undefined,
+        animationUrl: undefined,
+      }}
+      creator={{
+        address: '0x',
+        name: 'xxx',
+        image: 'https://xxx',
+        verified: undefined,
+      }}
+      auction={undefined}
+      hasMultiCurrency={false}
+      numberOfSales={0}
+      sale={undefined}
+    />
+  )
+}
+```

docs/pages/components/_meta.json

@@ -0,0 +1,11 @@
+{
+  "index": "Installation",
+  "list": {
+    "title": "List of components",
+    "href": "https://storybook-components-liteflow.vercel.app/",
+    "newWindow": true
+  },
+  "README_symlink": {
+    "display": "hidden"
+  }
+}

docs/pages/components/index.md

@@ -0,0 +1,7 @@
+---
+title: 'Installation'
+---
+
+import Readme from './README_symlink.md'
+
+<Readme />

docs/pages/graphql-api/_meta.json

@@ -0,0 +1,8 @@
+{
+  "index": "Introduction",
+  "reference": {
+    "title": "Reference",
+    "href": "https://graphdoc.io/doc/v5BuCnGrcvcIkdLh",
+    "newWindow": true
+  }
+}

docs/pages/graphql-api/index.mdx

@@ -0,0 +1,17 @@
+---
+title: 'Introduction'
+---
+
+## GraphQL API
+
+Liteflow provides a dedicated GraphQL API for your application.
+
+GraphQL is a query language for APIs and a runtime for fulfilling those queries with your existing data. GraphQL provides a complete and understandable description of the data in your API, gives clients the power to ask for exactly what they need and nothing more, makes it easier to evolve APIs over time, and enables powerful developer tools.
+
+More information about GraphQL on https://graphql.org/
+
+### Playground
+
+GraphQL APIs have an easy learning curve and can be easily testable with a playground that lets you explore and test the API.
+
+[Contact us to get access to the playground](https://meetings.hubspot.com/alan364/liteflow-discovery-call)

docs/pages/hooks/_meta.json

@@ -1,4 +1,5 @@
 {
+  "index": "Installation",
   "LiteflowProvider": "LiteflowProvider",
   "useAcceptAuction": "useAcceptAuction",
   "useAcceptOffer": "useAcceptOffer",

docs/pages/hooks/index.mdx

@@ -0,0 +1,172 @@
+---
+title: 'Introduction'
+---
+
+# React Hooks
+
+This is the documentation for the Liteflow's hooks. This package contains a set of React Hooks that facilitates the creation of your own NFT Marketplace.
+
+## Before installation
+
+To use the `@nft/hooks` package you will need an app with React version `17`.
+
+## Installation
+
+```bash
+npm i @nft/hooks
+```
+
+## Quick Start
+
+This quick start showcase examples using [Next.js](https://nextjs.org/docs/getting-started).
+
+### 1. Include your favorite web3 provider
+
+Your application is relying on a web3 wallet. Please refer to your preferred web3 provider for the setup. Our example is using RainbowKit and Wagmi but here are a few providers tested and supported:
+
+- [WAGMI](https://wagmi.sh/)
+- [Web3React](https://github.com/Uniswap/web3-react)
+- [RainbowKit](https://www.rainbowkit.com/)
+
+### 2. Wrap app with `LiteflowProvider`, `AccountProvider` and a Web3 provider.
+
+1. Wrap your app with a Web3 provider (in this case `RainbowKitProvider` and `WagmiConfig`) and their configurations.
+
+2. Inside the Web3 provider, wrap your app with the `LiteflowProvider` and pass your Liteflow API endpoint to its `endpoint` property (similar to `https://api.acme.com/graphql`).
+
+3. Inside the `LiteflowProvider` wrap the rest of the app with the `AccountProvider` provider.
+
+```tsx
+import { LiteflowProvider, useAuthenticate } from '@nft/hooks'
+import {
+  ConnectButton,
+  getDefaultWallets,
+  RainbowKitProvider,
+} from '@rainbow-me/rainbowkit'
+import '@rainbow-me/rainbowkit/styles.css'
+import { AppProps } from 'next/app'
+import { PropsWithChildren } from 'react'
+import {
+  chain,
+  configureChains,
+  createClient,
+  useAccount,
+  useDisconnect,
+  WagmiConfig,
+} from 'wagmi'
+import { publicProvider } from 'wagmi/providers/public'
+
+const { chains, provider } = configureChains(
+  [chain.polygonMumbai], // Change to the chain used by your marketplace
+  [publicProvider()],
+)
+
+const { connectors } = getDefaultWallets({ appName: 'Test', chains })
+
+const wagmiClient = createClient({
+  autoConnect: true,
+  connectors,
+  provider,
+})
+
+function AccountProvider(props: PropsWithChildren) {
+  const [authenticate, { setAuthenticationToken, resetAuthenticationToken }] =
+    useAuthenticate()
+  const { disconnect } = useDisconnect()
+  useAccount({
+    async onConnect({ address, connector }) {
+      // check if user is already authenticated, not only if its wallet is connected
+      if (
+        localStorage.getItem('authorization.address') === address &&
+        localStorage.getItem(`authorization.${address}`)
+      ) {
+        // since the user is already authenticated we can autoconnect
+        setAuthenticationToken(localStorage.getItem(`authorization.${address}`))
+        // TODO: should check the expiration date of the jwt token to make sure it's still valid
+        return
+      }
+
+      // authenticate user
+      const signer = await connector.getSigner()
+      authenticate(signer)
+        .then(({ jwtToken }) => {
+          localStorage.setItem('authorization.address', address)
+          localStorage.setItem(`authorization.${address}`, jwtToken)
+          console.log('user authenticated')
+        })
+        .catch((error) => {
+          console.error(error)
+
+          // disconnect wallet on error
+          disconnect()
+        })
+    },
+    onDisconnect() {
+      // remove authorization and authentication data
+      const address = localStorage.getItem('authorization.address')
+      localStorage.removeItem(`authorization.${address}`)
+      localStorage.removeItem('authorization.address')
+      resetAuthenticationToken()
+    },
+  })
+
+  return <>{props.children}</>
+}
+
+function MyApp({ Component, pageProps }: AppProps): JSX.Element {
+  return (
+    <WagmiConfig client={wagmiClient}>
+      <RainbowKitProvider chains={chains} coolMode>
+        <LiteflowProvider endpoint="https://api.acme.com/graphql">
+          <AccountProvider>
+            <ConnectButton />
+            <Component {...pageProps} />
+          </AccountProvider>
+        </LiteflowProvider>
+      </RainbowKitProvider>
+    </WagmiConfig>
+  )
+}
+
+export default MyApp
+```
+
+### 3. You're all set!
+
+Every component inside your App has now access to Liteflow's hooks.
+
+```tsx
+import { Signer, TypedDataSigner } from '@ethersproject/abstract-signer'
+import { useCreateOffer } from '@nft/hooks'
+import { BigNumber } from 'ethers'
+import { useCallback } from 'react'
+import { useSigner } from 'wagmi'
+
+export default function Home() {
+  const { data: signer } = useSigner()
+  const [_create] = useCreateOffer(
+    signer as (Signer & TypedDataSigner) | undefined,
+  )
+  const assetId =
+    '80001-0x7c68c3c59ceb245733a2fdeb47f5f7d6dbcc65b3-60249402084937876423066029128237587855293854847399126863606291191289075471730'
+
+  const create = useCallback(async () => {
+    const amount = parseFloat(prompt('amount in USDC'))
+    const id = await _create({
+      type: 'BUY',
+      assetId,
+      currencyId: '80001-0x0fa8781a83e46826621b3bc094ea2a0212e71b23', // USDC on Polygon Mumbai
+      expiredAt: new Date(Date.now() + 1000 * 60 * 60),
+      quantity: BigNumber.from(1),
+      unitPrice: BigNumber.from(amount * 1e6),
+    })
+    alert(id)
+  }, [_create])
+
+  return <>{signer && <a onClick={create}>Create offer</a>}</>
+}
+```
+
+Check out the [minimal app repo](https://github.com/liteflow-labs/minimal-app/) to see this example in a working app.
+
+Want to learn more about the hooks? Check out the [hooks docs](./hooks).