DEV Community: Anish De

Creating a Custom Solana Connect Wallet UI with React and Chakra UI

Anish De — Wed, 15 Feb 2023 09:44:00 +0000

If you have worked with the Solana Wallet Adapter before, you will know that it is very easy to set up a Connect Wallet button with a decent modal.

However, customization is pretty limited. We can only add some custom CSS hence changing the styles but that is about it. In this article, we go over the following:

Understanding how the @solana/wallet-adapter-react-ui package works
Using the @solana/wallet-adapter-react package to create a custom Connect Wallet page

You can check out the deployed version of what we are going to build here

Let's get started!

How does `@solana/wallet-adapter-react-ui` work?

If you go through the source code for the React UI package, then you will notice that it makes use of the useWallet hook from the @solana/wallet-adapter-react package. It also has the required components (buttons, modals, providers) and styling to be an easy-to-use library to implement a connect wallet feature.

The `useWallet` hook

The useWallet hook returns functions like select, connect, and disconnect to select a wallet, connect to the selected wallet, and disconnect from the connected wallet respectively. It also returns some variables - wallets which is a list of all wallets with their availability status, wallet which is the currently selected wallet, publicKey, connecting, connected, and disconnected telling us about the current connection status.

Using `@solana/wallet-adapter-react` to create a custom Connect Wallet UI

Let us start by creating a new Next.js project -

npx create-next-app solana-react-wallet-adapter-custom-ui-example --ts

It will ask you for some prompts, you can accept the defaults for this guide.

Now open up the project in your favorite IDE and open up the terminal. Then enter the following command to install the required dependencies -

npm i @solana/web3.js @solana/wallet-adapter-base @solana/wallet-adapter-react @solana/wallet-adapter-wallets

For this guide, I am going to be using Chakra UI for styling. To install the required dependencies for Chakra UI, run the following command -

npm i @chakra-ui/react @emotion/react @emotion/styled framer-motion

Now replace _app.tsx with the following -

import "@/styles/globals.css";
import type { AppProps } from "next/app";
import { ChakraProvider, extendTheme } from "@chakra-ui/react";
import {
  ConnectionProvider,
  WalletProvider,
} from "@solana/wallet-adapter-react";
import { useMemo } from "react";
import {
  GlowWalletAdapter,
  PhantomWalletAdapter,
  SolflareWalletAdapter,
  MathWalletAdapter,
} from "@solana/wallet-adapter-wallets";
import { clusterApiUrl } from "@solana/web3.js";

const theme = extendTheme({
  config: {
    initialColorMode: "dark",
  },
});

export default function App({ Component, pageProps }: AppProps) {
  const wallets = useMemo(
    () => [
      new PhantomWalletAdapter(),
      new SolflareWalletAdapter(),
      new GlowWalletAdapter(),
      new MathWalletAdapter(),
    ],
    []
  );

  const endpoint = useMemo(() => clusterApiUrl("mainnet-beta"), []);

  return (
    <ConnectionProvider endpoint={endpoint}>
      <ChakraProvider theme={theme}>
        <WalletProvider wallets={wallets} autoConnect>
          <Component {...pageProps} />
        </WalletProvider>
      </ChakraProvider>
    </ConnectionProvider>
  );
}

We are setting up the ConnectionProvider and WalletProvider from @solana/wallet-adapter-react with the default Solana mainnet RPC URL and 4 wallets - Phantom, Solflare, Glow and Math Wallet (this is to demonstrate how the wallets list includes the wallet availability status).

Now replace index.tsx with the following -

import { Container, Heading, VStack } from "@chakra-ui/react";
import { useWallet } from "@solana/wallet-adapter-react";

export default function Home() {
  const { wallets } = useWallet();

  console.log(wallets);

  return (
    <Container as="main" mt={32} maxW="3xl">
      <VStack w="full" gap={8}>
        <Heading textAlign="center">
          Solana React Wallet Adapter Custom UI demo with Chakra UI
        </Heading>
      </VStack>
    </Container>
  );
}

Run npm run dev and go to http://localhost:3000/ on your browser. Open up devtools and look at the console -

I have Backpack, Glow, Phantom, and Solflare installed so it shows up with a readyState of Installed. Note that Backpack, Glow and Phantom implement the Solana Wallet Adapter Standard and hence show up with StandardWalletAdapter for the adapter field. As I don't have Math Wallet, the readyState for Math Wallet is NotDetected.

Now make a components directory under src and make a Wallets.tsx file under that with the following code -

import { VStack, Button, Image, Text } from "@chakra-ui/react";
import { useWallet } from "@solana/wallet-adapter-react";

const Wallets = () => {
  const { select, wallets, publicKey, disconnect } = useWallet();

  return !publicKey ? (
    <VStack gap={4}>
      {wallets.filter((wallet) => wallet.readyState === "Installed").length >
      0 ? (
        wallets
          .filter((wallet) => wallet.readyState === "Installed")
          .map((wallet) => (
            <Button
              key={wallet.adapter.name}
              onClick={() => select(wallet.adapter.name)}
              w="64"
              size="lg"
              fontSize="md"
              leftIcon={
                <Image
                  src={wallet.adapter.icon}
                  alt={wallet.adapter.name}
                  h={6}
                  w={6}
                />
              }
            >
              {wallet.adapter.name}
            </Button>
          ))
      ) : (
        <Text>No wallet found. Please download a supported Solana wallet</Text>
      )}
    </VStack>
  ) : (
    <VStack gap={4}>
      <Text>{publicKey.toBase58()}</Text>
      <Button onClick={disconnect}>disconnect wallet</Button>
    </VStack>
  );
};

export default Wallets;

Now, replace index.tsx with the following -

import { Heading, VStack } from "@chakra-ui/react";
import dynamic from "next/dynamic";

const Wallets = dynamic(() => import("../components/Wallets"), { ssr: false });

export default function IndexPage() {
  return (
    <VStack gap={8} mt={16}>
      <Heading>Solana Custom Wallet UI example (Chakra UI)</Heading>

      <Wallets />
    </VStack>
  );
}

Notice that we have to import the Wallets component dynamically using next/dynamic or else you will be faced with a React hydration error.

The webpage should look like this now -

Note that it shows the wallets I have installed. You may have other wallets installed so it will show a different list. Notice how Math Wallet is not shown although I included the adapter. This is because we are filtering the wallets list making sure that readyState is Installed.

We can connect to a wallet simply by using the select method from useWallet. Note that select calls connect automatically. If the wallet is disconnected but a wallet is selected, we can call connect to connect to the currently selected wallet. The selected wallet state is persisted in the local storage. Note that calling disconnect removes the selected state as well but it is persisted between reloads and wallet locks.

Now if I click on any of these buttons, the wallet will pop up and ask me to connect. After connecting, the page should look like this -

Clicking "disconnect wallet" simply calls disconnect and the wallet is disconnected and the wallet state is removed from local storage.

Conclusion

This guide went through how @solana/wallet-adapter-react-ui and then went over how to create a Connect Wallet feature in your React application simply using @solana/wallet-adapter-react and Chakra UI.

Check out the GitHub Repository if you want to take a look at the final code for this guide. You can also check out the deployed version - https://solana-react-wallet-adapter-custom-ui-example.vercel.app/

Now you can try to extend this by creating a modal or a multi-button with a nice dropdown to disconnect or change the wallet just like how the official React UI package does it, but with your styles of course.

Medusa Webhooks: The Best Technical Project of the Medusa Hackathon

Anish De — Thu, 10 Nov 2022 11:57:55 +0000

