DEV Community: Vansh Wadhwa

Introducing OpenBio - An Open Source Link in Bio Page Builder

Vansh Wadhwa — Fri, 08 Sep 2023 19:02:31 +0000

OpenBio is an open source beautiful link in bio page builder.

Star OpenBio ⭐️ on GitHub.

Announcement Tweet

Tech Stack

It is made using latest tech stack such as

NextJS App Router
Tailwind CSS
Typescript
TRPC
Clerk (Auth)
shadcn UI
Upstash (Serverless Redis)
Drizzle ORM
Neon (Serverless PostgreSQL)
Resend (Emails)

Showcase

You can check out my OpenBio here.

How to make a NFT Sold Notification Discord Bot

Vansh Wadhwa — Wed, 22 Feb 2023 12:36:00 +0000

Want to get notified whenever a NFT from a collection is sold directly on Discord?
This is how you could do it:

Create an account on Chainbase
We will be using chainbase for the whole process so make sure to create an account on chainbase.

Get Chainbase API Key
Get a chainbase API key from here.
Note it as CHAINBASE_API_KEY.

Get a Chainbase ETH network API key
Get ETH network API key from here.
Note it as CHAINBASE_ETH_MAINNET_KEY.

Get chainbase data cloud API key
Get the Data Cloud api key by writing any SQL here and clicking Generate API.
Note it as CHAINBASE_DATACLOUD_API_KEY.

Clone this github repo

git clone git@github.com:vanxh/nft-sales-bot.git
# or using HTTPS
git clone

Create a .env file and enter the API keys we created above

CHAINBASE_API_KEY="FROM THE STEPS ABOVE"
CHAINBASE_DATACLOUD_API_KEY="FROM THE STEPS ABOVE"
CHAINBASE_ETH_MAINNET_KEY="FROM THE STEPS ABOVE"
DISCORD_WEBHOOK_URL=""

Install modules

yarn install
# or npm
npm install

Update contract address in src/index.ts
Update this line with contract address of NFT you want to track.

const CONTRACT_ADDRESS = '0x0000000005756b5a03e751bd0280e3a55bc05b6e';

Build the project

yarn build

Run the project

yarn start

You can find the repository for this post here.

Data Revalidation in Remix

Vansh Wadhwa — Mon, 20 Feb 2023 18:53:35 +0000

Libraries like SWR or React Query have automatic data revalidation built in, but what about Remix?

Remix has a great built-in utility to fetch data (loader and useLoaderData). It automatically revalidates data on all actions.

Let’s see how you can add more ways to revalidate your data such as interval/focus based data revalidation:

Create a loader to fetch your data

type LoaderData= {
    user: User;
};

export const loader: LoaderFunction = async () => {
    const res = await fetch("/api/user/me");
    const data = await res.json();

    return json<LoaderData>({ user: data });
};

This will make remix fetch the data whenever the route loads.

Make sure loader is exported from the same file your route is in.

Use the loader in your component

export function User() {
    const { user } = useLoaderData<LoaderData>();

    return <p>{user.username}</p>;
}

Create a revalidate hook

useRevalidate can be use to trigger data refresh. It triggers a navigation event to the current route which triggers Remix to call loader of the route.

import { useCallback } from "react";
import { useNavigate } from "@remix-run/react";

export const useRevalidate = () => {
  // We get the navigate function from React Rotuer
  let navigate = useNavigate();
  // And return a function which will navigate to `.` (same URL) and replace it
  return useCallback(
    function revalidate() {
      navigate(".", { replace: true });
    },
    [navigate]
  );
};

replace: true prevents it from creating duplicate routes in browser history stack.

Create a hook to revalidate on focus

import { useEffect } from "react";

