feat: pg schema + ORM setup with drizzle

apps/maestro/drizzle.config.ts

@@ -0,0 +1,15 @@
+import * as dotenv from "dotenv";
+import type { Config } from "drizzle-kit";
+
+dotenv.config({ path: ".env.local" });
+
+const CONNECTION_STRING = `${process.env.POSTGRES_URL}?sslmode=require`;
+
+export default {
+  schema: "./src/lib/drizzle/schema",
+  out: "./src/lib/drizzle/migrations",
+  driver: "pg",
+  dbCredentials: {
+    connectionString: CONNECTION_STRING,
+  },
+} satisfies Config;

apps/maestro/package.json

@@ -20,7 +20,11 @@
     "test:coverage": "vitest --coverage --run",
     "sync": "ts-node-esm scripts/sync.ts",
     "codegen": "pnpm wagmi generate && ts-node-esm scripts/postcodegen.ts",
-    "codegen:env": "ts-node-esm scripts/env.ts"
+    "codegen:env": "ts-node-esm scripts/env.ts",
+    "drizzle:generate": "pnpm drizzle-kit generate:pg",
+    "drizzle:up": "pnpm drizzle-kit up:pg",
+    "drizzle:push": "pnpm drizzle-kit push:pg",
+    "drizzle:studio": "pnpm drizzle-kit studio"
   },
   "dependencies": {
     "@axelar-network/axelarjs-sdk": "^0.13.5",
@@ -40,18 +44,20 @@
     "@types/react": "^18.2.18",
     "@types/react-dom": "^18.2.7",
     "@vercel/kv": "^0.2.2",
+    "@vercel/postgres": "^0.4.1",
     "@web3modal/ethereum": "^2.7.1",
     "@web3modal/react": "^2.7.1",
-    "clsx": "^1.2.1",
+    "drizzle-orm": "^0.28.0",
     "eslint": "^8.46.0",
-    "eslint-config-next": "13.4.9",
+    "eslint-config-next": "13.4.13",
     "ky": "^0.33.3",
     "logrocket": "^4.0.4",
     "logrocket-react": "^5.0.1",
-    "lucide-react": "^0.248.0",
-    "next": "13.4.9",
+    "lucide-react": "^0.265.0",
+    "next": "13.4.13",
     "nextjs-cors": "^2.1.2",
     "nprogress": "^0.2.0",
+    "pg": "^8.11.2",
     "rambda": "^7.5.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
@@ -69,7 +75,7 @@
   },
   "devDependencies": {
     "@babel/core": "^7.22.9",
-    "@next/bundle-analyzer": "13.4.9",
+    "@next/bundle-analyzer": "13.4.13",
     "@playwright/test": "^1.36.2",
     "@tanstack/react-query-devtools": "4.32.0",
     "@testing-library/jest-dom": "^5.17.0",
@@ -88,14 +94,15 @@
     "concurrently": "^8.2.0",
     "dotenv": "^16.3.1",
     "dotenv-cli": "^7.2.1",
+    "drizzle-kit": "^0.19.12",
+    "drizzle-zod": "^0.5.0",
     "happy-dom": "^9.20.3",
     "matchers": "link:@testing-library/jest-dom/matchers",
     "next-auth": "^4.22.4",
     "postcss": "^8.4.27",
     "tailwindcss": "^3.3.3",
-    "tiny-invariant": "^1.3.1",
     "ts-node": "^10.9.1",
-    "vitest": "^0.33.0",
+    "vitest": "^0.34.1",
     "zx": "^7.2.3"
   }
 }

apps/maestro/src/components/EVMChainsDropdown/EVMChainsDropdown.tsx

@@ -1,11 +1,9 @@
 import type { EVMChainConfig } from "@axelarjs/api/axelarscan";
-import { Dropdown, toast } from "@axelarjs/ui";
+import { cn, Dropdown, HelpCircleIcon, toast } from "@axelarjs/ui";
 import { Maybe } from "@axelarjs/utils";
 import { useMemo, useState, type FC } from "react";
 import Image from "next/image";
 