Extensibility is one of the core features of Medusa, an open source headless ecommerce engine, and it has enabled developers to create plugins for Medusa. This infinitely increases the potential for what can be done with Medusa.

Webhooks are web requests that are triggered on certain events. They allow applications to communicate with each other easily. Medusa has great potential for using webhooks to communicate with other services, so I decided to build the Medusa Webhooks Plugin for the Medusa Hackathon during Hacktoberfest 2022.

This Webhooks Plugin allows you to add webhook triggers for order-related events on your store. The possibilities which can be achieved are endless. It can be anything from sending a confirmation email to the customer to airdropping them an NFT.

My Experience Working on This Project

I was able to learn a lot about the inner workings of Medusa when working on this project. It proved to be a great learning experience for me and an opportunity to make something for the community.

My Experience Creating the Plugin

Medusa has great documentation and guides for working with it. Although I had minor hiccups when creating the plugin, I was able to work my way out by looking at how the official plugins were implemented.

How I Created the Plugin

I started out by following the Create a Plugin guide for the plugin. I followed the Quickstart and Set Up Dev Environment guides to set up a local store for me to test my plugin. I also set up Medusa Admin and a Next.js storefront. While setting up the store, I also added the --seed flag, which added some dummy products to the store so that I didn’t have to add products manually. This process took only approximately 15 minutes.

I encountered some hiccups during the development process and that is when the Notifications Service Reference and a sneak peek at the implementations of the official plugins came in handy.

What Does the Webhook Plugin do?

The plugin lets you set up webhook triggers on order events (order being placed, cancelled, updated, or completed) in your store. For example, if you would like to send an email to the customer when they place an order successfully, you could set up an api route which sends out the email to the customer.

The plugin will send a request to this API route along with the order and customer data which can be used by your code in determining whom to send the email to along with what the message should contain.

You can also pass in headers to go along with the request. This is useful when you have to send a secret key for authentication. The default webhook URL and headers can also be overridden on an event basis.

The plugin service also exposes a postWebhook method that can be used to trigger webhooks from your custom code in the Medusa store.

Using the Plugin

Before trying to use the plugin, here are some things you must have.

Prerequisites

A Medusa server (Quickstart Guide)
Redis setup on your Medusa server (Configuring Redis on your Medusa server)
A webhook endpoint to which you can post webhooks (for testing purposes, I recommend using Svix Play)

Installing and Setting up the Webhooks Plugin

To install the plugin using NPM, run the following command in your Medusa server directory:

npm install medusa-plugin-webhooks

If you prefer using Yarn, run the following command in your Medusa server directory:

yarn add medusa-plugin-webhooks

Once the plugin is installed, we need to add it to the plugins array in the medusa-config.js file in your Medusa server directory:

const plugins = [
  ...{
    resolve: "medusa-plugin-webhooks",
    options: {
      webhook_url: "https://mystore.com/events", // REQUIRED: CHANGE THIS TO A VALID WEBHOOK ENDPOINT
      webhook_headers: {
        "x-api-key": "supersecretapikey", // OPTIONAL: You can add custom headers (for example, for authentication)
      },
      webhook_config: {
        "order.placed": {
          enabled: true,
          overrideUrl: "<https://mystore.com/events/order-placed>", // OPTIONAL: You can override the URL on a per-event basis,
          overrideHeaders: {
            "x-api-key": "supersecretorderplacedapikey", // OPTIONAL: You can override the headers on a per-event basis
          },
        },
      },
    },
  },
];

Currently, these four (4) events are supported:

order.placed
order.updated
order.completed
order.canceled

By default, notifications for all events are disabled. To enable notifications for any of the above events, set the enabled property to true in the webhook_config object (see example config above).

You can override the URL or headers for any of the above events by setting the overrideUrl or overrideHeaders properties in the webhook_config object (see example config above).

Triggering a Webhook Request from Your Custom Code

You can trigger a webhook request from your code by resolving the webhook service and then using the postWebhook function. For example:

const webhooksService = scope.resolve("webhooksService");
await webhooksService.postWebhook(
  {
    event: "order.placed",
    data: {
      order_id: "order_id",
      customer_id: "customer_id",
      total_price: 1000,
      currency_code: "USD",
    },
  },
  "mystore.com/events/custom", // OPTIONAL: You can pass in an URL override here as well
  {
    "x-api-key": "customeventsapikey", // OPTIONAL: You can pass in custom headers here as well
  }
);

Conclusion

Setting up this plugin is a quick and easy task. If you have any issues, feel free to open an issue on GitHub.

NPM Package - medusa-plugin-webhooks
GitHub Repository - AnishDe12020/medusa-plugin-webhooks

Should you have any issues or questions related to Medusa, then feel free to reach out to the Medusa team via Discord.

ThirdKudos: Appreciate other's work by giving then Kudos in the form of NFTs

Anish De — Wed, 26 Oct 2022 14:20:59 +0000

Thirdweb was holding the Solanathon and I decided to participate in it. I did not know what to build but I now have a project - ThirdKudos. ThirdKudos enables you to send kudos to anyone with a Solana Wallet. The kudo is in the form of a NFT. I used Thirdweb (specifically the new Solana SDK) to make this. I also used Thirdweb Auth to authenticate users on my application.

Challenges faced

Everything was working well until I deployed my app to production and realised that there was a 10 second timeout on serverless function (the transaction takes a little more time than that to finalize). I had to abstract all the code onto a separate backend (deployed on Fly right now).

If I had more time, then what can I have done?

A better UI (looks really prototype-y right now)
More functionality (a page to view kudos you have sent and received, more default kudo template, custom image for kudos, etc)
Better backend (it works but is half-done)
A logo, og images and stuff
A better writeup (I just typed whatever I had in my brain within 10 mins lol)

Thirdweb's role

Easy to use SDK for minting NFTs I did not have to write any smart contracts or even much of client side code (Metaplex stuff). I just initialized the SDK and called mintTo :)
Auth Provides a simple way to authenticate users. I was looking forward to use it to protect my backend API route as well (got it working locally) but then had some CORS issues and some issues with the cookies not being passed on (this contains the auth token)

Conclusion

Had a great time building, I feel like Thirdweb Auth has a lot of potential and seeing how established the Thirdweb EVM ecosystem is (and how it evolved from the first time I used it back in January for a hackathon, and won it :) ), the Solana ecosystem is destined to get bigger and make it easier for new developers to use the technology.

How to quickly create a Gasless NFT Collection on Solana with CandyPay

Anish De — Mon, 29 Aug 2022 12:38:40 +0000

Let's say you are an NFT creator and want to publish your NFT onto the Solana blockchain quickly. This can be time-consuming as it involves creating the collection, setting up a minting website, etc. It also requires you to be familiar with all the technologies and as a creator, you may not be familiar with all the development stuff.

That is where CandyPay comes in. CandyPay lets you create NFTs with a no-code builder and also lets users easily claim them via Solana Pay on mobile without worrying about installing any browser extension or connecting their wallet.

Additionally, we are going to be looking at gasless NFTs which do not cost any SOL to the receiver to claim. Instead, we, the creator of the NFT pre-pay the gas. Note that we can get back our SOL if any of the pre-paid SOL remains unused.

Prerequisites

All of these don't require you to pay any real money.

A Solana wallet with Solana pay support. You can use Phantom or Solflare, both of which are available for Android, iOS, and as a browser extension as well although you will need the mobile app for Solana pay.
An image to upload as an NFT (you can use anything for this as we are going to be doing it on the devnet anyways). I am going to be using this one, feel free to use it for this tutorial -

Some devnet SOL. You can get it from a Solana faucet (it is free and no signup is required)

Creating a Gasless NFT collection with CandyPay

