Implement a blink client

Learn how you can implement an existing blink into your app.

Purpose of this guide is to teach you how to integrate an already existing blink into a blink client using the NextJS framework. You will learn how the client works and what additional configuration steps are needed.

This guide will not show you how to implement a blink into an other backend service or AI agent. It will not teach you how to build a new blink also. If you want to build a blink, please start with our tip blink guide.

Level: Beginner

Requirements: Basic understanding of TypeScript and NextJS

Prerequisite

Continuing from another tutorial?

If you have already finished one of our builder guides, you should have a running blink in a NextJS project by now. If that's the case, you can skip the setup section and continue with the implementation part.

Initial Setup

Start by setting up a new NextJS project and add some basic configuration.

Initialize the project

In your terminal, run the following command.

npx create-next-app@14 blink-starter-monad && cd blink-starter-monad

When prompted, configure your project with these settings:

✓ Ok to proceed? → Yes ✓ Would you like to use TypeScript? → Yes ✓ Would you like to use ESLint? → Yes ✓ Would you like to use Tailwind CSS? → Yes ✓ Would you like your code inside a src/ directory? → Yes ✓ Would you like to use App Router? → Yes ✓ Would you like to customize the import alias (@/* by default)? → No

Install extra packages

Run the following command to install missing dependencies.

npm install @dialectlabs/blinks wagmi viem@2.x connectkit @tanstack/react-query

Start development server

The development server is used to start a local test environment that runs on your computer. It is perfect to test and develop your blink, before you ship it to production.

npm run dev

Coding Time 🚀

Now that we have our basic setup finished, it's time to open the editor and start coding. Please note that this tutorial requires you to have a working Blink implementation. For simplicity, this tutorial continues with the Blink that was built in the Tip Blink guide, but you can also use another Blink from our library.

If you use a different Blink than the Tip Blink, simply replace the localhost:3000 link with your chosen Blink's URL, for example, Lulo (https://blink.lulo.fi/actions?amount=${amount}&symbol=USDC).

Implement the provider

The provider is necessary to trigger wallet actions in the blink.

Create monad.ts file

This file contains a minimum config for the monad blockchain.

It is very likely that this data will be added to the viem/chains package and become obsolete in the near future.

// file: src/monad.ts

import { defineChain } from "viem";

// Monad chain definition
export const monad = /*#__PURE__*/ defineChain({
  id: 10143,
  name: "Monad Testnet",
  nativeCurrency: { name: "Monad", symbol: "MON", decimals: 18 },
  rpcUrls: {
    default: {
      http: [process.env.NEXT_PUBLIC_RPC_URL as string],
    },
  },
  testnet: true,
});

Create config for wagmi provider

This file is used to set the proper configurations for the WagmiProvider in the next step.

// file: src/config.ts

import { http, createConfig } from "wagmi";
import { monad } from "@/monad";

// Wagmi config: only Monad
export const config = createConfig({
  chains: [monad],
  transports: {
    [monad.id]: http(),
  },
});

Create provider

Create the provider that we can use to wrap around our app. Don't forget to use the “use client”; at the top of the file if you are in a NextJS project.

// file: src/provider.tsx

"use client";

import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { ConnectKitProvider } from "connectkit";
import { type PropsWithChildren } from "react";
import { WagmiProvider } from "wagmi";
import { config } from "@/config";

// React Query client
const queryClient = new QueryClient();

// Providers are used to wrap the app in Wagmi and ConnectKit, see layout.tsx for more info
export const Providers = ({ children }: PropsWithChildren) => {
  return (
    <WagmiProvider config={config}>
      <QueryClientProvider client={queryClient}>
        <ConnectKitProvider>{children}</ConnectKitProvider>
      </QueryClientProvider>
    </WagmiProvider>
  );
};

Wrap the provider

If you want your provider to be accessible throughout your app, it is recommended to wrap it around the children element in your layout.tsx. 

// file: src/app/layout.tsx

// ... other imports

// Providers are used to wrap the app in Wagmi and ConnectKit
import { Providers } from "@/provider";

// ... other code 

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body>
        {/* Providers are used to wrap the app in Wagmi and ConnectKit */}
        <Providers>
          {children}
        </Providers>
      </body>
    </html>
  );
}

Implement the client

Now that we have everything wrapped, we can start with the implementation of the client.

To do so open the page.tsx file in your /src/app folder.

// file: src/app/page.tsx

"use client";

import {
  Blink,
  useAction,
  useActionsRegistryInterval,
} from "@dialectlabs/blinks";

import "@dialectlabs/blinks/index.css";

import { useEvmWagmiAdapter } from "@dialectlabs/blinks/hooks/evm";

import { useModal } from "connectkit";

export default function Home() {
  // Actions registry interval
  useActionsRegistryInterval();

  // ConnectKit modal
  const { setOpen } = useModal();

  // Wagmi adapter, used to connect to the wallet
  const { adapter } = useEvmWagmiAdapter({
    onConnectWalletRequest: async () => {
      setOpen(true);
    },
  });

  // Action we want to execute in the Blink
  const { action, isLoading } = useAction({
    url: "evm-action:http://localhost:3000/api/actions/tip-mon",
  });

  return (
   <main className="min-h-[calc(100vh-64px)] grid place-items-center">
      <div className="w-full max-w-[1200px] gap-4 p-4">
        <div className="flex items-center justify-center ">
          {isLoading || !action ? (
            <span>Loading</span>
          ) : (
            <div className="w-full max-w-lg">
              <Blink
                action={action}
                adapter={adapter}
                securityLevel="all"
                stylePreset="x-dark"
              />
            </div>
          )}
        </div>
      </div>
    </main>
  );
}

Make a transaction

That's been it. Your blink should be up an running. To test it, visit localhost:3000 and click on a button or enter a custom amount that you want to donate.

Conclusion

In this guide, you have learned, how you can implement a blink client. The client serves as the user interface of the blink, that can be implemented in a website or app. You also learned that implementing a blink into a client only requires a link, not more. It is important to note that the blink doesn't have to be developed by yourself. There is already a huge library of blinks available these days, which you can discover on dial.to and use in your app.

This also means that if you want to implement a Jupiter swap functionality into your website, you don't have to implement it from scratch using their SDK or API. Instead you can just use the blink client and initiate it with their blink.

PreviousCreate a tip blinkNextBlink Scaffold Monad

Last updated

Was this helpful?