open-index/open-npm huggingface dataset:
npm package: @nft/chat
Description: Wallet to wallet chat widget
Latest version: 0.2.0

# Getting Started

This library aims to provide a component to be integrated into any DApp to let users chat with each other.
The chat is fully themeable, thanks to [ChakraUI](https://chakra-ui.com/).

You can find examples of integrations in the following:

- https://chat-liteflow.vercel.app/
- https://demo.liteflow.com/

### Installation

Install @nft/chat

```bash
npm i @nft/chat
```

### `ChatProvider`

Wrap your app with the `ChatProvider` component, passing your `ethers` signer to it.

```tsx
import { ChatProvider } from '@nft/chat'

function App() {
  const signer = useSigner()
  return <ChatProvider signer={signer}>{children}</ChatProvider>
}
```

#### Props

| name            | type                                                               | description                                                                                                             |
| --------------- | ------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------- |
| `signer`        | `Signer` (@ethersproject/abstract-signer)                          | An `ethers` signer representing the currently connected wallet                                                          |
| `lookupAddress` | `(address: string) => Promise<{ name?: string, avatar?: string }>` | **Optional**: Function to resolve an Ethereum address (think about ENS, Lens protocol...)                               |
| `onUserClick`   | `(address: string) => void`                                        | **Optional**: Function called every time an address/avatar is clicked within the chat                                   |
| `theme`         | `Dict` (@chakra-ui/utils)                                          | **Optional**: Theme to customize the look and feel of the chat https://chakra-ui.com/docs/styled-system/customize-theme |

### `Chat`

Now that your application is set up with the provider, you can place the chat component anywhere.
This component will have a dynamic size depending on the size of your container.

```tsx
import { Chat } from '@nft/chat'

function Page() {
  return <Chat />
}
```

#### Props

| name        | type     | description                                       |
| ----------- | -------- | ------------------------------------------------- |
| `recipient` | `string` | **Optional**: Address of the recipient to chat to |

You're good to go! Enjoy chatting in web3.
npm package: @nft/components
Description: List of components to use in any application. These components can be customized with a ChakraUI-based theme.
Latest version: 1.0.0-beta.8.1

# NFT 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}
    />
  )
}
```
npm package: @nft/templates
Description: List of templates to use in any application. These templates can be customized with a ChakraUI-based theme. These templates are meant to be used in a next application and support server side rendering.
Latest version: 1.0.0-beta.8.1

# NFT Templates

List of templates to use in any application. These templates can be customized with a ChakraUI-based theme.
These templates are meant to be used in a next application and support server side rendering.

## Installation

```
npm i @nft/templates
```

## Documentation

For more information about the different templates available and how to use them, check the storybook https://storybook-templates-liteflow.vercel.app/

## Quick Start

To get started with the templates 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 templates in your different pages.
Example:

```tsx
import { Home } from '@nft/templates'
import { NextPage } from 'next'

export const getServerSideProps = Home.server(
  'YOUR_LITEFLOW_GRAPHQL_ENDPOINT',
  ["xxx", "yyy"], // List of nft ids to highlight on the page
  12,
  ["aaa", "bbb", "ccc", ...], // List of NFTs to showcase in the featured section
)

const HomePage: NextPage<Home.Props> = ({
  featuredTokens,
  limit,
  now,
  tokens,
  currentAccount,
}) => {
  return (
    <Home.Template
      currentAccount={currentAccount}
      featuredTokens={featuredTokens}
      limit={limit}
      now={now}
      tokens={tokens}
      explorer={{
        name: "Etherscan",
        url: "https://etherscan.io",
      }}
    />
  )
}

export default HomePage
```