First of all, we need to create a CandyPay account. Head over to the CandyPay web app and sign up for an account.

Next, select "Gasless Collection" under the "Create New" dropdown

Here, we have to provide some details about the NFT, and of course, the image itself. Here is an explanation of the various fields -

NFT Name (required) - The name of the NFT
NFT Description - You may want to add a description describing what the NFT is about, its importance, etc.
Wallet Address - Your Solana wallet address
Symbol - You can provide a symbol for your NFT. This is usually shown in marketplaces and wallet apps
Royalty Fee - For any subsequent sales after the first one, this much percent of the amount will be given to you as royalty
Collection size (required) - The number of NFTs the collection is going to have
External URL - Any URL which you want to associate with your NFT
Network - The Solana network you want to publish your collection to. When building a production app, you should choose "Mainnet" (and it will cost some real money in the form of real SOL to publish the collection and pre-pay the gas) but for the purpose of this tutorial, we are choosing "Devnet" (we are going to be using the devnet SOL we got from the faucet, which didn't cost us any real money)
NFT Image (required) - The image that will be used for the NFT

I have entered the values for these fields as follows -

Now click on "Continue". In the next page, we can customize our CandyPay QR code. This will be the QR Code that the receiver of the NFT will scan in order to get the NFT, so let us try to make it beautiful :)

I have changed some of the shapes, and also changed the black CandyPay logo to one with the CandyPay accent color :)

Now again click "Continue". In the next step, we have to pay some SOL to create the collection as well as the gas for the 10 NFTs. Note that we can redeem any unused funds later on.

Scan this QR Code with your mobile wallet app and you should see a Solana Pay popup. If you see an error in Phantom which looks like this, try using Solflare (in Solflare, it is a 2 step process and the UI is a little different but the result is the same) -

After scanning the QR Code, you should see something like this on your mobile wallet app -

Pay the devnet SOL and let the transaction succeed (shouldn't take more than 10 seconds). After that, you should see a success message in CandyPay -

On the collection dashboard, you will be able to see the QR code one can scan to redeem the NFT. There is a link as well which one can open on their phones to redeem the NFT.

Oh by the way, that QR code in the screenshot actually works so you can try to scan the QR code to get this NFT, until supply lasts of course.

Claiming an NFT using the CandyPay QR Code

If I now scan the QR Code, I will be prompted to confirm a transaction but notice that no SOL is getting deducted from my side, so it is gasless! (I had to do it with Solflare this time as Phantom errored out)

Now if I go back to the dashboard, I can see that 1 NFT has been redeemed (ignore the cancelled ones as it was just Phantom being buggy). The gas has been deducted as well!

For more clarity on if I had to pay gas or not, if I check the transaction on Solscan, under the "SOL Balance Change" tab, I can see that there was no change in my SOL balance.

Conclusion

Now it's time for you to ship your gasless NFT collections! Feel free to share them down below, really excited to see what y'all build :)

Important Links

CandyPay
CandyPay Discord Server (you can get support here)
Solana Pay

5 Modern CLI tools that help boost your productivity

Anish De — Sat, 13 Aug 2022 12:54:00 +0000

As developers, most of us use the terminal to interact with our computers for many tasks as we find it more productive. We are familiar with commands like ls, cd, cat, grep, and find. These are primarily pre-installed on our computers and mostly get the job done hence, we never consider looking for any alternatives.

But, today we are going to look at 5 alternatives that accomplish the same task but are more feature-rich, faster, and cleaner. Coincidentally, these are all written in the rust programming language.

`bat`

bat is a popular alternative for the cat command, just with a ton of more features. So, what are they?

Syntax highlighting

bat automatically provides syntax highlighting for all major programming languages.

Line numbers

This might not be a big one but bat shows line numbers, and I have found it extremely useful.

Search

We can use / and then enter a query (can be regex) to perform a search operation. This is similar to how it is done in vim, and yes, it supports vim keybindings like n to go to the next result and N to go to the previous result.

`zoxide`

zoxide behaves like cd at first glance but it has 1 feature which makes it a game-changer. How cool would it be if you did not have to specify the path to a directory every time you wanted to change into it? Zoxide stores paths in a db, and the next time you use it, you can just specify the directory name instead of the full path. Here it is in action (z is the default alias for zoxide) -

You can also use the zi command to interactively select previous paths using fzf -

`exa`

exa is a modern replacement for the ls command but with more features. First of all, it supports colors and icons (I have aliased ls to exa --icons --color=always) -

This makes distinguishing folders and files extremely easy and the icons are just a great touch. Also, the list view (pass in the -l to see it in the list view) is way cleaner.

Exa also comes with a handy tree feature -

Here, -T is for displaying it as a tree. The --git-ignore flag ignores files and folders mentioned in the .gitignore ignore file.

`fd`

fd is an alternative to the find command packed with features and is also extremely fast.

The first argument is the term we want to search and any other arguments after that will be directories to search in.

We can also specify an extension with the -e flag -

`ripgrep`

ripgrep is an alternative to the grep command and the main highlight is its speed. It also automatically ignores files specified in ignore files like .gitignore and .ignore.

Yes, that took just 20 milliseconds!

Ripgrep comes with many other features too, like searching in specific file types and searching inside zips.

Here, we can specify the file type using the -t flag.

BONUS: `tealdeer`

tealdeer is an alternative to the tldr tool. Both accomplish the same task, that is, showing community-driven help/man pages which are easier to read and understand than the traditional, detailed ones. Here is an example for exa -

Tealdeer installs as tldr and hence tldr is the command and not tealdeer.

Conclusion

I hope you have found this article useful and that it helped boost your productivity. You can leave any suggestions via comments or you can dm them to me on Twitter :)

Forgit and Lazygit. The 2 Git tools to supercharge your git workflow?

Anish De — Sat, 23 Jul 2022 16:42:43 +0000

Most of us use version control systems (mostly git) for our projects but the git CLI is unproductive. We often need to run multiple commands and got to type more characters.

Well, what if I told you there are tools that can improve this significantly. We are going to be looking at 2 tools today, forgit and lazygit. Both of these tools let us do many of our day-to-day git tasks, interactively and come with a LOT of keyboard shortcuts.

Forgit

Forgit, a simple and lightweight wrapper around git commands which uses fzf to provide interactivity to git commands (and some more goodies :D).

For example, this is how the ga (git add equivalent) looks like -

YES, that is a diff view!

Oh and it is not limited to just staging files, there are many more interactive commands (each with its own alias :D )

Want to explore all the previous git commits? Run glo -

Want to see the list of branches and checkout to the appropriate one? Use gcb -

And there are more! For a full list, you can see the features section in the forgit README

Lazygit

Lazygit on the other hand is a TUI written in Go and is crazy powerful. This is how it looks like -

Yeah those are a lot of panes indeed. Files can be staged/unstaged easily by pressing Space and pressing c brings up a modal for writing a commit message -

Once you are done writing the commit message, press Enter and the changes get committed :D

Oh and we can see a log of everything we do as well as any command output -

And for all of us who hate using the mouse (although lazygit has mouse support), there are a TON of keyboard shortcuts -

You can see look at some more things it can do (like resolving merge conflicts and interactive rebasing) in the lazygit README.

Conclusion

So, which one should you use? This depends on your use case and how you want to use the tools.

I personally use the git CLI, forgit, lazygit, and the vscode source control panel depending on what I'm doing. I always use lazygit inside neovim but when I am using vscode, it is mostly forgit and the git CLI (I rarely use the source control pane).

Make a beautiful Connect Wallet Button with RainbowKit and React

Anish De — Sun, 15 May 2022 11:14:17 +0000