-import clsx from "clsx";
-import { HelpCircleIcon } from "lucide-react";
 import { find } from "rambda";
 import { TransactionExecutionError } from "viem";
 import { useNetwork, useSwitchNetwork } from "wagmi";
@@ -33,7 +31,7 @@ export const ChainIcon: FC<{
 
   return (
     <div
-      className={clsx(
+      className={cn(
         "bg-base-200 rounded-full p-0.5 shadow-black group-hover:ring-2",
         props.className
       )}
@@ -116,7 +114,7 @@ const EVMChainsDropdown: FC<Props> = (props) => {
       {props.renderTrigger?.() ?? (
         <Dropdown.Trigger
           $as="button"
-          className={clsx(
+          className={cn(
             "btn btn-sm btn-ghost group flex items-center gap-2",
             {
               "pointer-events-none": props.disabled,
@@ -159,7 +157,7 @@ const EVMChainsDropdown: FC<Props> = (props) => {
 
       {eligibleChains.length > 0 && !props.disabled && (
         <Dropdown.Content
-          className={clsx(
+          className={cn(
             "dark:bg-base-200 z-10 mt-2 max-h-[80vh] w-full md:w-48",
             {
               "bg-base-200 dark:bg-base-300 broder max-h-[300px] w-80 overflow-x-scroll md:w-96":
@@ -191,7 +189,7 @@ const EVMChainsDropdown: FC<Props> = (props) => {
           {eligibleChains.map((chain) => (
             <Dropdown.Item
               key={chain.chain_id}
-              className={clsx({
+              className={cn({
                 "pointer-events-none":
                   chain.chain_id === selectedChain?.chain_id,
               })}

apps/maestro/src/compounds/GMPTxStatusMonitor/GMPTxStatusMonitor.tsx

@@ -1,9 +1,8 @@
 import type { GMPTxStatus } from "@axelarjs/api/gmp";
-import { Badge, Tooltip, type BadgeProps } from "@axelarjs/ui";
+import { Badge, cn, Tooltip, type BadgeProps } from "@axelarjs/ui";
 import { useEffect, useMemo, type FC } from "react";
 import Link from "next/link";
 
-import clsx from "clsx";
 import { indexBy } from "rambda";
 
 import AxelarscanLink from "~/components/AxelarsscanLink/AxelarscanLink";
@@ -145,7 +144,7 @@ export const GMPStatusIndicator: FC<StatusIndicatorProps> = ({
       >
         <Badge className="flex items-center">
           <Badge
-            className={clsx("-translate-x-1.5 text-xs", {
+            className={cn("-translate-x-1.5 text-xs", {
               "animate-pulse": !["error", "executed"].includes(status),
             })}
             variant={STATUS_COLORS[status]}

apps/maestro/src/features/AddErc20/AddErc20.tsx

@@ -1,9 +1,7 @@
-import { Button, Dialog, LinkButton } from "@axelarjs/ui";
+import { Button, cn, Dialog, LinkButton } from "@axelarjs/ui";
 import { useMemo, type FC } from "react";
 import dynamic from "next/dynamic";
 
-import clsx from "clsx";
-
 import EVMChainsDropdown from "~/components/EVMChainsDropdown/EVMChainsDropdown";
 import {
   AddErc20StateProvider,
@@ -85,13 +83,13 @@ const AddErc20: FC<AddErc20Props> = () => {
               className="absolute left-0 top-0 rounded-none rounded-br-2xl"
             />
           )}
-          <span className={clsx("-translate-y-2", { "ml-14": showBackButton })}>
+          <span className={cn("-translate-y-2", { "ml-14": showBackButton })}>
             Register <span className="hidden sm:inline">origin</span> token on:{" "}
           </span>
           <EVMChainsDropdown
             compact
             disabled={state.isPreExistingToken}
-            contentClassName={clsx("translate-x-28 sm:translate-x-40 z-40", {
+            contentClassName={cn("translate-x-28 sm:translate-x-40 z-40", {
               "translate-x-20 sm:translate-x-40": showBackButton,
             })}
             triggerClassName="btn-sm btn-circle -translate-y-1 active:-translate-y-1"

apps/maestro/src/features/AddErc20/steps/review/Review.tsx

@@ -3,13 +3,13 @@ import {
   Button,
   CopyToClipboardButton,
   Dialog,
+  ExternalLinkIcon,
   LinkButton,
 } from "@axelarjs/ui";
 import { maskAddress, sluggify } from "@axelarjs/utils";
 import { useState, type FC } from "react";
 import { useRouter } from "next/router";
 
-import { ExternalLinkIcon } from "lucide-react";
 import { useNetwork } from "wagmi";
 
 import GMPTxStatusMonitor from "~/compounds/GMPTxStatusMonitor";

apps/maestro/src/features/AddErc20/steps/shared.tsx

@@ -1,8 +1,6 @@
-import { Button } from "@axelarjs/ui";
+import { ArrowLeftIcon, Button, ChevronRightIcon, cn } from "@axelarjs/ui";
 import type { ComponentProps, FC } from "react";
 
-import clsx from "clsx";
-import { ArrowLeftIcon, ChevronRightIcon } from "lucide-react";
 import tw from "tailwind-styled-components";
 
 const StyledButton = tw(Button)`gap-2`;
@@ -13,8 +11,7 @@ export const NextButton: FC<ComponentProps<typeof Button>> = ({
 }) => {
   return (
     <StyledButton {...props}>
-      {children}{" "}
-      <ChevronRightIcon className={clsx({ hidden: props.loading })} />
+      {children} <ChevronRightIcon className={cn({ hidden: props.loading })} />
     </StyledButton>
   );
 };

apps/maestro/src/features/AddErc20/steps/token-details/TokenDetails.tsx

@@ -1,8 +1,15 @@
-import { Button, Dialog, FormControl, Label, TextInput } from "@axelarjs/ui";
+import {
+  Button,
+  Dialog,
+  EyeIcon,
+  EyeOffIcon,
+  FormControl,
+  Label,
+  TextInput,
+} from "@axelarjs/ui";
 import { useRef, useState, type FC } from "react";
 import { type SubmitHandler } from "react-hook-form";
 
-import { EyeIcon, EyeOffIcon } from "lucide-react";
 import { isAddress } from "viem";
 
 import {

apps/maestro/src/features/InterchainTokenList/RegisteredInterchainTokenCard.tsx

@@ -3,16 +3,16 @@ import {
   Badge,
   Button,
   Card,
+  cn,
   CopyToClipboardButton,
+  SettingsIcon,
   SpinnerIcon,
   toast,
   Tooltip,
 } from "@axelarjs/ui";
 import { maskAddress } from "@axelarjs/utils";
 import { useCallback, type FC } from "react";
 
-import clsx from "clsx";
-import { SettingsIcon } from "lucide-react";
 import { TransactionExecutionError } from "viem";
 import { useAccount, useNetwork, useSwitchNetwork } from "wagmi";
 
@@ -44,6 +44,7 @@ export type Props = TokenInfo & {
   hasRemoteTokens: boolean;
   originTokenAddress?: `0x${string}`;
   originTokenChainId?: number;
+  className?: string;
 };
 
 export const RegisteredInterchainTokenCard: FC<Props> = (props) => {
@@ -87,9 +88,10 @@ export const RegisteredInterchainTokenCard: FC<Props> = (props) => {
   return (
     <Card
       compact
-      className={clsx(
+      className={cn(
         "bg-base-200 dark:bg-base-300 overflow-hidden transition-all ease-in",
-        "hover:opacity-75 hover:shadow-xl"
+        "hover:opacity-75 hover:shadow-xl",
+        props.className
       )}
     >
       <Card.Body className="w-full">
@@ -145,14 +147,14 @@ export const RegisteredInterchainTokenCard: FC<Props> = (props) => {
 
         {balance?.tokenBalance && (
           <div
-            className={clsx(
+            className={cn(
               "bg-base-300 dark:bg-base-100 flex items-center justify-between rounded-xl p-2 pl-4"
             )}
           >
             {balance.tokenBalance === "0" ? (
               <div className="flex w-full items-center justify-between">
                 <span
-                  className={clsx({
+                  className={cn({
                     "mx-auto":
                       !isSourceChain ||
                       (!balance.isTokenOwner && !balance.isTokenPendingOwner),

apps/maestro/src/features/InterchainTokenList/UnregisteredInterchainTokenCard.tsx

@@ -1,8 +1,6 @@
-import { Card, Indicator } from "@axelarjs/ui";
+import { Card, cn, Indicator } from "@axelarjs/ui";
 import { type FC } from "react";
 
-import clsx from "clsx";
-
 import { ChainIcon } from "~/components/EVMChainsDropdown";
 import { GMPStatusIndicator } from "~/compounds/GMPTxStatusMonitor";
 import type { TokenInfo } from "./types";
@@ -18,7 +16,7 @@ export const UnregisteredInterchainTokenCard: FC<Props> = (props) => {
       compact
       bordered
       onClick={!props.deploymentStatus ? props.onToggleSelection : undefined}
-      className={clsx(
+      className={cn(
         "bg-base-200 dark:bg-base-300 overflow-hidden transition-all ease-in",
         "hover:opacity-75 hover:shadow-xl",
         {
@@ -44,7 +42,7 @@ export const UnregisteredInterchainTokenCard: FC<Props> = (props) => {
           style={{
             backgroundImage: `url(${props.chain?.image})`,
           }}
-          className={clsx(
+          className={cn(
             "absolute inset-0 scale-100 bg-cover opacity-0 blur-3xl transition-all duration-300",
             "bg-center delay-150 hover:scale-150 hover:opacity-20",
             {

apps/maestro/src/features/ManageInterchainToken/ManageInterchainToken.tsx

@@ -1,14 +1,13 @@
-import { Button, LinkButton, Modal } from "@axelarjs/ui";
-import { useMemo, type ComponentType, type FC } from "react";
-import dynamic from "next/dynamic";
-
-import clsx from "clsx";
 import {
+  Button,
+  cn,
   CoinsIcon,
   GiftIcon,
-  // PackageCheckIcon,
-  // SendIcon
-} from "lucide-react";
+  LinkButton,
+  Modal,
+} from "@axelarjs/ui";
+import { useMemo, type ComponentType, type FC } from "react";
+import dynamic from "next/dynamic";
 
 import {
   INITIAL_STATE,
@@ -126,7 +125,7 @@ export const ManageInterchainToken: FC<Props> = (props) => {
       }}
     >
       <Modal.Body
-        className={clsx("flex flex-col gap-4", {
+        className={cn("flex flex-col gap-4", {
           "": state.selectedAction === "mint",
         })}
       >

apps/maestro/src/features/RegisterRemoteTokens/RegisterRemoteTokens.tsx

@@ -1,8 +1,7 @@
-import { Button, LinkButton, toast } from "@axelarjs/ui";
+import { Button, ExternalLinkIcon, LinkButton, toast } from "@axelarjs/ui";
 import { maskAddress } from "@axelarjs/utils";
 import { useCallback, useEffect, useMemo, type FC } from "react";
 
-import { ExternalLinkIcon } from "lucide-react";
 import { TransactionExecutionError } from "viem";
 import { useAccount, useWaitForTransaction } from "wagmi";
 

apps/maestro/src/features/SearchInterchainToken/SearchInterchainToken.tsx

@@ -1,4 +1,5 @@
 import {
+  cn,
   FormControl,
   InputGroup,
   SpinnerIcon,
@@ -8,7 +9,6 @@ import {
 import { useSessionStorageState } from "@axelarjs/utils/react";
 import { useEffect, useMemo, useState, type FC } from "react";
 
-import clsx from "clsx";
 import { isAddress } from "viem";
 import { useNetwork } from "wagmi";
 
@@ -98,7 +98,7 @@ const SearchInterchainToken: FC<SearchInterchainTokenProps> = (props) => {
   return (
     <FormControl className="w-full max-w-xs md:max-w-md">
       <InputGroup
-        className={clsx("rounded-md transition-transform", {
+        className={cn("rounded-md transition-transform", {
           "ring-error ring-offset-base-200 -translate-y-4 ring-1 ring-offset-2":
             shouldRenderError,
           "ring-offset-base-200 ring-1 ring-offset-2": isFocused,