@style-protocol/sdk-asset-bridge-button

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

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

  npm install @style-protocol/sdk-asset-bridge-button

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

  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

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

     <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

     <BridgeButton
          connector={activeConnector}
          isNFT={true}
          name="STYLE Bridge Button"
        />

bridge NFT from specific collection

     <BridgeButton
          connector={activeConnector}
          isNFT={true}
          contractAddress='0x8CAe61967466eBBf15c12Dc802b29594bc04eFc6'
          name="STYLE Bridge Button"
        />

pre select an NFT

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