Authentication in Web3 is extremely easy but supporting all the wallets and making a nice UI can be painful and time-consuming. Thankfully, there are many libraries which makes this extremely easy as well. Today we are going to be looking at adding RainbowKit to a React App.

What is RainbowKit?

RainbowKit is a React library that provides us with components to build a Connect Wallet UI in a few lines of code. It comes with support for many wallets, including Metamask, Rainbow, Coinbase Wallet, WalletConnect, and many more. It is also extremely customizable and comes with an amazing built-in theme.

RainbowKit uses Ethers.js and Wagmi, both popular libraries in this space, under the hood.

Also, it is developed by the same team behind the beautiful Rainbow Wallet

Creating a new Next.js App

Run the following command to create a new Next.js app (note that you can use it on a regular React app too) -

# With NPM
npx create-next-app rainbowkit-demo
# With yarn
yarn create next-app rainbowkit-demo

Now, move into the project directory and open it in your favorite code editor.

Adding RainbowKit to our React app

Run the following command to install RainbowKit and its peer dependencies -

# With NPM
npm install @rainbow-me/rainbowkit wagmi ethers
# With yarn
yarn add @rainbow-me/rainbowkit wagmi ethers

Now add the following code to pages/_app.js -

import "../styles/globals.css";

import "@rainbow-me/rainbowkit/styles.css";

import {
  apiProvider,
  configureChains,
  getDefaultWallets,
  RainbowKitProvider,
} from "@rainbow-me/rainbowkit";
import { chain, createClient, WagmiProvider } from "wagmi";

const { chains, provider } = configureChains(
  [
    chain.mainnet,
    chain.polygon,
    chain.goerli,
    chain.rinkeby,
    chain.polygonMumbai,
  ],
  [apiProvider.fallback()]
);

const { connectors } = getDefaultWallets({
  appName: "My RainbowKit App",
  chains,
});

const wagmiClient = createClient({
  autoConnect: true,
  connectors,
  provider,
});

function MyApp({ Component, pageProps }) {
  return (
    <WagmiProvider client={wagmiClient}>
      <RainbowKitProvider chains={chains}>
        <Component {...pageProps} />
      </RainbowKitProvider>
    </WagmiProvider>
  );
}

export default MyApp;

Firstly, we import the RainbowKit styles, the RainbowKitPovider and other functions to configure our chains, and the WagmiProvider.

Next, we configure the chains which we want to support. In this example, I have added the Ethereum Mainnet, Polygon Mainnet, Goerli and Rinkeby (both Ethereum test networks), and the Polygon Mumbai testnet. We are using the public fallback RPC URLs for the purpose of this demo for our API providers. RainbowKit also lets us specify our own JSON RPC URLs or Alchemy or Infura URLs for our API providers. You can see the API Providers documentation here.

Next, we create our wagmiClient, passing in the autoConnect and setting it to true. Our app will automatically reconnect to the last used connector this way.

At last, we wrap our application with WagmiProvider and RainbowKitProvider.

Next, let us add the Connect Wallet button to our app. Replace the code in pages/index.js with the following -

import { ConnectButton } from "@rainbow-me/rainbowkit";
import Head from "next/head";
import styles from "../styles/Home.module.css";

export default function Home() {
  return (
    <div className={styles.container}>
      <Head>
        <title>RainbowKit Demo</title>
        <meta
          name="description"
          content="Demo app part of a tutorial on adding RainbowKit to a React application"
        />
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <main className={styles.main}>
        <h1 className={styles.title} style={{ marginBottom: "4rem" }}>
          Welcome to this demo of{" "}
          <a href="https://www.rainbowkit.com/">RainbowKit</a>
        </h1>

        <ConnectButton />
      </main>
    </div>
  );
}

Now run npm run dev or yarn dev and open up localhost:3000 in your browser and you should see this -

Making it dark mode 🌑

Time to make sure our eyes don't burn anymore.

Head over to pages/_app.js and import the midnightTheme function from RainbowKit. (Alternatively, you can also import the darkTheme function, a dimmer version of midnight)

import {
  apiProvider,
  configureChains,
  getDefaultWallets,
  midnightTheme,
  RainbowKitProvider,
} from "@rainbow-me/rainbowkit";

We must also pass in our theme to RainbowKitProvider -

<RainbowKitProvider chains={chains} theme={midnightTheme()}>

RainbowKit supports more advanced theming, you can see the RainbowKit Theming docs here for more information.

Also, add this small piece of code to styles/globals.css to make our app dark mode too -

body {
  background-color: #010101;
  color: #f0f0f0;
}

Now our app should look like this -

A tour of RainbowKit

After authenticating with a wallet, our connect button will automatically change to a network switcher which also show us our balance and wallet address -

Switching the network is as easy as clicking the network switcher and then selecting the network we want to switch to -

Clicking on our wallet address gives us a modal with the option to copy our address or disconnect our wallet -

Cool Mode 😎

Let's make our application a little cooler :)
Just add the coolMode prop to RainbowKitProvider -

<RainbowKitProvider chains={chains} theme={midnightTheme()} coolMode>

Now if we click on any of the options in the connect modal, we will get some amazing confetti 🎊

Conclusion

That was a basic demo of what RainbowKit can do, but it can do a lot more like show recent transactions. The best place to learn more about it is RainbowKit docs.

Important Links

5 Amazing React Component Libraries to Consider for your Next Project

Anish De — Mon, 09 May 2022 12:49:52 +0000

As web developers, it is often quite hard and time-consuming to make accessible UIs. This gets even worse when we have to make special components like Modals or Popovers from scratch.

Thankfully, the React ecosystem is huge and there are many great people who have made amazing libraries to help us with this problem. Today, we are going to focus on React component libraries that are accessible, have a decent base style, have good docs, and come with components like Modals, Popovers, Tooltips, etc.

1. Chakra UI

When I started out with Next.js, Chakra UI was the first component library I ever used, and it was amazing! I was able to make quite complex UIs (with modals and tables and everything) in not much time and that helped me focus on other things like application logic. It is the perfect one to use for Hackathons! It also has a huge community and is extremely popular.

2. Next UI

Next UI is probably the most beautiful out of all 5 in this article. Although it is quite new and still in the beta stage, it comes with all the essentials and looks absolutely amazing out of the box! It also comes with some amazing transitions and animations out of the box, that other component libraries don't come with.

3. MUI

MUI also has been around for a long time and was called Material UI. It is based on Material Design by Google but also comes with an extensive level of customization. Moreover, MUI also provides an unstyled version and a package with some amazing CSS utilities. MUI also provides a set of advanced components under MUI X. Some of these components are free but some require a paid license.

4. Mantine

Mantine also comes with a lot of components and a decent out-of-the-box UI. It is a lot like Chakra UI but has a smaller community. It, however, also comes with some amazing packages like a notification center, a command bar, a rich text editor and much more!

5. React Daisy UI

Daisy UI is an amazing Tailwind CSS component library. React Daisy UI is React component library for Daisy UI. It comes with a huge number of themes out of the box and a lot of components as well. As it is based on Tailwind CSS and comes with it, it is extremely easy to customize it with Tailwind CSS.

Conclusion

Now those were 5 React component libraries that will help you speed up development. Do let me know if you have any other favorites or which one you liked the most of these 5!

Amazing preview images with Next.js and LQIP Modern

Anish De — Mon, 02 May 2022 12:35:45 +0000

Images take a long time to load and can have a disruptive impact on UX. Today we are going to be looking at creating preview images with a library called lqip-modern.

What is LQIP?

