Using DeLab Connect with Next.js

Recently I've seen a release of an awesome repository enabling single-page React apps to seamlessly integrate authentication with a number of TON wallets.

Kudos to DeLab team ❤️
https://github.com/delab-team/connect

I plan to record a video soon where I will go into more detail on when this is a good lib to use and when we should go with the standard "per-wallet" authentication approach. Subscribe to my Telegram channel if you don't want to miss it https://t.me/markokhmandev

Because I'm using Next.js for most of my web projects, I've run into some issues using DeLab Connect. However, a single React hook solves those issues. This hook makes sure that we are importing the DeLab Connect only on the client side. Furthermore, our hook has an interface (connectInfo and callbacks) to interact with the DeLab Connect instance.

Before we get to the hook's code, let's do some preparation. You will need to prepare the delab's module before passing it to Next.js. For this you need two things:

• Install next-transpile-modules:

yarn add next-transpile-modules

• Replace default next.config.js with following code:

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  swcMinify: true,
};
const withTM = require("next-transpile-modules")(["@delab-team/connect"]); // pass the modules you would like to see transpiled
module.exports = withTM(nextConfig);

Now we are good to go with the Hook's code:

You can place this hook anywhere in your project (ex. /shared/hooks/useDeLabConnect.ts) and then import it on your page.

How do we use it?

Inside of our page component we are placing the use of our hook:

 const { DeLabConnector, DeLabModal, DeLabButton } = useDeLab({
    connectInfo: {
      url: "https://example.com",
      name: "Example",
      network: "testnet",
    },
    callbacks: {
      onConnect: async (event: DeLabEvent) => handleConnect(event),
      onDisconnect: () => {
        console.log("disconect");
      },
      onErrorTransaction: (event: DeLabEvent) => handleErrorTransaction(event),
      // ... other callbacks handled in our hook
    },
  });

Our hook returns 3 important instances:
DeLabConnector - of type DeLabConnect, we will use this one to request transactions etc.
DeLabModal & DeLabButton - Elements, we will simply put them on the page

Here is a full example of our Next.js page using the useDeLabConnect.ts

That's it :) Let me know in comments, what you think about this.
And bro, please subscribe to my Telegram channel: https://t.me/markokhmandev