npm package: @style-protocol/sdk-asset-bridge-button
Description: Anyone can now use NFTs and Collectibles in the metaverse.
Author: DevMuneeb
Latest version: 1.0.0


# SDK-Asset-Bridge-Button

Anyone can now use NFTs and Collectibles in the metaverse.

This component is a wrapper for the popular react component react-select made using the UI library Chakra UI.

## Installation

### Install peer dependencies 

wagmi + ethers / chakra ui

```bash
npm i wagmi ethers@^5
npm i @chakra-ui/react @emotion/react @emotion/styled framer-motion
```

Install @style-protocol/sdk-asset-bridge-button with npm

```bash
  npm install @style-protocol/sdk-asset-bridge-button
```
Install @style-protocol/sdk-asset-bridge-button with yarn

```bash
  yarn add @style-protocol/sdk-asset-bridge-button
```
## Usage/Examples

In order to use this package, you'll need to have @chakra-ui/react and wagmi  set up as like in the guide in their offical  docs


### minimal setup

```javascript
import React from 'react';
import ReactDOM from 'react-dom/client';

import {
  createClient,
  configureChains,
  mainnet,
  WagmiConfig,
  goerli,
} from 'wagmi';
import { publicProvider } from 'wagmi/providers/public';
import { MetaMaskConnector } from 'wagmi/connectors/metaMask';
import { polygon, polygonMumbai } from '@wagmi/chains';

import { Button, ChakraProvider, Flex } from '@chakra-ui/react';
import { useAccount, useConnect } from 'wagmi';
import { BridgeButton } from '@style-protocol/sdk-asset-bridge-button';

function App() {
  const { connector: activeConnector } = useAccount();
  const { connectors } = useConnect();

  return (
    <ChakraProvider>
      <Flex
        minH="100vh"
        justifyContent="center"
        alignItems="center"
        flexDirection="column"
        gap={4}
      >
        {connectors.map((con) => {
          return (
            <Button
              onClick={() => {
                con.connect();
              }}
            >
              {con.name}
            </Button>
          );
        })}
        {activeConnector && (
          <BridgeButton
            connector={activeConnector}
          />
        )}
      </Flex>
    </ChakraProvider>
  );
}

const { provider, chains } = configureChains(
  [mainnet, goerli, polygon, polygonMumbai],
  [publicProvider()]
);

const client = createClient({
  autoConnect: true,
  provider,
  connectors: [
    new MetaMaskConnector({
      chains,
    }),
  ],
});

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <WagmiConfig client={client}>
      <App />
    </WagmiConfig>
  </React.StrictMode>
);
```

### bridge your custom image asset
```javascript
     <BridgeButton
          connector={activeConnector}
          isNFT={false}
          asset={{
            name: 'loream asset',
            customImageUrl:
              'https://fastly.picsum.photos/id/10/2500/1667.jpg?hmac=J04WWC_ebchx3WwzbM-Z4_KC_LeLBWr5LZMaAkWkF68',
          }}
          name="STYLE Bridge Button"
        />
```
### bridge NFT in your wallet 
```javascript
     <BridgeButton
          connector={activeConnector}
          isNFT={true}
          name="STYLE Bridge Button"
        />
```

### bridge NFT from specific collection
```javascript
     <BridgeButton
          connector={activeConnector}
          isNFT={true}
          contractAddress='0x8CAe61967466eBBf15c12Dc802b29594bc04eFc6'
          name="STYLE Bridge Button"
        />
```


### pre select an  NFT
```javascript
     <BridgeButton
          connector={activeConnector}
          isNFT={true}
          asset={{
            contractAddress: '0x8CAe61967466eBBf15c12Dc802b29594bc04eFc6',
            name: 'Chungos #1',
            imageUrl:
              'ipfs://bafybeifokemovozgkzdswmj2exrljppk27cfkfs6jhsv4cevyunl5kcpfq/1.png',
            //mandatory
            tokenId:
              '0x0000000000000000000000000000000000000000000000000000000000000001',
          }}
          name="STYLE Bridge Button"
        />
```