LQIP simply stands for Low Quality Image Placeholders. They have extremely small file sizes and act as placeholders for the actual image while the actual image is still loading. These extremely small file sizes are obtained by blurring the image, resizing it to a smaller size, or reducing the quality in the case of JPEGs.

Compatibility

WebP is supported by all modern browsers. Also, WebP support is present in Safari on macOS only if one is using macOS 11 (Big Sur) or later. source

If 100% compatibility is the goal, we can use JPEG LQIPs as well (they are almost 2-3 times the size of a WebP image).

Let us now look at how we can use lqip-modern with Next.js

Using LQIP Modern with Next.js

Next.js has an in-built next/image component which can provide preview images for local files without the use of an external library, but it cannot for remote images.

Now, there is also a limitation with our approach here, that is, preview images are created at build time. This means, that if the external image changes, then the preview image will not change.

However, this method will be especially useful if you are fetching the image from a CMS. If the image is ever updated, a build can be triggered which will create a new preview image. A better approach would be to use on-demand Incremental Static Regeneration or regular incremental static regeneration, however, that is out of the scope of this article. You can read my blog post on implementing on-demand incremental static regeneration with Directus to learn more.

In this example, we are going to look at creating preview images for an image from Unsplash. I am going to be using this awesome image of a Vercel mug along with some computer peripherals for this tutorial. However, you can choose any picture you like.

Firstly, let us create a new Next.js application -

npx create-next-app next-lqip-demo
# OR
yarn create next-app next-lqip-demo

After it has been created, open up the project in your favorite code editor.

Now, open up the pages/index.js file and replace it with the following code -

import Head from "next/head";
import Image from "next/image";
import styles from "../styles/Home.module.css";

export default function Home() {
  return (
    <div className={styles.container}>
      <Head>
        <title>LQIP demo with Next.js</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <main className={styles.main}>
        <h1 className={styles.title}>
          Welcome to{" "}
          <a href="https://nextjs.org">this demo of LQIP with Next.js!</a>
        </h1>

        <div style={{ marginTop: "4rem" }}>
          <Image
            src="https://images.unsplash.com/photo-1642083139428-9ee5fa423c46"
            alt="Vercel mug with computer peripherals"
            height={480}
            width={320}
          />
        </div>
      </main>
    </div>
  );
}

Also, replace the code inside next.config.js with the following -

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  images: {
    domains: ["images.unsplash.com"],
  },
};

module.exports = nextConfig;

We are using the next/image component to show our image from Unsplash. As the image is from a remote URL, we have to also add the domain in next.config.js.

Now run npm run dev or yarn dev to start a development server and then visit localhost:3000. You will be able to see the page heading with the image -

When you first visited the page, you would have noticed the image took a split of a second to load. Depending on your internet connection, it can be fast or slow. If you have a fast internet connection, open up developer tools and go to the network tab. Here you can throttle your internet connection to simulate a slow loading time -

Using LQIP to optimize our remote image

Firstly, let us install lqip-modern, and sharp. Sharp is an awesome package that helps with image transformations and is used by lqip-modern -

npm install --save lqip-modern sharp
# OR
yarn add lqip-modern sharp

Now, replace the code in pages/index.js with the following -

import lqipModern from "lqip-modern";
import Head from "next/head";
import Image from "next/image";
import styles from "../styles/Home.module.css";

export default function Home({ imageUrl, previewImageUrl }) {
  return (
    <div className={styles.container}>
      <Head>
        <title>LQIP demo with Next.js</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <main className={styles.main}>
        <h1 className={styles.title}>
          Welcome to{" "}
          <a href="https://nextjs.org">this demo of LQIP with Next.js!</a>
        </h1>

        <div style={{ marginTop: "4rem" }}>
          <Image
            src={imageUrl}
            alt="Vercel mug with computer peripherals"
            height={480}
            width={320}
            placeholder="blur"
            blurDataURL={previewImageUrl}
          />
        </div>
      </main>
    </div>
  );
}

export const getStaticProps = async () => {
  const unsplashImageUrl =
    "https://images.unsplash.com/photo-1642083139428-9ee5fa423c46";
  const image = await fetch(unsplashImageUrl);
  const imageBuffer = Buffer.from(await image.arrayBuffer());
  const previewImage = await lqipModern(imageBuffer);

  return {
    props: {
      imageUrl: unsplashImageUrl,
      previewImageUrl: previewImage.metadata.dataURIBase64,
    },
  };
};

In getStaticProps, we first fetch the image and convert it to a Buffer. We then give lqip-modern our buffer and it returns us an object called previewImage which contains a buffer and some metadata. Inside the metadata, there is a field called dataURIBase64 which is a base64 URL for our preview image. We pass this in via props to our client-side application.

On the client-side, we have added a new placeholder="blur" parameter to our Image component that will show a blur placeholder. As it is a remote image, we are required to pass in the blurDataURL parameter. We pass in the base64 URL for our preview image we obtained from the metadata earlier, here.

Now if you reload the page, while the image is loading, you should see the preview image.

For those wondering, this is the image lqip-modern made us -

It is tiny at just 11x16 (the next/image component makes it fill the width and height of the original image) and is just 78 bytes!

Using JPEG instead of WebP

If you want to support all browsers, you can add the outputFormat option when making the preview image to get a JPEG preview image, like this -

  const previewImage = await lqipModern(imageBuffer, { outputFormat: "jpeg" });

The JPEG image is the same dimensions as our WebP image but significantly larger in size at 303 bytes -

Note that these file sizes will vary depending on what image you use. The difference in file size between JPEG and WebP can go under double in some cases.

Conclusion

Alright, that is it! Let us go over what we did in this tutorial -

Learned about LQIP images
Created a Next.js application and added an image from Unsplash
Used lqip-modern to create preview images
Looked at how we can obtain JPEG preview images

Hope you liked this tutorial! Do share it if you have found it useful :)

Important Links

Making a blog with Directus, MDX, and Next.js On-Demand ISR

Anish De — Sat, 30 Apr 2022 03:52:22 +0000

There are many Headless CMSs out there and many other tools that let us make a blog easily and quickly. Today we look at building a blog with Directus and Next.js. We will use MDX to store our blog content in Directus. We are also going to use Next.js's on-demand incremental static regeneration feature which lets us add or update content on our website without triggering a re-build.

Demo -

Note that incremental static regeneration will be referred to as ISR from now on

Why On-Demand ISR over regular ISR?

Next.js supports ISR for a few years now but on-demand ISR makes it better. Before, we would specify a revalidate property with the number of seconds to cache the data. This had a few disadvantages -

The cache would be invalidated regularly even if the data in the server had not changed. This would also result in unnecessary API calls.
Often, the content served would be stale.

On-demand ISR solves both the aforementioned problems with regular ISR. This is done by triggering a cache revalidation via webhooks. So whenever the content is updated on the server (or CMS), a webhook event can be fired which will create or update the required static pages

Setting up a Directus project

Although Directus can be self-hosted, it has a cloud offering with a decent free tier. Go ahead and sign up for an account if you haven't already. Click "Create Project" in the dashboard (you might be prompted to create one during the onboarding process) and give your project a name. Under "Infrastructure", select "Community Cloud" and under "Starting Template", select "Empty Project". Now click "Create Project" and within 2 minutes, it should be created.

After the project has been created, click on it on the dashboard and then click "Open Project". Here, on the login screen, enter the credentials that have been sent to the email address associated with your Directus account.

Setting up our Blog collection

On, Directus, it should say that there are no collections. Let us create a collection called "Blog". Click on the arrow in the top-right corner and check "Status", "Created on" and "Updated On". We will add more fields later on. Now click on the checkmark and we should be able to see our collection's schema -