export const useRevalidateOnFocus = ({
  enabled = false,
}: {
  enabled?: boolean;
}) => {
  let revalidate = useRevalidate();

  useEffect(
    function revalidateOnFocus() {
      if (!enabled) return;
      function onFocus() {
        revalidate();
      }
      window.addEventListener("focus", onFocus);
      return () => window.removeEventListener("focus", onFocus);
    },
    // eslint-disable-next-line react-hooks/exhaustive-deps
    [revalidate]
  );

  useEffect(
    function revalidateOnVisibilityChange() {
      if (!enabled) return;
      function onVisibilityChange() {
        revalidate();
      }
      window.addEventListener("visibilitychange", onVisibilityChange);
      return () =>
        window.removeEventListener("visibilitychange", onVisibilityChange);
    },
    // eslint-disable-next-line react-hooks/exhaustive-deps
    [revalidate]
  );
};

Create a hook to revalidate based on interval

import { useEffect } from "react";

export const useRevalidateOnInterval = ({
  enabled = false,
  interval = 1000,
}: {
  enabled?: boolean;
  interval?: number;
}) => {
  let revalidate = useRevalidate();
  useEffect(
    function revalidateOnInterval() {
      if (!enabled) return;
      let intervalId = setInterval(revalidate, interval);
      return () => clearInterval(intervalId);
    },
    // eslint-disable-next-line react-hooks/exhaustive-deps
    [revalidate]
  );
};

Use the hooks we created

Now just call the hook in route where loader is in.

export function User() {
    useRevalidateOnInterval({
      enabled: true,
      interval: 5 * 1000,
    });
    const { user } = useLoaderData<LoaderData>();

    return <p>{user.username}</p>;
}

in the above example it would re-validate user every 5 seconds.

How to Redirect to an external website with Remix

Vansh Wadhwa — Mon, 20 Feb 2023 18:48:29 +0000

Remix has a useful redirect helper function which helps to quickly create a new redirect Response. You can use this function to redirect from a loader or action to another app route and another website.

import { redirect } from "@remix-run/node";

export const action = async () => redirect("https://vanxh.dev");

Just return a redirect response with the URL you want to redirect. You can also pass a status code as a second argument, which defaults to 302.

You can do the same from a loader:

export const loader = async () => redirect("https://vanxh.dev");

Twitter Pin Based OAuth in NodeJS / Typescript

Vansh Wadhwa — Mon, 20 Feb 2023 18:45:46 +0000

This is how you can use twitter pin based oauth in node.js / typescript.

Steps:

Step 1
Install @vanxh/tw-oauth in your project

npm install @vanxh/tw-oauth
# or
yarn add @vanxh/tw-oauth

Step 2
Import TWoauth

import { TwoAuth } from 'twoauth';

Step 3
Create a new TWoauth instance

const tw = new TwoAuth("API KEY", "API SECRET");

Step 4
Get an authorization URL

const { token, tokenSecret, authorizationUrl } = await tw.getAuthorizationUrl();
console.log(authorizationUrl);

Step 5
Use the pin you get after authentication on the authorization URL in Step 4 to get the access token and access token secret.

const { accessToken, accessTokenSecret } = await tw.getAccessToken(pin, token, tokenSecret);

Full Usage Example

Check out the library on github.

import { TwoAuth } from 'twoauth';
import inquirer from "inquirer";
import open from "open";

const tw = new TwoAuth("API KEY", "API SECRET");

const { token, tokenSecret, authorizationUrl } = await tw.getAuthorizationUrl();
console.log("Please visit the following URL to authorize the app.");
console.log(authorizationUrl);
open(authorizationUrl);

const { pin } = await inquirer.prompt([{
  type: "number",
  name: "pin",
  message: "Paste the PIN here:",
  filter: (value) => (value >= 0 && value <= 9_999_999) ? value : Promise.reject(`Invalid PIN: ${value}`)
}]);

const { accessToken, accessTokenSecret } = await tw.getAccessToken(pin, token, tokenSecret);
console.log("Access Token:", accessToken);
console.log("Access Token Secret:", accessTokenSecret);

// Use the access token and access token secret to make API calls to Twitter API.