open-index/open-npm huggingface dataset:
npm package: @0xflair/ipfs
Description: A typescript (and Node.js) library to upload, retrieve and pin files and directories to IPFS decentralized storage network.
Latest version: 0.123.2
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# Flair SDK: `ipfs`

A typescript (and Node.js) library to upload, retrieve and pin files and directories to IPFS decentralized storage network.

## Getting Started

### Installation

Install the package using NPM or Yarn:

   ```sh
   npm install @0xflair/ipfs

   // or

   yarn add @0xflair/ipfs
   ```
npm package: @0xflair/react-coingecko
Description: React hooks to get prices of cryptocurrency coins and tokens from CoinGecko.
Latest version: 0.123.2
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# Flair SDK: `react-coingecko`

React hooks to get prices of cryptocurrency coins and tokens from CoinGecko.

## Getting Started

### Installation

1. Install the package:

   ```sh
   npm install @0xflair/react-coingecko
   ```

2. Install peer dependencies:

   ```sh
   npm install axios

   # if visual components needed:
   npm install tailwindcss @headlessui/react @heroicons/react @tailwindcss/aspect-ratio
   ```

3. Configure `tailwind.config.js` (Tailwind v3) to scan SDK for classes (if visual components needed):

   ```javascript
   module.exports = {
     purge: [
       "./public/**/*.html",
       "./src/**/*.{js,jsx,ts,tsx,vue}",

       // This line tells Tailwind to look into SDK files
       "./node_modules/@0xflair/**/*.{js,jsx,ts,tsx,vue}",
     ],
     content: ["./src/**/*.{js,jsx,ts,tsx}"],
     plugins: [
       // These plugins are used in this package
       require("@tailwindcss/forms"),
       require("@tailwindcss/aspect-ratio"),
     ],
   };
   ```

4. Configure the React provider:

   ```ts
   const cryptoPricesConfig = {
     coinGecko: {
       apiKey: "xxxx",
       symbols: ["ethereum", "matic-network"],
     },
   };

   const App = () => {
     return (
       <div className="app">
         <CoinGeckoProvider config={cryptoPricesConfig}>
           <HookExample />
         </CoinGeckoProvider>
       </div>
     );
   };
   ```

### Usage

#### Simple Price

```tsx
import { CryptoPrice, CryptoUnits } from "@0xflair/react-coingecko";

function App() {
  return (
    <>
      <CryptoPrice value='0.06' unit={CryptoUnits.ETHER} />
    </>
  );
```

#### Price Hook

```tsx
import { useCryptoPrice } from "@0xflair/react-coingecko";

function App() {
  const [{data, error, loading}, fetchPrice] = useCryptoPrice({
    symbol: 'ethereum'
  });

  return (
    <ul>
        <li>Price of Ether: {data.usd} USD</li>
        <li>Loading: {loading ? 'Yes...' : 'Idle'}</li>
        <li>Error: {error}</li>
    </ul>
  );
```
npm package: @0xflair/react-icons
Description: A package that exports useful Web3 icons and assets as react components.
Latest version: 0.123.2
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# Flair SDK: `react-icons`

A package that exports useful Web3 icons and assets as react components.

## Getting Started

### Installation

1. Install the package:

   ```sh
   npm install @0xflair/react-icons
   ```
npm package: @0xflair/react-ipfs
Description: React components and hooks to work with IPFS. This library uses Flair's APIs to upload and pin the file to IPFS, but the file will not be stored on the backend.
Latest version: 0.123.2
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# Flair SDK: `react-ipfs`

React components and hooks to work with IPFS. This library uses Flair's APIs to upload and pin the file to IPFS, but the file will not be stored on the backend.

## Getting Started

### Installation

1. Install the package:

   ```sh
   npm install @0xflair/react-ipfs
   ```

2. Install peer dependencies:

   ```sh
   npm install axios

   # if visual components needed:
   npm install tailwindcss @headlessui/react @heroicons/react @tailwindcss/aspect-ratio
   ```