Let us add a few more fields. Create one called with the type "Input" and give it the key "title". Make it required and hit save.

Add one more field with the type "Markdown" and give it the key "content". Make this required too and hit save.

We need to also add a slug for our blog posts. Create a new field with the "Input" type with key "slug" and make it required. Now click "Continue in Advanced Field Creation Mode". Under "Interface" check the "Slugify" option and click the checkmark to create the field.

Adding some sample data

Adding content in Directus is extremely easy! Go to the content tab in the sidebar (the first one with a 3d box icon) and select the Blog collection. Now click "Create Item". Here add a title and some content and a slug. Also, make sure to change the status to "Published". We will later use this status to manage API access. Note that you can use markdown here. After you are done adding the content, click the checkmark to save it.

Setting up permissions for our API

Go to the settings tab on the sidebar and then click on "Roles & Permissions" in the settings navigation. Next, click on "Public" -

Here we can see our Blog collection. Click on the red not allowed sign under the eye (this denotes view permission). In the dropdown, select "Use Custom".

Unser "Item Permissions", add the following rule allowing public view access to only published items -

Under "Field Permissions", select all and click on the checkmark to save the permissions.

Creating a blog with Next.js and Directus

Let us start by creating a new Next.js app -

npx create-next-app nextjs-directus-on-demand-isr
# OR
yarn create next-app nextjs-directus-on-demand-isr

After it has been created, open the project in your favorite code editor.

Next, install the Directus JS SDK -

npm install @directus/sdk
# OR
yarn add @directus/sdk

Now, make a file called lib/directus.js and add the following code -

import { Directus } from "@directus/sdk";

const directus = new Directus(process.env.DIRECTUS_URL);

export default directus;

Here, we are initializing the SDK with the URL to our Directus backend. We must set this URL as an environment variable. Go ahead and create a new file called .env.local and add the environment variable -

DIRECTUS_URL=<PATH_TO_YOUR_DIRECTUS_INSTANCE_WITHOUT_ANY_OF_THE_PATHS>

Make sure to appropriately replace the URL with the one for your instance.

Now, open the pages/index.js file and replace it with the following code -

import Head from "next/head";
import Link from "next/link";
import directus from "../lib/directus";

import styles from "../styles/Home.module.css";

export default function Home({ posts }) {
  return (
    <div className={styles.container}>
      <Head>
        <title>Create Next App</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <main className={styles.main}>
        <h1 className={styles.title}>
          Welcome to A demo of Next.js with Directus
        </h1>

        <div className={styles.grid}>
          {posts.map((post) => (
            <Link key={post.id} href={post.slug} passHref>
              <a className={styles.card}>
                <h2>{post.title}</h2>
              </a>
            </Link>
          ))}
        </div>
      </main>
    </div>
  );
}

export const getStaticProps = async () => {
  const res = await directus.items("blog").readByQuery({
    limit: -1,
    fields: ["title", "slug", "id"],
  });

  return {
    props: {
      posts: res.data,
    },
  };
};

Here, we are fetching all the blog posts but only the title, slug, and id fields. We do this in getStaticProps and pass the data as a prop to the client. Hence, the fetching is done on the server environment, only at build time. (note that in a development environment, getStaticProps runs on every request)

Later on in the article, we are going to be looking at on-demand ISR that will run getStaticProps when a webhook is triggered.

Once you run yarn dev and open up https://localhost:3000 on your web browser, you should be able to see your blog posts -

Now, if we click on the blog post cards, it will lead us to a 404 as we haven't set up our blog post pages yet. Let us do that now.

Create a new file pages/[slug].js and add the following code -

import directus from "../lib/directus";
import styles from "../styles/BlogPost.module.css";

const BlogPage = ({ post }) => {
  return (
    <div className={styles.container}>
      <h1>{post.title}</h1>
      <p>{post.content}</p>
    </div>
  );
};

export const getStaticProps = async ({ params }) => {
  const res = await directus.items("blog").readByQuery({
    filter: { slug: params.slug },
    fields: ["title", "content"],
  });

  return {
    props: {
      post: res.data[0],
    },
  };
};

export const getStaticPaths = async () => {
  const res = await directus.items("blog").readByQuery({
    limit: -1,
    fields: ["slug"],
  });

  return {
    paths: res.data.map((post) => ({
      params: {
        slug: post.slug,
      },
    })),
    fallback: false,
  };
};

export default BlogPage;

Here, in getStaticPaths, we are fetching only the slug for all blog posts. Then we are mapping over it and create an array of params to let Next.js know the paths that exist. Lastly, we set fallback to false so that any path not in the paths array redirects to a 404.

In getStaticProps we do a query where we filter by the slug field. We also specifically ask for only the title and content fields.

Lastly, we pass the data in through props and render it on the client-side.

Also, we can add some CSS for this page. Create a new file called styles/BlogPost.module.css and add the following to it -

.container {
  padding: 0 2rem;
}

