Quickstart

We provide four distinct npm packages that can be independently installed and utilized, giving developers the freedom to integrate precisely the functionality they need:

React-Modal

Install the React-Modal

The react-modal is supplied as a complete package and includes the required providers

npm install @tconnect.io/modal

This is a complete React component specifically crafted for blockchain wallet connections. It provides a ready-to-use interface that allows users to connect with supported wallets seamlessly. Once connected, it establishes a React context that enables developers to interact directly with blockchain functionalities. Think of it as a smart, pre-built gateway that simplifies the often complex process of wallet integration and blockchain interaction.

Etherlink Provider

Tezos Beacon Provider

Tezos Wallet Connect Provider

In our Quickstart documentation, we'll focus on demonstrating the usage of the react-modal as an introductory example. However, our comprehensive documentation will provide in-depth guidance for each package, ensuring developers can leverage the full potential of each component according to their specific project requirements.

Setup the React-Modal Provider

We recommend first providing the TConnectModalProvider.

// Import the TConnectModalProvider component for managing the TConnect modal
import { TConnectModalProvider } from "@tconnect.io/modal";
// Import the custom component to be rendered within the modal provider
import { MyComponent } from "./MyComponent";

export default function App() {
  return (
    // Wrap the application with TConnectModalProvider to configure and
    // enable the TConnect modal
    <TConnectModalProvider
      appName={"Example App"} // Name of the application
      appUrl={"https://your-domain.io"} // URL of the application
      bridgeUrl={"https://tconnect.io"} // Bridge URL for the TConnect service
      apiKey={"PRIVATE_API_KEY"} // API key for authenticating with TConnect
    >
      // Render the custom component within the TConnect provider
      <MyComponent />
    </TConnectModalProvider>
  );
}

Display the Wallet Connection React-Modal

Now, within the provider, in this example in MyComponent component, the openModal method can be called to display the modal for wallet selection.

// Import the useTConnectModal hook to interact with the TConnect modal
import { useTConnectModal } from "@tconnect.io/modal";

// Define a functional React component named MyComponent
export const MyComponent = () => {
  // Initialize the TConnect modal functionality using the custom hook
  const tConnect = useTConnectModal();

  return (
    // Render a button that triggers the TConnect modal when clicked
    <button onClick={tConnect.openModal}>open modal</button>
  );
};