@crossmint/connect
TypeScript icon, indicating that this package has built-in type declarations

0.11.0-alpha.1 • Public • Published

@crossmint/connect

Embed the Crossmint wallet directly in your app

Build from Source

  1. Clone the project:
git clone https://github.com/Crossmint/connect.git
  1. Install dependencies:
cd connect

yarn install
  1. Build all packages:
yarn build

Run the example locally

  1. Link @crossmint/connect from the root /connect:
yarn link
  1. Link from inside the example folder:
cd example

yarn link "@crossmint/connect"
  1. Install deps:
yarn install
  1. Run the nextjs app:
yarn dev

Solana Wallet Adapter Example

The CrossmintSolanaWalletAdapter is fully compatible with @solana/wallet-adapter and can be dropped into place like so:

import React, { FC, useMemo } from 'react';
import { ConnectionProvider, WalletProvider } from '@solana/wallet-adapter-react';
import { WalletAdapterNetwork } from '@solana/wallet-adapter-base';
import { FakeWalletAdapter } from '@solana/wallet-adapter-wallets';
import {
    WalletModalProvider,
    WalletDisconnectButton,
    WalletMultiButton
} from '@solana/wallet-adapter-react-ui';
import { clusterApiUrl } from '@solana/web3.js';

import {CrossmintSolanaWalletAdapter} from "@crossmint/connect"

// Default styles that can be overridden by your app
require('@solana/wallet-adapter-react-ui/styles.css');

export const Wallet: FC = () => {
    // The network can be set to 'devnet', 'testnet', or 'mainnet-beta'.
    const network = WalletAdapterNetwork.Devnet;

    // You can also provide a custom RPC endpoint.
    const endpoint = useMemo(() => clusterApiUrl(network), [network]);

    const wallets = useMemo(
        () => [
            new CrossmintSolanaWalletAdapter({})
        ],
        []
    );

    return (
        <ConnectionProvider endpoint={endpoint}>
            <WalletProvider wallets={wallets} autoConnect>
                <WalletModalProvider>
                    <WalletMultiButton />
                    <WalletDisconnectButton />
                </WalletModalProvider>
            </WalletProvider>
        </ConnectionProvider>
    );
};

EVM Wallet Connect Example

The following is an example of connecting to a user's Crossmint Ethereum account using the CrossmintEVMWalletAdapter

import {
  BlockchainTypes,
  CrossmintEnvironment,
  CrossmintEVMWalletAdapter,
} from "@crossmint/connect";

import { useState } from "react";

export default function YourCustomConnectButton() {
  const [address, setAddress] = useState<string | undefined>(undefined);

  async function connectToCrossmint() {
    // Initialize the Crossmint connect.
    const _crossmintConnect = new CrossmintEVMWalletAdapter({
      chain: BlockchainTypes.ETHEREUM, // BlockchainTypes.ETHEREUM || BlockchainTypes.POLYGON. For solana use BlockchainTypes.SOLANA
    });

    // Ask the user to sign in and give access to their publicKey
    const address = await _crossmintConnect.connect();

    // If the user successfully connects to Crossmint, the address will be returned.
    if (address) {
      setAddress(address);
    }
  }

  return (
    <button
      onClick={connectToCrossmint}
      className="px-6 py-2 font-semibold text-black bg-white rounded-md"
    >
      {address ? address.slice(0, 6) + "..." : "Connect"}
    </button>
  );
}

Readme

Keywords

none

Package Sidebar

Install

npm i @crossmint/connect

Weekly Downloads

81

Version

0.11.0-alpha.1

License

Apache-2.0

Unpacked Size

93.2 kB

Total Files

28

Last publish

Collaborators

  • devlyn-paella
  • manishpaella
  • alberto-crossmint
  • afeight
  • pegidopaella
  • pascualino
  • alfonso_paella
  • maxwellfortney