.main {
  min-height: 100vh;
  padding: 4rem 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

Now if we see our blog post page, we see that the content is rendering as a string and is not getting parsed as markdown -

Let's fix this

Rendering MDX for content

Although MDX supports more advanced features like the ability to render React components, we are not going to be looking at that in this article. However, let us focus on parsing the markdown and rendering the necessary HTML.

We are going to be using next-mdx-remote for this tutorial. Let us install it -

npm install next-mdx-remote
# OR
yarn add next-mdx-remote

Now, replace the code in pages/[slug].js with the following -

import { serialize } from "next-mdx-remote/serialize";
import { MDXRemote } from "next-mdx-remote";

import directus from "../lib/directus";
import styles from "../styles/BlogPost.module.css";

const BlogPage = ({ post }) => {
  return (
    <div className={styles.container}>
      <h1>{post.title}</h1>
      <MDXRemote {...post.content} />
    </div>
  );
};

export const getStaticProps = async ({ params }) => {
  const res = await directus.items("blog").readByQuery({
    filter: { slug: params.slug },
    fields: ["title", "content"],
  });

  return {
    props: {
      post: {
        title: res.data[0].title,
        content: await serialize(res.data[0].content),
      },
    },
  };
};

export const getStaticPaths = async () => {
  const res = await directus.items("blog").readByQuery({
    limit: -1,
    fields: ["slug"],
  });

  return {
    paths: res.data.map((post) => ({
      params: {
        slug: post.slug,
      },
    })),
    fallback: false,
  };
};

export default BlogPage;

Now, if we navigate to a blog post, we can see the rendered markdown -

Using Next.js On-demand ISR with Directus

If we build the Next.js application and serve a production build and then make changes in Directus, they will not reflect in our website unless we re-build it. Here we got 3 options -

Trigger a new build every time content is added/updated/deleted
Use regular ISR with a specified time for which the cache should be retained
Use on-demand ISR to only re-build that specific page only when it is needed

With the first option, it can be expensive and time-consuming. Re-building also invalidates the cache for all pages in many cases. This might cause issues when you are dealing with larger websites.

With the second option, there will be unnecessary API calls to our server and data might be stale.

This leaves us with the third option. Although setting it up is slightly more complicated than the other 2 methods, it does not have any of the downsides the other 2 methods have. And, I am going to show you how exactly to set it up so it shouldn't be very hard :)

Note: Currently the website is hosted locally but Directus needs a publicly accessible URL as a webhook. You can either host it somewhere and then test it out or start a local tunnel using something like Ngrok

Create a new file under pages/api/revalidate.js and add the following code -

import directus from "../../lib/directus";

const handler = async (req, res) => {
  const { collection } = req.body;
  const headers = req.headers;

  if (!headers["x-webhook-secret"]) {
    return res.status(403).send("Forbidden");
  }

  const receivedSecret = headers["x-webhook-secret"];

  const secret = process.env.REVALIDATE_SECRET;

  if (receivedSecret !== secret) {
    return res.status(403).send("Forbidden");
  }

  if (collection === "blog") {
    const { keys } = req.body;

    for (const key of keys) {
      const directusRes = await directus
        .items(collection)
        .readOne(key, { fields: ["slug"] });

      await res.unstable_revalidate(`/${directusRes.slug}`);
      await res.unstable_revalidate("/");
    }
  }

  return res.status(200).send("Success");
};

export default handler;

This is a simple Next.js API route.

First, we check for the x-webhook-secret header and compare it to a preset webhook secret, set as an environment variable. We should always use a webhook secret to prevent spam. It can also be a security risk in some cases (but here it is not as we are not relying on data sent as an event payload for input).

Directus sends us some event payload and we are destructuring the collection field which contains the name of the collection where the change was made. We check if this is the blog collection and then go ahead with revalidating the pages. Although this does not make much sense here, if our pages had multiple sets of pages that could be revalidated, we could specifically just revalidate a set of pages instead of all sets of pages. (for example, if there was a landing and then a blog page, for changes to the landing collection, we could just revalidate the landing page but for changes to the blog page, we could revalidate only the specific blog page and the blog index).

Now, the event payload does not contain the slug for the blog post but it has the id. We use the Directus SDK to get the slug corresponding to that id and then revalidate that slug page and the home page (as it has the blog index).

Lastly, open up the .env.local file and add the REVALIDATE_SECRET environment variable. For the value, it can be a random string. The easiest way would be to use the output of the following command -

openssl rand -base64 32

To test this out, we cannot use the development environment as getStaticProps runs every time a request is made on the development environment. Either build the site with npm run build or yarn build, serve it locally with npm run start or yarn start, and then use a local tunneling solution like Ngrok or else, deploy it to a hosting platform like Vercel.

Now head over to your Directus instance and go to the settings tab. Now click on "Webhooks" in the side navigation and create a new one. Give it a name and for the URL field, add your Ngrok URL or your hosted instance. Make sure that the slug is /api/revalidate. The URL should look like https://<my-domain>/api/revalidate. Make sure the status is set to active and the "Send Event Data" checkbox is checked.

Now, add a header called x-webhook-secret with the value of the secret you created earlier and set it as an environment variable. Under "Triggers", check all the actions and the blog collection. Now click the checkmark to save it. Here is what it looks like for me -

Conclusion

That has been quite a lot! Let us go over the things we did -

First, we create a project in Directus and created a schema for our blog posts
We created a Next.js application and added the Directus SDK
We displayed our blog posts on the home page and the post with content on its own page
We used next-mdx-remote to render markdown
We used Next.js on-demand ISR to revalidate the cache whenever required

Hope you liked this tutorial! Do share it if you have found it useful and you can follow me on Twitter too :)

See you on my next blog 🤞

Important Links

Introducing XdoX - Start Challenges, Log your Progress and Show them off to the World

Anish De — Fri, 01 Apr 2022 10:41:50 +0000

🤔 What is XdoX?

XdoX is a web application that lets you start challenges and log your progress every day. You are also able to show your progress to the world via your unique profile page. These challenges can be anything from 100DaysOfCode to 30DaysOfRust to even 60DaysOfCooking!

It is also my submission for the Hasura x Hashnode Hackathon

Live Demo / GitHub Repository

❓ What is Hasura?

GraphQL is a query language for APIs with a schema. It comes with multiple features like the ability to query specific fields, do pagination, do aggregation queries, and a lot more.

However, making a GraphQL backend is more complicated than making a simple REST backend and that is where Hasura comes in. Hasura provides us with an easy way to make a GraphQL backend that connects our database with our application without the need to write a single line of code!

Hasura also has a cloud offering with a decent free tier so that we can get started with hosting our GaphQL backend without needing to worry about costs. It is Open Source and Self-Hostable as well.

📚 The Tech Stack

What all technologies did I use for XdoX?

For starters, I used Hasura for my application's backend.

Other than that, I used the following services -

Clerk to add authentication to my application. It also integrated well with Hasura and I was able to secure my backend by using JWT Auth (more on this later on in this article)
Heroku Postgres for my database. It also integrated well with Hasura
Vercel to host my frontend

And, here are the libraries and frameworks I used for the application -

Next.js for my application's frontend
TailwindCSS for styling my frontend
Radix UI for un-styled UI components like Modals and Popovers
Headless UI for transitions
Apollo React Client for making GraphQL requests from my frontend. It also takes care of caching.
Tiptap for the rich-text editor with markdown support that is used to log progress

🧐 How does XdoX work?

It is a simple 3-step process. One signs up for an account using Google or Email and then starts a challenge (e.g. 100DaysOfCode). Then one logs their progress every day.

Next, one can share their unique profile page to the world to show off their progress.

Also, it is not necessary to log your progress every day. The app is built in such a way that lets you be flexible with your challenges. Gone on a vacation? No problem, XdoX won't bug out for not logging your progress.

Securing the backend

Backends have direct access to the database and it is considered a best practice to secure them. I need to use the GraphQL API from my front-end and hence it has to be a public API. However, I must secure it so that only limited unauthorized requests and authorized requests can be made.

As I was using Clerk for user authentication, it didn't take me long to implement this. Clerk integrated with Hasura using JWT templates. Here is the documentation explaining how to implement this.

Here, we create a JWT template from the Clerk dashboard. Here is what mine looks like -

When making a request to the API, we pass in a header called Authorization with a bearer token as the value. This is verified by Hasura using a signing key (this is set in Hasura via environment variables).

This is the code in the frontend that takes care of passing in the bearer token when making requests -

import {
  ApolloClient,
  ApolloProvider,
  from,
  HttpLink,
  InMemoryCache,
} from "@apollo/client";
import { setContext } from "@apollo/client/link/context";
import { useSession } from "@clerk/clerk-react";
import { ReactNode } from "react";

const hasuraGraphqlApi = process.env.NEXT_PUBLIC_HASURA_GRAPHQL_API;

interface IApolloProviderWrapperProps {
  children: ReactNode;
}

export const ApolloProviderWrapper = ({
  children,
}: IApolloProviderWrapperProps) => {
  const { getToken } = useSession();
  const authMiddleware = setContext(async (_, { headers }) => {
    const token = await getToken({ template: "hasura" });

    return {
      headers: {
        ...headers,
        authorization: `Bearer ${token}`,
      },
    };
  });

  const httpLink = new HttpLink({
    uri: hasuraGraphqlApi,
  });

  const apolloClient = new ApolloClient({
    link: from([authMiddleware, httpLink]),
    cache: new InMemoryCache(),
  });

  return <ApolloProvider client={apolloClient}>{children}</ApolloProvider>;
};

We simply get a bearer token by using the getToken function made available to us by the Clerk React SDK and pass it in the Authorization header.

Now, if the bearer token is valid, the X-Hasura-User-Id header is added to the request that contains the user id of the user who is making the request. The headers for the user role are passed in as well. Note that this is taken care of on Hasura's side.

I am also making some unauthenticated requests with a viewer role. This has been set as the unauthorized role in my Hasura instance and is used in the public user profile pages. Here is the code that take cares of making an unauthenticated requests -

import {
  ApolloClient,
  ApolloProvider,
  from,
  HttpLink,
  InMemoryCache,
} from "@apollo/client";
import { setContext } from "@apollo/client/link/context";
import { ReactNode } from "react";

