Skip to main content

Integrate Tiplink Wallet Adapter

Introduction​

The Tiplink Wallet Adapter is a wallet adapter that allows you to sign up/log in to dApps using your Google account. This guide will show you how to use the Tiplink Wallet Adapter with Honeycomb Protocol.

Prerequisites​

You will need a valid Client ID from TipLink. You can get this by contacting the TipLink team through their officially-listed channels on the TipLink website.

Also, before starting this guide, make sure to setup your development environment.

Step by step guide​

note

This is just a sample integration of the TipLink Wallet Adapter. You can find more detailed and latest instructions in the official guide from TipLink.

1. Installing required packages​

To get started with the TipLink Wallet Adapter, you need to install the required packages from TipLink. You can do so using NPM or Yarn.

npm i @tiplink/wallet-adapter @tiplink/wallet-adapter-react-ui

Then, in the setup of your frontend application, add the TipLink Wallet Adapter like so.

// previous imports
import { TipLinkWalletAdapter } from "@tiplink/wallet-adapter";

// remaining code

const wallets = useMemo(
    () => [
      new TipLinkWalletAdapter({
        title: "Name of Dapp",
        clientId: "694bf97c-d2ac-4dfc-a786-a001812658df", // This is the client ID you get from TipLink
        theme: "dark", // pick between "dark"/"light"/"system"
      }),
    ],
    [network]
  );
// ...

Lastly, wrap your app in the TipLinkWalletAutoConnectV2 component and provide it the required props.

const [searchParams, setSearchParams] = useSearchParams();

  return (
    <ConnectionProvider endpoint={endpoint}>
      <WalletProvider wallets={wallets} autoConnect>
         // The TipLink provider component
       <TipLinkWalletAutoConnectV2 isReady={true} query={searchParams}> 
            <WalletModalProvider>
                <WalletMultiButton />
                <h1>Hello Solana</h1>
            </WalletModalProvider>
        </TipLinkWalletAutoConnectV2>
      </WalletProvider>
    </ConnectionProvider>
  );

The overall setup should like like this.

import { useMemo } from "react";
import { useSearchParams } from "react-router-dom";
import {
  ConnectionProvider,
  WalletProvider,
} from "@solana/wallet-adapter-react";
import {
  PhantomWalletAdapter,
  SolflareWalletAdapter,
} from "@solana/wallet-adapter-wallets";
import {
  WalletModalProvider,
  WalletMultiButton,
} from "@solana/wallet-adapter-react-ui";
import { TipLinkWalletAdapter } from "@tiplink/wallet-adapter";
import { TipLinkWalletAutoConnectV2 } from "@tiplink/wallet-adapter-react-ui";
import "./App.css";

// Default styles that can be overridden by your app
import "@solana/wallet-adapter-react-ui/styles.css";

function App() {
  // The network can be set to 'devnet', 'testnet', or 'mainnet-beta'.
  const network = "https://rpc.test.honeycombprotocol.com";
  // You can also provide a custom RPC endpoint.
  const endpoint = useMemo(() => network, [network]);

  const wallets = useMemo(
    () => [
      // Manually define specific/custom wallets here
      new PhantomWalletAdapter(),
      new SolflareWalletAdapter(),
      // Add the TipLink Wallet Adapter
      new TipLinkWalletAdapter({
        title: "Name of Dapp",
        clientId: "694bf97c-d2ac-4dfc-a786-a001812658df", // This is the client ID you get from TipLink
        theme: "dark", // pick between "dark"/"light"/"system"
      }),
    ],
    [network]
  );

const [searchParams, setSearchParams] = useSearchParams();

  return (
    <ConnectionProvider endpoint={endpoint}>
      <WalletProvider wallets={wallets} autoConnect>
       <TipLinkWalletAutoConnectV2 isReady={true} query={searchParams}>
            <WalletModalProvider>
                <WalletMultiButton />
                <h1>Hello Solana</h1>
            </WalletModalProvider>
        </TipLinkWalletAutoConnectV2>
      </WalletProvider>
    </ConnectionProvider>
  );
}

export default App;

That's it! You have successfully integrated the TipLink Wallet Adapter with Honeycomb Protocol.

You can get the wallet object using the useWallet hook and use it to sign and send transactions.