3. Configure `tailwind.config.js` (Tailwind v3) to scan SDK for classes (if visual components needed):

   ```javascript
   module.exports = {
     purge: [
       "./public/**/*.html",
       "./src/**/*.{js,jsx,ts,tsx,vue}",

       // This line tells Tailwind to look into SDK files
       "./node_modules/@0xflair/**/*.{js,jsx,ts,tsx,vue}",
     ],
     content: ["./src/**/*.{js,jsx,ts,tsx}"],
     plugins: [
       // These plugins are used in this package
       require("@tailwindcss/forms"),
       require("@tailwindcss/aspect-ratio"),
     ],
   };
   ```

### Usage

#### IPFS Uploader Hook

```tsx
import { useIpfsFileUploader } from "@0xflair/react-ipfs";

function App() {
  const [userFile, serUserFile] = useState<File>();
  const [{
    data: ipfsUrl,
    error: ipfsError,
    loading: ipfsLoading
  }, ipfsUpload] = useIpfsFileUploader({
    autoUpload: true,
    fromFile: userFile,
  });

  return (
    <ul>
      <li>Choose file: <input type="file" value={userFile} onChange={setUserFile} /></li>
      <li>IPFS Loading: {ipfsLoading ? 'Yes...' : 'Idle'}</li>
      <li>IPFS Error: {ipfsError?.message || ipfsError?.toString()}</li>
    </ul>
  );
```
npm package: @0xflair/react-openzeppelin
Description: Ready-made React hooks on top of OpenZeppelin smart contracts. This library is built on top of amazing [wagmi](https://wagmi.sh).
Latest version: 0.123.2
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# Flair SDK: `react-openzeppelin`

Ready-made React hooks on top of OpenZeppelin smart contracts. This library is built on top of amazing [wagmi](https://wagmi.sh).

## Getting Started

### Installation

```sh
npm install @0xflair/react-openzeppelin
```

The dependencies:

- `ethers`: ^5.6.5
- [`wagmi`](https://wagmi.sh): ^0.3.5

## Hooks

#### `useOzHasRole`

Check if a certain address has a specific Openzeppelin's AccessControl role or not.

```ts
import { keccak256, toUtf8Bytes } from "ethers/lib/utils";
import { useOzHasRole } from "@0xflair/react-openzeppelin";

const { data, error, isLoading } = useOzHasRole({
  // You contract address that is using Openzeppelin's AccessControl
  contractAddress: "0x111111111111111111111111111111",

  // The address to check if it has the role or not
  address: "0x222222222222222222222222222222",

  // The role hash you want to check
  role: keccak256(toUtf8Bytes("MINTER_ROLE")),
});
```

#### `useOzRoleGranter`

Assign a certain role to a specific address.

#### `useOzRoleRenouncer`

Renounce a certain role from an already granted address.

#### `useOzOwner`

Check if a certain address is owner based on Openzeppelin's Ownable.

## Missing something?

This library is a work in progress and we'll be adding new hooks as we need them. If there's a method you want to see as a simple hook feel free to open an issue or better create a PR :)
npm package: @0xflair/react-wallet
Description: Ready-made drop-in web3 wallet React components and hooks.
Latest version: 0.123.2
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# Flair SDK: `react-wallet`

Ready-made drop-in web3 wallet React components and hooks.

## Getting Started

### Installation

1. Install the package:

   ```sh
   npm install @0xflair/react-wallet
   ```

2. Install peer dependencies:

   ```sh
   npm install ethers wagmi-core tailwindcss @headlessui/react @heroicons/react @tailwindcss/aspect-ratio
   ```

3. Configure `tailwind.config.js` to scan SDK for classes:

   ```javascript
   module.exports = {
     purge: [
       "./public/**/*.html",
       "./src/**/*.{js,jsx,ts,tsx,vue}",

       // This line tells Tailwind to look into SDK files
       "./node_modules/@0xflair/**/*.{js,jsx,ts,tsx,vue}",
     ],
     content: ["./src/**/*.{js,jsx,ts,tsx}"],
     plugins: [
       // These plugsins are used in this package
       require("@tailwindcss/forms"),
       require("@tailwindcss/aspect-ratio"),
     ],
   };
   ```

4. Configure the React provider:
   TODO

### Usage

```ts
import { NetworkSelector } from "@0xflair/react-wallet";

function App() {
  return (
    <>
        Your network: <NetworkSelector />
    </>
  );
```