React-Modal

Wallet Connection React-Modal

t:connect provides a built-in Wallet Connection React-Modal, developed in React, that simplifies the process of connecting users via supported wallets to Tezos and Etherlink. Leveraging React Provider and Hook technology, this ready-to-use modal component facilitates state management and enables seamless integration into the component tree. Developers can easily embed it into their Telegram Mini App, allowing users to securely and effortlessly connect their wallets.

Features of the Wallet Connection React-Modal

• User-Friendly Interface: An intuitive UI that guides users through the wallet connection process.

• Multi-Chain Support: Supports both Tezos and Etherlink, offering flexibility for various applications.

• Multiple Wallet Options: Compatible with a range of wallets like Altme, MetaMask, Trust Wallet, and more.

• Secure Authentication: Ensures that user credentials and private keys remain secure during the connection.

The TConnectModalProvider

The TConnectModalProvider has eight properties:

// API-key to get access to our service
apiKey: string; 

Wondering how to obatin an api key? see: Getting Started

// The URL used to establish a connection
bridgeUrl: string;

Note that the bridgeUrlparameter must always be set to "https://tconnect.io", as this is the hosted location of the bridge.

// Name of your application
appName: string;

// The Url of your application
appUrl: string;

// Optional URL for the application icon
appIcon?: string;

// Optional array to specify which networks to filter or allow
// Default: etherlink and tezos 
networkFilter?: Array<'etherlink' | 'tezos'>;

// Optional configuration for the Tezos Beacon network
// Default: Ghostnet
tezosBeaconNetwork?: TezosBeaconNetwork;

// Optional configuration for the Tezos WalletConnect network
// Default: Ghostnet
tezosWcNetwork?: TezosWcNetwork;

// Optional configuration for the Tezos WalletConnect network
// Default: Ghostnet
etherlinkNetwork?: EtherlinkNetworkType;

The TConnectModal Hook

// function to open the modal
openModal: () => void;

// function to close the modal
closeModal: () => void;

// the etherlink Provider
etherlinkProvider: TConnectEtherlinkProvider | undefined;

// the tezos-beacon Provider
tezosBeaconProvider: TConnectTezosBeaconProvider | undefined;

// the Tezos WalletConnect Provider
tezosWcProvider: TConnectTezosWcProvider | undefined;

// true if successfully connected
connected: boolean;

How to use the Wallet Connection React-Modal

1

npm install @tconnect.io/modal

2

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>
  );
}

3

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>
  );
};

React-Modal Workflow

1

Blockchain Selection

The modal first provides the option to choose the blockchain to be used. The user can select between Tezos and Etherlink.

2

Wallet Selection

After selecting the Blockchain, the user is prompted to choose a wallet. The list of available wallets is automatically filtered based on the previously chosen blockchain.

3

Wallet Connection Execution

Once a wallet is selected, the user is redirected to the wallet and prompted to authorize the connection.

4

Connection Established

After a successful connection, the modal closes, and the developer gets the provider from the modal hook.

5

Disconnection

If connection is established, you can open the modal and disconnect.