const hasuraGraphqlApi = process.env.NEXT_PUBLIC_HASURA_GRAPHQL_API;

interface IApolloProviderWrapperProps {
  children: ReactNode;
}

export const UnauthenticatedApolloProviderWrapper = ({
  children,
}: IApolloProviderWrapperProps) => {
  const authMiddleware = setContext(async (_, { headers }) => {
    return {
      headers: {
        ...headers,
        "X-Hasura-User-Role": "viewer",
      },
    };
  });

  const httpLink = new HttpLink({
    uri: hasuraGraphqlApi,
  });

  const apolloClient = new ApolloClient({
    link: from([authMiddleware, httpLink]),
    cache: new InMemoryCache(),
  });

  return <ApolloProvider client={apolloClient}>{children}</ApolloProvider>;
};

Setting row-level permissions for the data

Although the API is now secured, no data is accessible by default. We need to set up permissions and this will also let us limit the data one can access. For example, we will let a user only access their own user data and only access private challenges they have created.

Thankfully, Hasura again makes doing this extremely easy. Let us look at an example -

Here, I have setup insert permissions for the user role in such a way that one can insert rows only where the user_id column is equal to the user id of the user making the request (this was passed in as a header).

I am also allowing the user to only update specific columns. Here, the id column is auto-generated with the gen_random_uuid() PostgreSQL function. The created_at and updated_at fields are also being taken care of by the backend.

I am also adding a column preset for the user_id column that will be equal to the X-Hasura-User-Id header. Now, that is crazy powerful!

Similarly, I have set permissions for update, select and delete for the user role where I check that the user_id column matches the X-Hasura-User-Id header.

For the viewer role, I have set it up this way -

Here, the viewer is only able to select rows from the database (that is, only read data). I have additionally added a check that makes sure that the challenge is public.

👓 What I learned from this Hackathon

Although I have used GraphQL in the past, my experience was quite limited. Also, I had never built a GraphQL backend, I was just using public GraphQL APIs. I had also never used Hasura before, nor did I ever use a SQL database for any production project.

This hackathon gave me a chance to explore the backend side of GraphQL through Hasura and understand the deeper concepts. I also had a great time using a PostgreSQL database, learning more about relational data. It is crazy powerful!

✨ Conclusion

Over the past month, I have worked on XdoX and have been exploring and learning a LOT of new things. I'm quite excited to see how XdoX does in the real world!

Bye, and have a nice day 😁🤞

🔗 Important Links

5 Chrome Keyboard Shortcuts to boost your productivity

Anish De — Wed, 23 Mar 2022 08:51:49 +0000

Browsers have become an integral part of our life and most applications are web-based now. We use web browsers for everything, from asking a question on Stackoverflow to booking a flight ticket. We often end up having a huge number of tabs open and it becomes quite hard to keep a track of them. It gets especially confusing when we try to switch between tabs. Let us look at 5 keyboard shortcuts that can boost our productivity -

Note: Although I am going to be talking about keyboard shortcuts specific to Chrome, they should remain the same across all Chromium-based browsers (Brave, Edge, Vivaldi, etc.)

Moving between tabs

Clicking tabs can be quite a painful and slow process, especially, if you switch between them frequently. Keyboard shortcuts greatly speed things up here.

Ctrl + Tab (for Windows) and ⌘ + ⌥ + → (for macOS) lets you move to the next tab.

Bonus:
We can also move to the previous tab with Ctrl + Shift + Tab (for Windows) and ⌘ + ⌥ + ← (for macOS)

Re-opening closed tabs

We tend to close tabs by mistake but there is a simple keyboard shortcut that can re-open the last closed tab -

Ctrl + Shift + t (for Windows) and ⌘ + Shift + t (for macOS) lets you re-open recently closed tabs in the order they were closed in.

Bonus: If you close a whole window, the above keyboard shortcut will re-open the whole window with all the tabs.

Searching through open tabs

As the number of tabs open gets larger and larger, it gets difficult to find a tab. Fortunately, from Chrome 87 onwards, we can search through all open tabs, as well as recently closed tabs.

Ctrl + Shift + a (for Windows) and ⌘ + Shift + a (for macOS) opens the tab search dialog.

Close the current tab

After we are done with using a web page on a tab, it is a good idea to close it so that it doesn't clutter our tab bar and keeps the resource usage low.

Ctrl + w (for Windows) and ⌘ + w (for macOS) closes the current tab.

Bonus: Ctrl + Shift + w (for Windows) and ⌘ + Shift + w (for macOS) closes the current window.

Open a new tab or a window

Ctrl + t (for Windows) and ⌘ + t (for macOS) opens a new tab and jumps to it.

Similarly, Ctrl + n (for Windows) and ⌘ + n (for macOS) opens a new window and jumps to it.

All Chrome Keyboard Shortcuts - https://support.google.com/chrome/answer/157179?hl=en&co=GENIE.Platform%3DDesktop

Conclusion

I hope you have found this small article helpful and now you can be more productive while browsing the web. See you in the next one 🤞

DEV Community: Anish De

Creating a Custom Solana Connect Wallet UI with React and Chakra UI

How does @solana/wallet-adapter-react-ui work?

The useWallet hook

Using @solana/wallet-adapter-react to create a custom Connect Wallet UI

Conclusion

Medusa Webhooks: The Best Technical Project of the Medusa Hackathon

My Experience Working on This Project

My Experience Creating the Plugin

How I Created the Plugin

What Does the Webhook Plugin do?

Using the Plugin

Prerequisites

Installing and Setting up the Webhooks Plugin

Triggering a Webhook Request from Your Custom Code

Conclusion

ThirdKudos: Appreciate other's work by giving then Kudos in the form of NFTs

Challenges faced

If I had more time, then what can I have done?

Thirdweb's role

Conclusion

How to quickly create a Gasless NFT Collection on Solana with CandyPay

Prerequisites

Creating a Gasless NFT collection with CandyPay

Claiming an NFT using the CandyPay QR Code

Conclusion

Important Links

5 Modern CLI tools that help boost your productivity

bat

Syntax highlighting

Line numbers

Search

zoxide

exa

fd

ripgrep

BONUS: tealdeer

Conclusion

Forgit and Lazygit. The 2 Git tools to supercharge your git workflow?

Forgit

Lazygit

Conclusion

Links

Make a beautiful Connect Wallet Button with RainbowKit and React

What is RainbowKit?

Creating a new Next.js App

Adding RainbowKit to our React app

Making it dark mode 🌑

A tour of RainbowKit

Cool Mode 😎

Conclusion

Important Links

5 Amazing React Component Libraries to Consider for your Next Project

1. Chakra UI

2. Next UI

3. MUI

4. Mantine

5. React Daisy UI

Conclusion

Amazing preview images with Next.js and LQIP Modern

What is LQIP?

Compatibility

Using LQIP Modern with Next.js

Using LQIP to optimize our remote image

Using JPEG instead of WebP

Conclusion

Important Links

Making a blog with Directus, MDX, and Next.js On-Demand ISR

Why On-Demand ISR over regular ISR?

Setting up a Directus project

Setting up our Blog collection

Adding some sample data

Setting up permissions for our API

Creating a blog with Next.js and Directus

Rendering MDX for content

Using Next.js On-demand ISR with Directus

Conclusion

Important Links

Introducing XdoX - Start Challenges, Log your Progress and Show them off to the World

🤔 What is XdoX?

How does `@solana/wallet-adapter-react-ui` work?

The `useWallet` hook

Using `@solana/wallet-adapter-react` to create a custom Connect Wallet UI

`bat`

`zoxide`

`exa`

`fd`

`ripgrep`

BONUS: `tealdeer`