diff --git a/.prettierrc b/.prettierrc
index 141fd54..6aaa145 100644
--- a/.prettierrc
+++ b/.prettierrc
@@ -1,13 +1,13 @@
 {
-	"singleQuote": true,
-	"trailingComma": "es5",
-	"printWidth": 100,
-	"tabWidth": 2,
-	"useTabs": false,
-	"semi": true,
-	"bracketSpacing": true,
-	"jsxBracketSameLine": true,
-	"objectCurlySpacing": true,
-	"bracketSameLine": false,
-	"arrowParens": "avoid"
+  "singleQuote": true,
+  "trailingComma": "es5",
+  "printWidth": 100,
+  "tabWidth": 2,
+  "useTabs": false,
+  "semi": true,
+  "bracketSpacing": true,
+  "jsxBracketSameLine": true,
+  "objectCurlySpacing": true,
+  "bracketSameLine": false,
+  "arrowParens": "avoid"
 }
diff --git a/next.config.js b/next.config.js
index 15358c5..c378b36 100644
--- a/next.config.js
+++ b/next.config.js
@@ -7,4 +7,12 @@ module.exports = {
     domains: ['live.staticflickr.com'],
   },
   poweredByHeader: false,
+  async rewrites() {
+    return [
+      {
+        source: '/feed/:address',
+        destination: '/feed',
+      },
+    ];
+  },
 };
diff --git a/package-lock.json b/package-lock.json
index f4aec6a..448c628 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -42,6 +42,8 @@
         "@typescript-eslint/parser": "^5.14.0",
         "@welldone-software/why-did-you-render": "^6.2.3",
         "autoprefixer": "^10.4.2",
+        "dotenv": "^16.0.0",
+        "dotenv-cli": "^5.0.0",
         "eslint": "^8.10.0",
         "eslint-config-next": "^12.1.0",
         "eslint-config-prettier": "^8.5.0",
@@ -58,6 +60,7 @@
         "prettier": "^2.5.1",
         "prettier-plugin-tailwindcss": "^0.1.8",
         "tailwindcss": "^3.0.23",
+        "tsconfig-paths": "^3.13.0",
         "typescript": "^4.6.2"
       }
     },
@@ -5685,6 +5688,39 @@
         "node": ">=8"
       }
     },
+    "node_modules/dotenv": {
+      "version": "16.0.0",
+      "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.0.0.tgz",
+      "integrity": "sha512-qD9WU0MPM4SWLPJy/r2Be+2WgQj8plChsyrCNQzW/0WjvcJQiKQJ9mH3ZgB3fxbUUxgc/11ZJ0Fi5KiimWGz2Q==",
+      "dev": true,
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/dotenv-cli": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/dotenv-cli/-/dotenv-cli-5.0.0.tgz",
+      "integrity": "sha512-0Cb2WMDJ805hTD7m43gXXFLraoE5KwrKmGW2dAzYvSEB96tlKI2hmcJ/9In4s2FfvkAFk3SjNQcLeKLoRSXhKA==",
+      "dev": true,
+      "dependencies": {
+        "cross-spawn": "^7.0.3",
+        "dotenv": "^16.0.0",
+        "dotenv-expand": "^8.0.1",
+        "minimist": "^1.2.5"
+      },
+      "bin": {
+        "dotenv": "cli.js"
+      }
+    },
+    "node_modules/dotenv-expand": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/dotenv-expand/-/dotenv-expand-8.0.1.tgz",
+      "integrity": "sha512-j/Ih7bIERDR5PzI89Zu8ayd3tXZ6E3dbY0ljQ9Db0K87qBO8zdLsi2dIvDHMWtjC3Yxb8XixOTHAtia0fDHRpg==",
+      "dev": true,
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/duplexer3": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/duplexer3/-/duplexer3-0.1.4.tgz",
@@ -13595,9 +13631,9 @@
       }
     },
     "node_modules/tsconfig-paths": {
-      "version": "3.12.0",
-      "resolved": "https://registry.npmjs.org/tsconfig-paths/-/tsconfig-paths-3.12.0.tgz",
-      "integrity": "sha512-e5adrnOYT6zqVnWqZu7i/BQ3BnhzvGbjEjejFXO20lKIKpwTaupkCPgEfv4GZK1IBciJUEhYs3J3p75FdaTFVg==",
+      "version": "3.13.0",
+      "resolved": "https://registry.npmjs.org/tsconfig-paths/-/tsconfig-paths-3.13.0.tgz",
+      "integrity": "sha512-nWuffZppoaYK0vQ1SQmkSsQzJoHA4s6uzdb2waRpD806x9yfq153AdVsWz4je2qZcW+pENrMQXbGQ3sMCkXuhw==",
       "dev": true,
       "dependencies": {
         "@types/json5": "^0.0.29",
@@ -19093,6 +19129,30 @@
         }
       }
     },
+    "dotenv": {
+      "version": "16.0.0",
+      "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.0.0.tgz",
+      "integrity": "sha512-qD9WU0MPM4SWLPJy/r2Be+2WgQj8plChsyrCNQzW/0WjvcJQiKQJ9mH3ZgB3fxbUUxgc/11ZJ0Fi5KiimWGz2Q==",
+      "dev": true
+    },
+    "dotenv-cli": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/dotenv-cli/-/dotenv-cli-5.0.0.tgz",
+      "integrity": "sha512-0Cb2WMDJ805hTD7m43gXXFLraoE5KwrKmGW2dAzYvSEB96tlKI2hmcJ/9In4s2FfvkAFk3SjNQcLeKLoRSXhKA==",
+      "dev": true,
+      "requires": {
+        "cross-spawn": "^7.0.3",
+        "dotenv": "^16.0.0",
+        "dotenv-expand": "^8.0.1",
+        "minimist": "^1.2.5"
+      }
+    },
+    "dotenv-expand": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/dotenv-expand/-/dotenv-expand-8.0.1.tgz",
+      "integrity": "sha512-j/Ih7bIERDR5PzI89Zu8ayd3tXZ6E3dbY0ljQ9Db0K87qBO8zdLsi2dIvDHMWtjC3Yxb8XixOTHAtia0fDHRpg==",
+      "dev": true
+    },
     "duplexer3": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/duplexer3/-/duplexer3-0.1.4.tgz",
@@ -25063,9 +25123,9 @@
       }
     },
     "tsconfig-paths": {
-      "version": "3.12.0",
-      "resolved": "https://registry.npmjs.org/tsconfig-paths/-/tsconfig-paths-3.12.0.tgz",
-      "integrity": "sha512-e5adrnOYT6zqVnWqZu7i/BQ3BnhzvGbjEjejFXO20lKIKpwTaupkCPgEfv4GZK1IBciJUEhYs3J3p75FdaTFVg==",
+      "version": "3.13.0",
+      "resolved": "https://registry.npmjs.org/tsconfig-paths/-/tsconfig-paths-3.13.0.tgz",
+      "integrity": "sha512-nWuffZppoaYK0vQ1SQmkSsQzJoHA4s6uzdb2waRpD806x9yfq153AdVsWz4je2qZcW+pENrMQXbGQ3sMCkXuhw==",
       "dev": true,
       "requires": {
         "@types/json5": "^0.0.29",
diff --git a/package.json b/package.json
index 624bbfc..3b507a2 100644
--- a/package.json
+++ b/package.json
@@ -51,6 +51,8 @@
     "@typescript-eslint/parser": "^5.14.0",
     "@welldone-software/why-did-you-render": "^6.2.3",
     "autoprefixer": "^10.4.2",
+    "dotenv": "^16.0.0",
+    "dotenv-cli": "^5.0.0",
     "eslint": "^8.10.0",
     "eslint-config-next": "^12.1.0",
     "eslint-config-prettier": "^8.5.0",
@@ -67,6 +69,7 @@
     "prettier": "^2.5.1",
     "prettier-plugin-tailwindcss": "^0.1.8",
     "tailwindcss": "^3.0.23",
+    "tsconfig-paths": "^3.13.0",
     "typescript": "^4.6.2"
   }
 }
diff --git a/src/components/connect-modal.tsx b/src/components/connect-modal.tsx
index 63d7c5f..2bb5fe9 100644
--- a/src/components/connect-modal.tsx
+++ b/src/components/connect-modal.tsx
@@ -21,7 +21,8 @@ export const ConnectWalletModal = ({
             enterTo="opacity-100"
             leave="ease-in duration-200"
             leaveFrom="opacity-100"
-            leaveTo="opacity-0">
+            leaveTo="opacity-0"
+          >
             <Dialog.Overlay className="fixed inset-0 bg-[rgba(18,19,23,0.7)]" />
           </Transition.Child>
           <span className="inline-block h-screen align-middle" aria-hidden="true">
@@ -34,14 +35,16 @@ export const ConnectWalletModal = ({
             enterTo="opacity-100 scale-100"
             leave="ease-in duration-200"
             leaveFrom="opacity-100 scale-100"
-            leaveTo="opacity-0 scale-95">
+            leaveTo="opacity-0 scale-95"
+          >
             <div className="inline-block w-full max-w-[22rem] origin-top-right divide-gray-100 rounded-md border bg-[rgb(18,18,24)] p-[0.1rem] font-semibold leading-6 text-gray-300 shadow-[0_4px_30px_rgba(0,0,0,0.1)] ring-1 ring-black ring-opacity-5 backdrop-blur-md focus:outline-none md:max-w-[30rem]">
               <Dialog.Title
                 as="h3"
-                className="pt-5 text-lg antialiased font-semibold leading-7 tracking-wide text-gray-200">
+                className="pt-5 text-lg font-semibold leading-7 tracking-wide text-gray-200 antialiased"
+              >
                 CONNECTION METHOD
               </Dialog.Title>
-              <div className="flex justify-between w-full h-full pt-6 pb-4 divide-x">
+              <div className="flex h-full w-full justify-between divide-x pt-6 pb-4">
                 {children}
               </div>
             </div>
diff --git a/src/components/full-page-loading-spinner.tsx b/src/components/full-page-loading-spinner.tsx
index 9fd5706..c1ecb14 100644
--- a/src/components/full-page-loading-spinner.tsx
+++ b/src/components/full-page-loading-spinner.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 
 export const FullPageLoadingSpinner = () => (
-  <div className="flex items-center justify-center min-w-full min-h-screen">
+  <div className="flex min-h-screen min-w-full items-center justify-center">
     <style jsx>
       {`
         /* KEYFRAMES */
diff --git a/src/components/icons/crypto-wallets.tsx b/src/components/icons/crypto-wallets.tsx
index 80d4a3b..c397bf7 100644
--- a/src/components/icons/crypto-wallets.tsx
+++ b/src/components/icons/crypto-wallets.tsx
@@ -35,7 +35,7 @@ function WalletConnect() {
       height="185px"
       viewBox="0 0 300 185"
       version="1.1"
-      className="w-[4rem] h-[4rem] md:h-12 md:w-12"
+      className="h-[4rem] w-[4rem] md:h-12 md:w-12"
     >
       <defs></defs>
       <g id="Page-1" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
@@ -59,7 +59,8 @@ function Metamask() {
       x="0px"
       y="0px"
       viewBox="0 0 318.6 318.6"
-      className="h-[4rem] w-[4rem] md:h-12 md:w-12">
+      className="h-[4rem] w-[4rem] md:h-12 md:w-12"
+    >
       <style jsx>
         {`
           .st0 {
@@ -205,5 +206,5 @@ function Metamask() {
 }
 
 function Coinbase() {
-  return <img src="/assets/images/coinbase.png" className="w-12 h-12" alt="Coinbase" />;
+  return <img src="/assets/images/coinbase.png" className="h-12 w-12" alt="Coinbase" />;
 }
diff --git a/src/components/icons/ethereum.tsx b/src/components/icons/ethereum.tsx
index 09988d5..ecbd3e8 100644
--- a/src/components/icons/ethereum.tsx
+++ b/src/components/icons/ethereum.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 
 export const EthereumIcon = () => (
   <svg
-    className="w-4 h-4 mr-2 -ml-1 text-[#626890]"
+    className="mr-2 -ml-1 h-4 w-4 text-[#626890]"
     aria-hidden="true"
     focusable="false"
     data-prefix="fab"
diff --git a/src/components/icons/index.ts b/src/components/icons/index.ts
index 508845f..ac556c2 100644
--- a/src/components/icons/index.ts
+++ b/src/components/icons/index.ts
@@ -12,4 +12,4 @@ export * from './red-heart';
 export * from './transparent-heart';
 export * from './hashtag';
 export * from './copy-icon';
-export * from './search';
\ No newline at end of file
+export * from './search';
diff --git a/src/components/icons/loading-spinner.tsx b/src/components/icons/loading-spinner.tsx
index e5a1a7b..694145a 100644
--- a/src/components/icons/loading-spinner.tsx
+++ b/src/components/icons/loading-spinner.tsx
@@ -3,7 +3,7 @@ import * as React from 'react';
 export const LoadingSpinner = () => (
   <svg
     role="status"
-    className="w-4 text-gray-200 animate-spin dark:text-gray-600 fill-gray-200"
+    className="w-4 animate-spin fill-gray-200 text-gray-200 dark:text-gray-600"
     viewBox="0 0 100 101"
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
diff --git a/src/components/icons/magic.tsx b/src/components/icons/magic.tsx
index dbf3085..d49413e 100644
--- a/src/components/icons/magic.tsx
+++ b/src/components/icons/magic.tsx
@@ -5,7 +5,7 @@ export const MagicIcon = () => (
     xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 26 31"
     fill="none"
-    className="w-4 h-4 mr-2 -ml-1 text-[#626890]"
+    className="mr-2 -ml-1 h-4 w-4 text-[#626890]"
   >
     <path
       d="M12.8533 0C14.1947 1.64317 15.6741 3.16914 17.274 4.56019C16.2081 8.01821 15.6342 11.6921 15.6342 15.5C15.6342 19.308 16.2081 22.9818 17.274 26.4399C15.6742 27.8309 14.1947 29.3568 12.8533 31C11.5121 29.357 10.0328 27.8312 8.43313 26.4403C9.49916 22.9821 10.0731 19.3081 10.0731 15.5C10.0731 11.6919 9.49916 8.01785 8.43312 4.55968C10.0328 3.16877 11.5121 1.64297 12.8533 0Z"
diff --git a/src/components/icons/search.tsx b/src/components/icons/search.tsx
index eb1c6ff..47ffaa9 100644
--- a/src/components/icons/search.tsx
+++ b/src/components/icons/search.tsx
@@ -6,7 +6,8 @@ export const SearchIcon = () => (
     className="h-5 w-5"
     fill="none"
     viewBox="0 0 24 24"
-    stroke="currentColor">
+    stroke="currentColor"
+  >
     <path
       strokeLinecap="round"
       strokeLinejoin="round"
diff --git a/src/components/icons/twitter.tsx b/src/components/icons/twitter.tsx
index 203c0c2..917da82 100644
--- a/src/components/icons/twitter.tsx
+++ b/src/components/icons/twitter.tsx
@@ -14,7 +14,8 @@ export const Twitter = ({
     viewBox="0 0 55 55"
     width="20"
     height="20"
-    className={`text-gray-500 hover:text-blue-500 w-${w} h-${h} ${customStyle}`}>
+    className={`text-gray-500 hover:text-blue-500 w-${w} h-${h} ${customStyle}`}
+  >
     <path
       fill="currentColor"
       d="M42,12.429c-1.323,0.586-2.746,0.977-4.247,1.162c1.526-0.906,2.7-2.351,3.251-4.058c-1.428,0.837-3.01,1.452-4.693,1.776C34.967,9.884,33.05,9,30.926,9c-4.08,0-7.387,3.278-7.387,7.32c0,0.572,0.067,1.129,0.193,1.67c-6.138-0.308-11.582-3.226-15.224-7.654c-0.64,1.082-1,2.349-1,3.686c0,2.541,1.301,4.778,3.285,6.096c-1.211-0.037-2.351-0.374-3.349-0.914c0,0.022,0,0.055,0,0.086c0,3.551,2.547,6.508,5.923,7.181c-0.617,0.169-1.269,0.263-1.941,0.263c-0.477,0-0.942-0.054-1.392-0.135c0.94,2.902,3.667,5.023,6.898,5.086c-2.528,1.96-5.712,3.134-9.174,3.134c-0.598,0-1.183-0.034-1.761-0.104C9.268,36.786,13.152,38,17.321,38c13.585,0,21.017-11.156,21.017-20.834c0-0.317-0.01-0.633-0.025-0.945C39.763,15.197,41.013,13.905,42,12.429"
diff --git a/src/components/layouts/footer.tsx b/src/components/layouts/footer.tsx
index ad5ec38..8112ae5 100644
--- a/src/components/layouts/footer.tsx
+++ b/src/components/layouts/footer.tsx
@@ -37,7 +37,8 @@ export function Footer() {
       className={clsx(
         `fixed bottom-0 left-0 m-0 box-border flex h-10 w-full items-center justify-center p-4 text-gray-700`,
         ` dark:bg-[#14141b] dark:text-gray-300`
-      )}>
+      )}
+    >
       <div className={clsx(`flex gap-x-10 rounded-lg bg-gray-100 p-2.5`, `dark:bg-transparent`)}>
         {socialLinks.map(item => (
           <a key={item.name} href={item.url} target="_blank" rel="noopener noreferrer">
diff --git a/src/components/layouts/gallery.tsx b/src/components/layouts/gallery.tsx
index 7ba78c5..15a22f5 100644
--- a/src/components/layouts/gallery.tsx
+++ b/src/components/layouts/gallery.tsx
@@ -17,8 +17,9 @@ export const Nft = ({
     href={`https://opensea.io/assets/${contract_address}/${token_id}`}
     target="_blank"
     rel="noreferrer"
-    className="group">
-    <div className="w-full overflow-hidden bg-transparent rounded-lg aspect-w-1 aspect-h-1 xl:aspect-w-7 xl:aspect-h-8">
+    className="group"
+  >
+    <div className="aspect-w-1 aspect-h-1 xl:aspect-w-7 xl:aspect-h-8 w-full overflow-hidden rounded-lg bg-transparent">
       {children}
     </div>
   </a>
@@ -29,7 +30,7 @@ export const Gallery = ({ nfts }: { nfts: NFT[] }) => {
   const count = nfts.length;
   return (
     <div className="bg-transparent">
-      <div className="max-w-2xl mx-auto lg:max-w-7xl">
+      <div className="mx-auto max-w-2xl lg:max-w-7xl">
         <h2 className="sr-only">NFTs</h2>
         <div
           id="nfts"
@@ -37,7 +38,8 @@ export const Gallery = ({ nfts }: { nfts: NFT[] }) => {
             `grid grid-cols-1 gap-y-2 gap-x-2 sm:grid-cols-2 md:gap-y-6 md:gap-x-6 lg:grid-cols-3 xl:gap-x-4`,
             !!count && range(1, 4).includes(count) && `xl:grid-cols-2`
             // !!count && count > 9 && `md:grid-cols-4`
-          )}>
+          )}
+        >
           {nfts.map(({ cached_file_url, contract_address, token_id, name, description }, idx) => {
             const url = cached_file_url;
             if (!url) return null;
diff --git a/src/components/layouts/header.tsx b/src/components/layouts/header.tsx
index 797218c..755c84d 100644
--- a/src/components/layouts/header.tsx
+++ b/src/components/layouts/header.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react';
 import clsx from 'clsx';
 import Link from 'next/link';
+import { useRouter } from 'next/router';
 import { Disclosure, Menu } from '@headlessui/react';
 import { useEnsLookup, useEnsAvatar, useAccount } from 'wagmi';
 
@@ -8,26 +9,55 @@ import { useUser } from '@/hooks';
 import { SearchBar } from '@/components';
 import { LogoutIcon } from '@/components/icons';
 
-const navigation = [
-  {
-    name: 'HOME',
-    href: '/',
-    requiresAuth: false,
-  },
-  {
-    name: 'FEED',
-    href: '/feed',
-    requiresAuth: true,
-  },
-  {
-    name: 'PROFILE',
-    href: '/profile',
-    requiresAuth: true,
-  },
-];
+// const navigation = [
+//   {
+//     name: 'HOME',
+//     href: '/',
+//     requiresAuth: false,
+//   },
+//   {
+//     name: 'FEED',
+//     href: '/feed',
+//     requiresAuth: true,
+//   },
+//   {
+//     name: 'PROFILE',
+//     href: '/profile',
+//     requiresAuth: true,
+//   },
+// ];
 
 export const Header = () => {
   const { authenticated, error, user, status } = useUser();
+  const router = useRouter();
+
+  const navigation = [
+    {
+      name: 'HOME',
+      href: '/',
+      onClick: () => router.push('/'),
+      requiresAuth: false,
+    },
+    {
+      name: 'FEED',
+      href: '/feed',
+      onClick: () =>
+        router.push(
+          {
+            pathname: '/feed',
+            query: { address: user?.publicAddress },
+          },
+          '/feed'
+        ),
+      requiresAuth: true,
+    },
+    {
+      name: 'PROFILE',
+      href: '/profile',
+      onClick: () => router.push('/profile'),
+      requiresAuth: true,
+    },
+  ];
 
   const [, disconnect] = useAccount();
   const [{ data: ens }] = useEnsLookup({ address: user?.publicAddress, skip: !user });
@@ -44,23 +74,29 @@ export const Header = () => {
       )}>
       {({ open }) => (
         <>
-          <div className="px-2 mx-auto max-w-8xl md:px-0">
-            <div className="relative flex items-center h-20 md:border-opacity-25 md:px-6">
+          <div className="max-w-8xl mx-auto px-2 md:px-0">
+            <div className="relative flex h-20 items-center md:border-opacity-25 md:px-6">
               <div className="flex items-center md:px-0">
                 <Link shallow={true} href="/">
-                  <a className="flex-shrink-0 hidden sm:block">
+                  <a className="hidden flex-shrink-0 sm:block">
                     <img className="block w-8 invert" src="/images/bird.png" alt="Workflow" />
                   </a>
                 </Link>
                 {authenticated && (
-                  <div className="hidden ml:0 md:block lg:ml-2">
+                  <div className="ml:0 hidden md:block lg:ml-2">
                     <div className="flex space-x-4 md:w-full">
                       {navigation.map(item => (
-                        <Link shallow={true} key={item.name} href={item.href}>
-                          <a className="px-3 py-2 text-lg font-medium text-gray-200 rounded-md">
-                            {item.name}
-                          </a>
-                        </Link>
+                        <button
+                          onClick={item.onClick}
+                          className="rounded-md px-3 py-2 text-lg font-medium text-gray-200"
+                          key={item.name}>
+                          {item.name}
+                        </button>
+                        // <Link shallow={true} key={item.name} href={item.href}>
+                        //   <a className="rounded-md px-3 py-2 text-lg font-medium text-gray-200">
+                        //     {item.name}
+                        //   </a>
+                        // </Link>
                       ))}
                     </div>
                   </div>
@@ -77,12 +113,12 @@ export const Header = () => {
               {authenticated && (
                 <div className="flex md:hidden">
                   {/* Mobile menu button */}
-                  <Disclosure.Button className="inline-flex items-center justify-center p-2 text-gray-200 bg-gray-700 rounded-md hover:bg-gray-500 hover:bg-opacity-75 hover:text-white focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-gray-600">
+                  <Disclosure.Button className="inline-flex items-center justify-center rounded-md bg-gray-700 p-2 text-gray-200 hover:bg-gray-500 hover:bg-opacity-75 hover:text-white focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-gray-600">
                     <span className="sr-only">Open main menu</span>
                     {open ? (
                       <svg
                         xmlns="http://www.w3.org/2000/svg"
-                        className="block w-6 h-6"
+                        className="block h-6 w-6"
                         fill="none"
                         viewBox="0 0 24 24"
                         stroke="currentColor">
@@ -96,7 +132,7 @@ export const Header = () => {
                     ) : (
                       <svg
                         xmlns="http://www.w3.org/2000/svg"
-                        className="block w-6 h-6"
+                        className="block h-6 w-6"
                         fill="none"
                         viewBox="0 0 24 24"
                         stroke="currentColor">
@@ -114,15 +150,15 @@ export const Header = () => {
               <div className="hidden md:ml-auto md:block">
                 <div className="flex items-center">
                   {/* Profile dropdown */}
-                  <Menu as="div" className="relative flex items-center flex-shrink-0 ml-3 gap-x-6">
+                  <Menu as="div" className="relative ml-3 flex flex-shrink-0 items-center gap-x-6">
                     {authenticated && (
                       <>
                         <div>
                           <Link href="/profile" passHref>
-                            <button className="flex text-sm text-white rounded-sm focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-gray-600">
+                            <button className="flex rounded-sm text-sm text-white focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-gray-600">
                               <span className="sr-only">Open user menu</span>
                               <img
-                                className="rounded-md w-14"
+                                className="w-14 rounded-md"
                                 src={avatar ?? '/images/placeholder.png'}
                                 alt=""
                               />
@@ -130,7 +166,7 @@ export const Header = () => {
                           </Link>
                         </div>
                         <Link href="/api/auth/logout" passHref>
-                          <button className="flex text-sm text-white rounded-sm focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-gray-600">
+                          <button className="flex rounded-sm text-sm text-white focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-gray-600">
                             <span className="sr-only">Open user menu</span>
                             <LogoutIcon />
                           </button>
@@ -157,19 +193,19 @@ export const Header = () => {
                   <Link shallow={true} key={item.name} href={item.href} passHref>
                     <Disclosure.Button
                       as="a"
-                      className="px-3 py-1 text-base font-medium rounded-md">
+                      className="rounded-md px-3 py-1 text-base font-medium">
                       {item.name}
                     </Disclosure.Button>
                   </Link>
                 ))}
               </div>
 
-              <div className="pt-4 pb-3 border-t">
+              <div className="border-t pt-4 pb-3">
                 <div className="flex items-center px-5">
                   <div className="flex-shrink-0">
                     <Link href="/profile" passHref prefetch>
                       <img
-                        className="w-10 h-10 rounded-sm"
+                        className="h-10 w-10 rounded-sm"
                         src={avatar ?? '/images/placeholder.png'}
                         alt=""
                       />
@@ -182,12 +218,12 @@ export const Header = () => {
                       {user?.publicAddress}
                     </div>
                   </div>
-                  <p className="pl-8 ml-auto"></p>
+                  <p className="ml-auto pl-8"></p>
 
                   <Link href="/api/auth/logout" passHref>
                     <button
                       onClick={disconnect}
-                      className="text-sm text-white rounded-sm focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-gray-600">
+                      className="rounded-sm text-sm text-white focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-gray-600">
                       <span className="sr-only">Open user menu</span>
                       <LogoutIcon />
                     </button>
diff --git a/src/components/load-more-button.tsx b/src/components/load-more-button.tsx
index 3491701..2d869c7 100644
--- a/src/components/load-more-button.tsx
+++ b/src/components/load-more-button.tsx
@@ -18,13 +18,13 @@ const LoadMoreButton = ({
     type="button"
     className={clsx(
       'dark:text-white dark:hover:text-gray-900',
-      'mt-10 relative inline-flex items-center justify-center p-0.5 mb-2 mr-2 overflow-hidden text-sm font-medium text-gray-900 hover:text-white rounded-lg group bg-gradient-to-br from-red-200 via-red-300 to-yellow-200 group-hover:from-red-200 group-hover:via-red-300 group-hover:to-yellow-200 focus:ring-4 focus:ring-red-100 dark:focus:ring-red-400 hover:cursor-pointer',
+      'group relative mt-10 mb-2 mr-2 inline-flex items-center justify-center overflow-hidden rounded-lg bg-gradient-to-br from-red-200 via-red-300 to-yellow-200 p-0.5 text-sm font-medium text-gray-900 hover:cursor-pointer hover:text-white focus:ring-4 focus:ring-red-100 group-hover:from-red-200 group-hover:via-red-300 group-hover:to-yellow-200 dark:focus:ring-red-400',
       disabled && 'cursor-not-allowed',
       loading && 'cursor-wait'
     )}
     onClick={onLoadMoreClick}
   >
-    <span className="relative px-5 py-2.5 transition-all ease-in duration-75 bg-white dark:bg-gray-900 rounded-md group-hover:bg-opacity-0 ">
+    <span className="relative rounded-md bg-white px-5 py-2.5 transition-all duration-75 ease-in group-hover:bg-opacity-0 dark:bg-gray-900 ">
       {loading ? 'LOADING' : 'LOAD MORE'}
     </span>
   </button>
diff --git a/src/components/loading-table.tsx b/src/components/loading-table.tsx
index 7a40352..ba5d453 100644
--- a/src/components/loading-table.tsx
+++ b/src/components/loading-table.tsx
@@ -2,7 +2,7 @@ import clsx from 'clsx';
 import * as React from 'react';
 const LoadingTable = ({ fakeRowsCount }: { fakeRowsCount?: number }) => {
   return (
-    <div className="grid flex-grow gap-3 p-6 shadow-xl rounded-xl bg-base-100 w-full rounded-tl-none">
+    <div className="bg-base-100 grid w-full flex-grow gap-3 rounded-xl rounded-tl-none p-6 shadow-xl">
       <div className="overflow-x-auto">
         <table className="table w-full">
           <tbody>
@@ -21,27 +21,27 @@ const LoadingTable = ({ fakeRowsCount }: { fakeRowsCount?: number }) => {
                 <td>
                   <div className="flex items-center space-x-3">
                     <div className="avatar">
-                      <div className="w-10 h-10 mask mask-squircle bg-gray-400"></div>
+                      <div className="mask mask-squircle h-10 w-10 bg-gray-400"></div>
                     </div>
                   </div>
                 </td>
                 <td>
                   <div>
-                    <div className="font-bold bg-gray-400 w-28  h-2 rounded border"></div>
+                    <div className="h-2 w-28 rounded  border bg-gray-400 font-bold"></div>
                   </div>
                 </td>
                 <td>
                   <div>
-                    <div className="font-bold bg-gray-400 w-56 h-2 rounded border"></div>
+                    <div className="h-2 w-56 rounded border bg-gray-400 font-bold"></div>
                   </div>
                 </td>
                 <td>
                   <div>
-                    <div className="font-bold bg-gray-400 w-16 h-2 rounded border"></div>
+                    <div className="h-2 w-16 rounded border bg-gray-400 font-bold"></div>
                   </div>
                 </td>
                 <th>
-                  <div className=" bg-gray-400 w-12 h-4 rounded border"></div>
+                  <div className=" h-4 w-12 rounded border bg-gray-400"></div>
                 </th>
               </tr>
             ))}
diff --git a/src/components/loading-transaction.tsx b/src/components/loading-transaction.tsx
index 66e2bc4..48c02d8 100644
--- a/src/components/loading-transaction.tsx
+++ b/src/components/loading-transaction.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 
 export const LoadingTransaction = () => (
-  <div className="md:w-[400px] w-full mt-8">
+  <div className="mt-8 w-full md:w-[400px]">
     <div className="mx-auto rounded-md border border-blue-300 p-4 shadow">
       <div className="flex animate-pulse space-x-4">
         <div className="flex-1 space-y-6 py-1">
diff --git a/src/components/profile/index.ts b/src/components/profile/index.ts
index e803840..4b3ee4a 100644
--- a/src/components/profile/index.ts
+++ b/src/components/profile/index.ts
@@ -1,2 +1,2 @@
 export * from './avatar';
-export * from './profile-table-row';
\ No newline at end of file
+export * from './profile-table-row';
diff --git a/src/components/profile/profile-table-row.tsx b/src/components/profile/profile-table-row.tsx
index 3020ab2..5677371 100644
--- a/src/components/profile/profile-table-row.tsx
+++ b/src/components/profile/profile-table-row.tsx
@@ -73,9 +73,9 @@ export const ProfileRow = ({
   };
 
   return (
-    <div className="flex items-center justify-between w-full space-x-4 md:space-x-8">
+    <div className="flex w-full items-center justify-between space-x-4 md:space-x-8">
       <img
-        className="w-8 h-8 rounded-full"
+        className="h-8 w-8 rounded-full"
         src={image ?? `/images/placeholder.png`}
         alt="ens avatar"
       />
@@ -86,14 +86,15 @@ export const ProfileRow = ({
             className={clsx(
               `truncate text-sm font-medium text-gray-900 md:text-lg`,
               `hover:decoration-solid dark:text-white dark:hover:text-gray-200`
-            )}>
+            )}
+          >
             {name}
           </a>
         </Link>
       </div>
       <div className="hidden md:w-full"></div>
 
-      <p className="mr-auto text-sm font-medium text-gray-900 truncate dark:text-white md:whitespace-normal md:text-lg">
+      <p className="mr-auto truncate text-sm font-medium text-gray-900 dark:text-white md:whitespace-normal md:text-lg">
         {utils.getAddress(userAddress)}
       </p>
       <div className="hidden md:w-full"></div>
@@ -105,13 +106,15 @@ export const ProfileRow = ({
       <div className="ml-auto">
         <button
           onClick={followUser}
-          className="flex items-center px-0 ml-auto text-sm font-medium text-blue-700 uppercase rounded-lg hover:bg-gray-100 dark:text-blue-500 dark:hover:bg-gray-700 sm:text-sm md:px-2 md:text-lg">
+          className="ml-auto flex items-center rounded-lg px-0 text-sm font-medium uppercase text-blue-700 hover:bg-gray-100 dark:text-blue-500 dark:hover:bg-gray-700 sm:text-sm md:px-2 md:text-lg"
+        >
           <svg
             xmlns="http://www.w3.org/2000/svg"
-            className="w-5 h-5 md:h-6 md:w-6"
+            className="h-5 w-5 md:h-6 md:w-6"
             fill="none"
             viewBox="0 0 24 24"
-            stroke="currentColor">
+            stroke="currentColor"
+          >
             <path
               strokeLinecap="round"
               strokeLinejoin="round"
diff --git a/src/components/red-yellow-button.tsx b/src/components/red-yellow-button.tsx
index eceb563..6c8d7dd 100644
--- a/src/components/red-yellow-button.tsx
+++ b/src/components/red-yellow-button.tsx
@@ -16,11 +16,11 @@ const RedYellowButton = ({
     disabled={disabled}
     onClick={onButtonClick}
     className={clsx(
-      'relative inline-flex w-full items-center justify-center p-0.5 mb-2 overflow-hidden text-sm font-medium text-gray-900 rounded-lg group bg-gradient-to-br from-red-200 via-red-300 to-yellow-200 group-hover:from-red-200 group-hover:via-red-300 group-hover:to-yellow-200 dark:text-white dark:hover:text-gray-900 focus:ring-4 focus:ring-red-100 dark:focus:ring-red-400',
+      'group relative mb-2 inline-flex w-full items-center justify-center overflow-hidden rounded-lg bg-gradient-to-br from-red-200 via-red-300 to-yellow-200 p-0.5 text-sm font-medium text-gray-900 focus:ring-4 focus:ring-red-100 group-hover:from-red-200 group-hover:via-red-300 group-hover:to-yellow-200 dark:text-white dark:hover:text-gray-900 dark:focus:ring-red-400',
       hidden && 'hidden'
     )}
   >
-    <span className="w-full relative px-5 py-2.5 transition-all ease-in duration-75 bg-white dark:bg-gray-900 rounded-md group-hover:bg-opacity-0 font-semibold">
+    <span className="relative w-full rounded-md bg-white px-5 py-2.5 font-semibold transition-all duration-75 ease-in group-hover:bg-opacity-0 dark:bg-gray-900">
       {text}
     </span>
   </button>
diff --git a/src/components/search-bar-modal.tsx b/src/components/search-bar-modal.tsx
index 4ae2967..4d38274 100644
--- a/src/components/search-bar-modal.tsx
+++ b/src/components/search-bar-modal.tsx
@@ -87,7 +87,8 @@ const SearchBarModal = () => {
         className={clsx(
           `flex h-8 w-8 items-center justify-center text-gray-500 hover:text-gray-600`,
           `dark:text-gray-300`
-        )}>
+        )}
+      >
         <span className="sr-only">Navigation</span>
         <svg
           width="24"
@@ -97,7 +98,8 @@ const SearchBarModal = () => {
           strokeWidth="2"
           strokeLinecap="round"
           strokeLinejoin="round"
-          aria-hidden="true">
+          aria-hidden="true"
+        >
           <path d="m19 19-3.5-3.5"></path>
           <circle cx="11" cy="11" r="6"></circle>
         </svg>
@@ -106,7 +108,8 @@ const SearchBarModal = () => {
         <Dialog
           onClose={hideModal}
           onKeyPress={onEnter}
-          className="fixed inset-0 z-50 overflow-y-auto backdrop-blur-[1px]">
+          className="fixed inset-0 z-50 overflow-y-auto backdrop-blur-[1px]"
+        >
           <div className="flex min-h-screen items-center justify-center">
             <Transition.Child
               as={React.Fragment}
@@ -115,7 +118,8 @@ const SearchBarModal = () => {
               enterTo="opacity-100"
               leave="ease-in duration-200"
               leaveFrom="opacity-100"
-              leaveTo="opacity-0">
+              leaveTo="opacity-0"
+            >
               <Dialog.Overlay className="fixed inset-0 bg-black opacity-70" />
             </Transition.Child>
             <Transition.Child
@@ -125,11 +129,13 @@ const SearchBarModal = () => {
               enterTo="opacity-100 scale-100"
               leave="ease-in duration-200"
               leaveFrom="opacity-100 scale-100"
-              leaveTo="opacity-0 scale-95">
+              leaveTo="opacity-0 scale-95"
+            >
               <div className="fixed top-[40%] w-full max-w-[30rem] rounded-lg bg-white text-base font-semibold text-gray-900 shadow-lg">
                 <Dialog.Title
                   as="div"
-                  className="ml-auto flex h-12 justify-evenly space-x-3 rounded-lg bg-white p-1 px-3 text-left text-gray-400 shadow-sm ring-[1px] ring-gray-900/10 ring-gray-400 hover:ring-gray-300 md:flex">
+                  className="ml-auto flex h-12 justify-evenly space-x-3 rounded-lg bg-white p-1 px-3 text-left text-gray-400 shadow-sm ring-[1px] ring-gray-900/10 ring-gray-400 hover:ring-gray-300 md:flex"
+                >
                   <button onClick={onSearchClick} className="outline-none">
                     <svg
                       width="24"
@@ -140,7 +146,8 @@ const SearchBarModal = () => {
                       strokeLinecap="round"
                       strokeLinejoin="round"
                       className="flex-none text-gray-300"
-                      aria-hidden="true">
+                      aria-hidden="true"
+                    >
                       <path d="m19 19-3.5-3.5"></path>
                       <circle cx="11" cy="11" r="6"></circle>
                     </svg>
diff --git a/src/components/search-bar.tsx b/src/components/search-bar.tsx
index 3455b08..476cd07 100644
--- a/src/components/search-bar.tsx
+++ b/src/components/search-bar.tsx
@@ -25,7 +25,8 @@ const InvalidAddressToast = () => (
       target="_blank"
       href="https://metamask.zendesk.com/hc/en-us/articles/360015289512"
       rel="noreferrer"
-      className="underline">
+      className="underline"
+    >
       Where can I find my address?
     </a>
   </p>
diff --git a/src/components/skeleton-card.tsx b/src/components/skeleton-card.tsx
index 9bce3d8..24c65d8 100644
--- a/src/components/skeleton-card.tsx
+++ b/src/components/skeleton-card.tsx
@@ -1,12 +1,12 @@
 import * as React from 'react';
 
 export const SkeletonCard = () => (
-  <div className="w-full min-w-min max-w-xs h-full min-h-[18rem] bg-white rounded-lg border border-gray-200 shadow-md dark:bg-gray-800 dark:border-gray-700 p-2">
-    <div className="pb-0 bg-gray-200 h-5/6 min-h-[14.5rem] p-2 rounded-md animate-pulse card translate-3d-none-after card translate-3d-none-after border"></div>
-    <div className="pt-2 mt-2 h-2 bg-slate-200 rounded w-3/4"></div>
+  <div className="h-full min-h-[18rem] w-full min-w-min max-w-xs rounded-lg border border-gray-200 bg-white p-2 shadow-md dark:border-gray-700 dark:bg-gray-800">
+    <div className="card translate-3d-none-after card translate-3d-none-after h-5/6 min-h-[14.5rem] animate-pulse rounded-md border bg-gray-200 p-2 pb-0"></div>
+    <div className="mt-2 h-2 w-3/4 rounded bg-slate-200 pt-2"></div>
     <div className="flex flex-row justify-between align-bottom">
-      <p className="pt-2 mt-2 h-2 bg-slate-200 rounded w-1/6"></p>
-      <p className="pt-2 mt-2 h-2 bg-slate-200 rounded w-1/6"></p>
+      <p className="mt-2 h-2 w-1/6 rounded bg-slate-200 pt-2"></p>
+      <p className="mt-2 h-2 w-1/6 rounded bg-slate-200 pt-2"></p>
     </div>
   </div>
 );
diff --git a/src/components/user-row.tsx b/src/components/user-row.tsx
index d9e5ac3..26a71e1 100644
--- a/src/components/user-row.tsx
+++ b/src/components/user-row.tsx
@@ -10,7 +10,7 @@ export const Row = ({ address }: { address: string }) => {
       <a className="flex items-center space-x-4">
         <div className="flex-shrink-0">
           <img
-            className="w-8 h-8 rounded-full"
+            className="h-8 w-8 rounded-full"
             src={avatar ?? `/images/placeholder.png`}
             alt="User avatar"
           />
@@ -18,8 +18,8 @@ export const Row = ({ address }: { address: string }) => {
         <div className="flex-shrink-0">
           <p className="text-sm font-medium text-gray-900 dark:text-white">{ens ?? `N/A`}</p>
         </div>
-        <div className="flex-1 min-w-0">
-          <p className="text-xs font-medium text-gray-900 truncate dark:text-white">{address}</p>
+        <div className="min-w-0 flex-1">
+          <p className="truncate text-xs font-medium text-gray-900 dark:text-white">{address}</p>
         </div>
       </a>
     </Link>
diff --git a/src/components/wallet-modal.tsx b/src/components/wallet-modal.tsx
index f404dc2..b341ba2 100644
--- a/src/components/wallet-modal.tsx
+++ b/src/components/wallet-modal.tsx
@@ -18,7 +18,8 @@ export default function WalletModal() {
         className={clsx(
           `flex h-8 w-8 items-center justify-center text-gray-500 hover:text-gray-600`,
           `dark:text-gray-200`
-        )}>
+        )}
+      >
         <span className="sr-only">Navigation</span>
         <svg width="24" height="24" fill="none" aria-hidden="true">
           <path
@@ -26,13 +27,15 @@ export default function WalletModal() {
             stroke="currentColor"
             strokeWidth="1.5"
             strokeLinecap="round"
-            strokeLinejoin="round"></path>
+            strokeLinejoin="round"
+          ></path>
         </svg>
       </button>
       <Transition appear show={open} as={React.Fragment}>
         <Dialog
           onClose={hideModal}
-          className="fixed inset-0 z-50 overflow-y-auto backdrop-blur-[1px]">
+          className="fixed inset-0 z-50 overflow-y-auto backdrop-blur-[1px]"
+        >
           <div className="flex min-h-screen items-center justify-center">
             <Transition.Child
               as={React.Fragment}
@@ -41,7 +44,8 @@ export default function WalletModal() {
               enterTo="opacity-100"
               leave="ease-in duration-200"
               leaveFrom="opacity-100"
-              leaveTo="opacity-0">
+              leaveTo="opacity-0"
+            >
               <Dialog.Overlay className="fixed inset-0 bg-black opacity-10" />
             </Transition.Child>
             <Transition.Child
@@ -51,7 +55,8 @@ export default function WalletModal() {
               enterTo="opacity-100 scale-100"
               leave="ease-in duration-200"
               leaveFrom="opacity-100 scale-100"
-              leaveTo="opacity-0 scale-95">
+              leaveTo="opacity-0 scale-95"
+            >
               <div className="fixed top-14 right-6 w-full max-w-[14.8rem] rounded-lg bg-white text-base font-semibold text-gray-900 shadow-lg">
                 <Dialog.Title as="div" className="flex justify-evenly p-6">
                   <WalletNav />
diff --git a/src/components/wallet-nav.tsx b/src/components/wallet-nav.tsx
index a84fa53..7c7df83 100644
--- a/src/components/wallet-nav.tsx
+++ b/src/components/wallet-nav.tsx
@@ -61,7 +61,8 @@ const WalletNav = () => {
         className={clsx(
           'flex items-center space-x-4 text-sm font-semibold leading-6 text-gray-700 hover:text-black ',
           'dark:text-gray-200'
-        )}>
+        )}
+      >
         {/* Connect wallet button */}
         <li>
           <button
@@ -69,7 +70,8 @@ const WalletNav = () => {
             className={clsx(
               'flex h-11 w-[160px] items-center justify-center rounded-lg border bg-[#0c0c0c] px-5 font-semibold text-white shadow-[0_4px_30px_rgba(0,0,0,0.1)] backdrop-blur-md hover:bg-black focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2 focus:ring-offset-gray-50',
               'dark:bg-gray-700 dark:hover:bg-gray-900 dark:focus:bg-gray-700 dark:focus:ring-2 dark:focus:ring-gray-900 dark:focus:ring-offset-2 dark:focus:ring-offset-gray-900'
-            )}>
+            )}
+          >
             {buttonText}
           </button>
         </li>
@@ -81,7 +83,8 @@ const WalletNav = () => {
                 className="w-7 dark:text-gray-400"
                 fill="none"
                 viewBox="0 0 24 24"
-                stroke="currentColor">
+                stroke="currentColor"
+              >
                 <path
                   strokeLinecap="round"
                   strokeLinejoin="round"
diff --git a/src/lib/auth/index.ts b/src/lib/auth/index.ts
index 8611b19..680378f 100644
--- a/src/lib/auth/index.ts
+++ b/src/lib/auth/index.ts
@@ -1,4 +1,4 @@
 export * from './auth';
 export * from './tokens';
 export * from './fetch-user';
-export * from './logout';
\ No newline at end of file
+export * from './logout';
diff --git a/src/lib/clients/prisma.ts b/src/lib/clients/prisma.ts
index 6873824..1e015ec 100644
--- a/src/lib/clients/prisma.ts
+++ b/src/lib/clients/prisma.ts
@@ -12,13 +12,17 @@ let prisma: PrismaClient;
 
 if (typeof window === 'undefined') {
   if (process.env.NODE_ENV === 'production') {
-    prisma = new PrismaClient();
+    prisma = new PrismaClient({
+      log: ['query'],
+    });
   } else {
     let globalWithPrisma = global as typeof globalThis & {
       prisma: PrismaClient;
     };
     if (!globalWithPrisma.prisma) {
-      globalWithPrisma.prisma = new PrismaClient();
+      globalWithPrisma.prisma = new PrismaClient({
+        log: ['query'],
+      });
     }
 
     prisma = globalWithPrisma.prisma;
diff --git a/src/lib/clients/react-query.ts b/src/lib/clients/react-query.ts
index cb7d655..89bcb25 100644
--- a/src/lib/clients/react-query.ts
+++ b/src/lib/clients/react-query.ts
@@ -1,5 +1,11 @@
 import { QueryClient } from 'react-query';
 
-export const queryClient = new QueryClient();
+export const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      notifyOnChangeProps: 'tracked',
+    },
+  },
+});
 
 export default queryClient;
diff --git a/src/lib/wrappers/alchemy.ts b/src/lib/wrappers/alchemy.ts
index 6125129..e662ccb 100644
--- a/src/lib/wrappers/alchemy.ts
+++ b/src/lib/wrappers/alchemy.ts
@@ -1,7 +1,18 @@
 import axios from 'axios';
 
-const KEY = process.env.NEXT_PUBLIC_ALCHEMY_KEY;
-const BASE_URL = `https://eth-mainnet.g.alchemy.com/${KEY}/v1`;
+import type {
+  AlchemyGetBlockReceiptsRequest,
+  AlchemyGetBlockReceiptsResponse,
+  AlchemyBlockNumberResponse,
+  AlchemyGetAssetTransfersResponse,
+  AlchemyGetAssetTransfersRequest,
+} from './alchemy.types';
+
+import { AssetTransfersCategory } from '@alch/alchemy-web3';
+
+import { to32BytesHash } from '@/utils';
+
+//const KEY = process.env.NEXT_PUBLIC_ALCHEMY_KEY;
 
 type Attribute = { value: string; trait_type: string };
 type Metadata = { image: string; attributes: Attribute[] };
@@ -39,6 +50,76 @@ type NFTMetadataRequest = {
   tokenType?: string;
 };
 
+const KEY = process.env.NEXT_PUBLIC_ALCHEMY_KEY;
+const URL = `https://eth-mainnet.alchemyapi.io/v2/${KEY}`;
+const BASE_URL = `https://eth-mainnet.g.alchemy.com/${KEY}/v1`;
+
+export interface AlchemyRequest {
+  id?: number;
+  method: string;
+  params: string | string[] | any[];
+}
+async function alchemyRequest<T>({ id = 0, method, params }: AlchemyRequest) {
+  const response = await axios.post<Promise<T>>(URL, {
+    jsonrpc: '2.0',
+    id,
+    method,
+    params,
+  });
+  return response;
+}
+
+export async function alchemyGetAssetTransfers({
+  fromBlock = 1,
+  toBlock = 'latest',
+  fromAddress,
+  toAddress,
+  contractAddresses = [],
+  maxCount = 10,
+  pageKey,
+  excludeZeroValues = true,
+  category = Object.values(AssetTransfersCategory),
+}: AlchemyGetAssetTransfersRequest) {
+  const requestParams = {
+    fromBlock: to32BytesHash(fromBlock as number),
+    toBlock: typeof toBlock === 'string' ? toBlock : to32BytesHash(toBlock as number),
+    maxCount: to32BytesHash(maxCount as number),
+    fromAddress,
+    toAddress,
+    pageKey,
+    category,
+    contractAddresses,
+    excludeZeroValues,
+  };
+  const { data, status } = await alchemyRequest<AlchemyGetAssetTransfersResponse>({
+    method: 'alchemy_getAssetTransfers',
+    params: [JSON.parse(JSON.stringify(requestParams))],
+  });
+  if (status !== 200) return Promise.reject('Error fetching asset transfers');
+  return data;
+}
+
+export async function alchemyGetBlockReceipts({
+  blockNumberOrHash = 'latest',
+}: AlchemyGetBlockReceiptsRequest = {}): Promise<AlchemyGetBlockReceiptsResponse> {
+  const { data, status } = await alchemyRequest<AlchemyGetBlockReceiptsResponse>({
+    method: 'eth_getBlockReceipts',
+    params: [blockNumberOrHash],
+  });
+  if (status !== 200) return Promise.reject('eth_getBlockReceipts F');
+  return data;
+}
+
+/** returns block number hash, so do Number(blockNumber) */
+export async function alchemyBlockNumber(): Promise<AlchemyBlockNumberResponse> {
+  const { data, status } = await alchemyRequest<AlchemyBlockNumberResponse>({
+    method: 'eth_blockNumber',
+    params: [],
+  });
+  if (status !== 200) return Promise.reject('eth_blockNumber F');
+  return data;
+}
+
 export const nftMetadata = async ({
   contractAddress,
   tokenId,
diff --git a/src/lib/wrappers/alchemy.types.ts b/src/lib/wrappers/alchemy.types.ts
new file mode 100644
index 0000000..eba6575
--- /dev/null
+++ b/src/lib/wrappers/alchemy.types.ts
@@ -0,0 +1,87 @@
+interface AlchemyBaseResponse {
+  jsonrpc: '2.0';
+  id: 0;
+  error?: AlchemyErrorResponse;
+}
+
+interface AlchemyErrorResponse {
+  error: { code: number; message: string };
+}
+
+import type { AssetTransfersCategory } from '@alch/alchemy-web3';
+export interface AlchemyGetAssetTransfersRequest {
+  fromBlock?: string | number;
+  toBlock?: string | number;
+  fromAddress?: string;
+  toAddress?: string;
+  contractAddresses?: Array<string>;
+  maxCount?: string | number;
+  pageKey?: string;
+  excludeZeroValues?: boolean;
+  category?: AssetTransfersCategory[];
+}
+
+export interface AlchemyBlockNumberResponse extends AlchemyBaseResponse {
+  result: string;
+}
+
+export interface AlchemyGetBlockReceiptsRequest {
+  blockNumberOrHash?: string | number;
+}
+export interface AlchemyGetBlockReceiptsResponse extends AlchemyBaseResponse {
+  blockHash: string;
+  blockNumber: string;
+  contractAddress: null;
+  cumulativeGasUsed: string;
+  effectiveGasPrice: string;
+  from: string;
+  gasUsed: string;
+  logs: Log[];
+  logsBloom: string;
+  status: string;
+  to: string;
+  transactionHash: string;
+  transactionIndex: string;
+  type: string;
+}
+
+interface Log {
+  address: string;
+  topics: string[];
+  data: string;
+  blockNumber: string;
+  transactionHash: string;
+  transactionIndex: string;
+  blockHash: string;
+  logIndex: string;
+  removed: boolean;
+}
+
+export interface AlchemyGetAssetTransfersResponse extends AlchemyBaseResponse {
+  result: Result;
+}
+
+interface Result {
+  transfers: Transfer[];
+  pageKey: string;
+}
+
+export interface Transfer {
+  blockNum: string;
+  hash: string;
+  from: string;
+  to: string;
+  value: number;
+  erc721TokenId: null;
+  erc1155Metadata: null;
+  tokenId: null;
+  asset: string;
+  category: string;
+  rawContract: RawContract;
+}
+
+interface RawContract {
+  value: string;
+  address: string;
+  decimal: string;
+}
diff --git a/src/lib/wrappers/covalent.constants.ts b/src/lib/wrappers/covalent.constants.ts
new file mode 100644
index 0000000..8ccd897
--- /dev/null
+++ b/src/lib/wrappers/covalent.constants.ts
@@ -0,0 +1,5 @@
+export const KEY = process.env.NEXT_PUBLIC_COVALENT_KEY;
+export const URL = 'https://api.covalenthq.com/v1';
+
+// This is straight from covalent's docs
+export const CHAINS = { ETHEREUM: 1, SOLANA: 1399811149 };
diff --git a/src/lib/wrappers/covalent.ts b/src/lib/wrappers/covalent.ts
index 148823f..0ee1f2d 100644
--- a/src/lib/wrappers/covalent.ts
+++ b/src/lib/wrappers/covalent.ts
@@ -1,58 +1,174 @@
-import { base64Encode } from '@/utils';
-import { utils } from 'ethers';
 import axios from 'axios';
+import { utils } from 'ethers';
+import { KEY, URL, CHAINS } from './covalent.constants';
+import type {
+  CovalentRequest,
+  CovalentBaseRequest,
+  PortfolioValueRequest,
+  PortfolioValueResponse,
+  NftMarketGlobalViewRequest,
+  NftMarketGlobalViewResponse,
+  AddressTokenBalancesRequest,
+  AddressTokenBalancesResponse,
+  CovalentGetTxsForAddressRequest,
+  CovalentGetTxsForAddressResponse,
+} from './covalent.types';
 
-const COVALENT_ENDPOINT = 'https://api.covalenthq.com/v1';
-const COVALENT_API_KEY = process.env.NEXT_PUBLIC_COVALENT_API_KEY;
-// Ethereum's chain ID
-const CHAIN_ID = 1;
-
-const CovalentRequest = async (relativePath: string) => {
-  const url = `${COVALENT_ENDPOINT}/${CHAIN_ID}/${relativePath}`;
-  try {
-    const response = await axios.get(url, {
-      headers: { Authorization: `Basic ${base64Encode(COVALENT_API_KEY)}` },
-    });
-    return response.data;
-  } catch (error: unknown) {
-    console.error(`Error in CovalentRequest: `, error instanceof Error ? error.message : error);
-  }
-
-  return {
-    success: false,
-    message: 'error in CovalentRequest',
-  };
+// those can be overwritten in any of the requests
+const defaultParams: CovalentBaseRequest = {
+  'quote-currency': 'USD',
+  format: 'JSON',
 };
 
 /**
+ * * Docs: https://www.covalenthq.com/docs/api/#/0/0/USD/1
+ */
+async function covalentRequest<T>({ relativePath, params = defaultParams }: CovalentRequest) {
+  params['key'] = KEY;
+  const url = `${URL}/${relativePath}/?`;
+  return await axios.get<Promise<T>>(url, { params });
+}
+
+/**
+ * * Docs: https://www.covalenthq.com/docs/api/#/0/Get%20transactions%20for%20address/USD/1
  * retrieve past transactions for a given address
- * @param address accepts ethereum address or ENS name
- * @param limit number of transactions to return, default is 0 which means no limit
  */
-export const getTransactionsForAddress = async ({
+export const covalentGetTxsForAddress = async ({
   address,
-  limit = 1,
-}: {
-  address: string;
-  limit?: number;
-}) => {
+  'block-signed-at-asc': blockSignedAtAsc = false,
+  'no-logs': noLogs = false,
+  'page-number': pageNumber = undefined,
+  'page-size': pageSize = undefined,
+  chain_id = CHAINS.ETHEREUM,
+}: CovalentGetTxsForAddressRequest): Promise<CovalentGetTxsForAddressResponse> => {
   const _address = utils.getAddress(address);
-  const relativePath = `address/${_address}/transactions_v2/?limit=${limit}`;
-  return await CovalentRequest(relativePath);
+  const relativePath = `${chain_id}/address/${_address}/transactions_v2`;
+  const params = {
+    'block-signed-at-asc': blockSignedAtAsc,
+    'no-logs': noLogs,
+    'page-number': pageNumber,
+    'page-size': pageSize,
+  };
+
+  const response = await covalentRequest<CovalentGetTxsForAddressResponse>({
+    relativePath,
+    params: JSON.parse(JSON.stringify(params)),
+  });
+  return response.data;
 };
 
+/**
+ * * Docs: https://www.covalenthq.com/docs/api/#/0/Get%20token%20balances%20for%20address/USD/1
+ * @param address ethereum, ENS name, or solana address.
+ *
+ * - NOTE: using ENS name slows down the request by a lot
+ * @param chain 'ETHEREUM' or 'SOLANA, default is 'ETHEREUM'
+ *
+ * ```ts
+ * covalentTokenBalances({
+ *    address: 'brantly.eth',
+ *    includeNft: true,
+ *    includeNftMetadata: true,
+ * }).then(_ => console.log(JSON.stringify(_, null, 2)));
+ * ```
+ */
+export async function covalentTokenBalances({
+  address,
+  includeNft,
+  includeNftMetadata,
+}: AddressTokenBalancesRequest): Promise<AddressTokenBalancesResponse> {
+  const queryParams = {
+    nft: includeNft.toString(),
+    'no-nft-fetch': (!includeNftMetadata).toString(), // inverted
+  };
+
+  const relativePath = `address/${address}/balances_v2`;
+  const { data } = await covalentRequest<AddressTokenBalancesResponse>({
+    relativePath,
+    params: queryParams,
+  });
+
+  if (!data) {
+    throw new Error('Error while fetching covalent token balances');
+  }
+  return data;
+}
+
+/**
+ ** Docs: https://www.covalenthq.com/docs/api/#/0/Get%20token%20balances%20for%20address/USD/1
+ *
+ * * All params are optional
+ * if @params from and to must both be included or both be omitted
+ * @param dateRange
+ *      - from The start day of the historical market data. (YYYY-MM-DD)
+ *
+ *      - to The start day of the historical market data. (YYYY-MM-DD)
+ * @param pageNumber The specific page to be returned.
+ * @param pageSize The number of items to be returned per page.
+ *
+ * * Example:
+ * ```ts
+ • nftMarketGlobalView({
+ *   pageNumber: 0,
+ *   pageSize: 2,
+ * }).then(console.log);
+ * ```
+ */
+// export async function covalentNftMarketGlobalView({
+//   dateRange,
+//   pageNumber,
+//   pageSize,
+// }: NftMarketGlobalViewRequest = {}): Promise<NftMarketGlobalViewResponse> {
+//   const queryParams = {
+//     from: dateRange?.from,
+//     to: dateRange?.to,
+//     'page-number': pageNumber,
+//     'page-size': pageSize,
+//   };
+
+//   const relativePath = `nft_market`;
+//   const { data } = await covalentRequest<NftMarketGlobalViewResponse>({
+//     relativePath,
+//     // parse then stringify to remove undefined values
+//     params: JSON.parse(JSON.stringify(queryParams)),
+//   });
+//   if (!data) {
+//     throw new Error('Error while fetching covalent nft market global view');
+//   }
+//   return data;
+// }
+
+/**
+ **https://www.covalenthq.com/docs/api/#/0/Get%20historical%20portfolio%20value%20over%20time/USD/1
+ * * Example:
+ * ```ts
+ * getPortfolioValue({ address: '0x0F4ee9631f4be0a63756515141281A3E2B293Bbe' }).then(console.log);
+ * ```
+ */
+
+export async function covalentGetPortfolioValue({
+  address,
+}: PortfolioValueRequest): Promise<PortfolioValueResponse> {
+  const relativePath = `address/${address}/portfolio_v2`;
+  const { data } = await covalentRequest<PortfolioValueResponse>({ relativePath });
+  if (!data) {
+    throw new Error('Error while fetching covalent portfolio value');
+  }
+  return data;
+}
+
 /**
  * retrieve transaction logs given a transaction hash
  * @param hash: transaction hash
  */
 export const getTransaction = async (hash: string) => {
   const relativePath = `transactions_v2/${hash}`;
-  return await CovalentRequest(relativePath);
+  return await covalentRequest({ relativePath });
 };
 
 export const getHistoricalPortfolioValue = async (address: string) => {
   const relativePath = `address/${address}/portfolio_v2/`;
-  return CovalentRequest(relativePath);
+  return covalentRequest({ relativePath });
 };
 
 /**
@@ -71,5 +187,5 @@ export const getERC20tokenTransfersForAddress = async ({
   contractAddress?: string;
 }) => {
   const relativePath = `address/${address}/transfers_v2/?contract-address=${contractAddress}&limit=${limit}`;
-  return CovalentRequest(relativePath);
+  return covalentRequest({ relativePath });
 };
diff --git a/src/lib/wrappers/covalent.types.ts b/src/lib/wrappers/covalent.types.ts
new file mode 100644
index 0000000..b3d7836
--- /dev/null
+++ b/src/lib/wrappers/covalent.types.ts
@@ -0,0 +1,154 @@
+import { CHAINS } from './covalent.constants';
+
+export interface CovalentRequest {
+  relativePath: string;
+  params?: any;
+}
+
+export interface CovalentBaseRequest {
+  chain_id?: Chain;
+  format?: 'JSON' | 'CSV';
+  'quote-currency'?: QuoteCurrency;
+}
+
+interface CovalentBaseResponse {
+  error: boolean;
+  error_message: string | null;
+  error_code: number | null;
+}
+
+// covalentGetTxsForAddress()
+export interface CovalentGetTxsForAddressRequest extends CovalentBaseRequest {
+  address: string;
+  'block-signed-at-asc'?: boolean;
+  'no-logs'?: boolean;
+  'page-number'?: number;
+  'page-size'?: number;
+}
+
+export interface CovalentGetTxsForAddressResponse extends CovalentBaseResponse {
+  data?: Data;
+}
+
+// covalentTokenBalances()
+export interface AddressTokenBalancesRequest {
+  address: string;
+  includeNft: boolean;
+  includeNftMetadata: boolean;
+  quoteCurrency?: QuoteCurrency;
+  chain?: Chain;
+}
+
+export interface AddressTokenBalancesResponse extends CovalentBaseResponse {
+  data?: {
+    address: string;
+    updated_at: Date;
+    next_update_at: Date;
+    quote_currency: QuoteCurrency;
+    chain_id: number;
+    items: Item[];
+    pagination: null;
+  };
+}
+
+type Type = 'cryptocurrency' | 'dust' | 'nft';
+
+// NftMarketGlobalView()
+export interface NftMarketGlobalViewRequest {
+  dateRange?: DateRange;
+  pageNumber?: number;
+  pageSize?: number;
+}
+
+type DateRange = {
+  from: string;
+  to: string;
+};
+
+export interface NftMarketGlobalViewResponse extends CovalentBaseResponse {
+  data: Data;
+}
+
+// getPortfolioValue()
+export interface PortfolioValueRequest {
+  address: string;
+  quoteCurrency?: QuoteCurrency;
+  chain?: Chain;
+}
+
+export interface PortfolioValueResponse extends CovalentBaseResponse {
+  data: Data;
+}
+
+export interface PortfolioItem {
+  contract_decimals: number;
+  contract_name: string;
+  contract_ticker_symbol: string;
+  contract_address: string;
+  supports_erc: null;
+  logo_url: string;
+  holdings: Holding[];
+}
+
+interface Data {
+  address: string;
+  updated_at: Date;
+  next_update_at: Date;
+  quote_currency: QuoteCurrency;
+  chain_id: number;
+  items: PortfolioItem[];
+  pagination: null;
+}
+
+interface Holding {
+  timestamp: string;
+  quote_rate: number;
+  open: Close;
+  high: Close;
+  low: Close;
+  close: Close;
+}
+
+interface Close {
+  balance: string;
+  quote: number;
+}
+
+// SHARED
+type Item = {
+  contract_decimals: number;
+  contract_name: null | string;
+  contract_ticker_symbol: null | string;
+  contract_address: string;
+  supports_erc: string[];
+  logo_url: string;
+  last_transferred_at: Date | null;
+  type: Type;
+  balance: string;
+  balance_24h: null;
+  quote_rate: number | null;
+  quote_rate_24h: number | null;
+  quote: number;
+  quote_24h: null;
+  nft_data: null;
+};
+
+type Chain = typeof CHAINS[keyof typeof CHAINS];
+//'ETHEREUM' | 'SOLANA';
+
+type QuoteCurrency =
+  | 'USD'
+  | 'EUR'
+  | 'GBP'
+  | 'CNY'
+  | 'JPY'
+  | 'KRW'
+  | 'BTC'
+  | 'ETH'
+  | 'LTC'
+  | 'SOL'
+  | 'LUNA'
+  | 'USDC'
+  | 'UST'
+  | 'USDT'
+  | 'DAI';
diff --git a/src/pages/api/auth/logout.ts b/src/pages/api/auth/logout.ts
index 5037f87..e7a5510 100644
--- a/src/pages/api/auth/logout.ts
+++ b/src/pages/api/auth/logout.ts
@@ -10,13 +10,11 @@ export default function logoutHandler(request: NextApiRequest, response: NextApi
   try {
     const cookie = serialize(ACCESS_TOKEN_NAME, '', { maxAge: -1, path: '/' });
     response.setHeader('Set-Cookie', cookie);
-
   } catch (error) {
     console.error(
       `Error occured in /api/auth/logout.ts: `,
       error instanceof Error ? error.message : error
     );
-    
   } finally {
     response.writeHead(307, { Location: '/login' });
     response.end();
diff --git a/src/pages/api/auth/verify.ts b/src/pages/api/auth/verify.ts
index 909da99..f163fc9 100644
--- a/src/pages/api/auth/verify.ts
+++ b/src/pages/api/auth/verify.ts
@@ -44,7 +44,6 @@ export default async function verifyHandlerHandler(req: NextApiRequest, res: Nex
     return res
       .status(200)
       .json({ success: true, message: 'successfully verified', user: updateNonce });
-      
   } catch (error) {
     console.error(
       'Error occured in /api/auth/verify.ts: ',
diff --git a/src/pages/feed.tsx b/src/pages/feed.tsx
index 49da8a6..8c9cbc3 100644
--- a/src/pages/feed.tsx
+++ b/src/pages/feed.tsx
@@ -1,82 +1,34 @@
 import * as React from 'react';
-import type {
-  NextPage,
-  GetServerSideProps,
-  GetServerSidePropsContext,
-  GetServerSidePropsResult,
-} from 'next';
-import type {
-  TransactionResponse,
-  WebSocketProvider,
-  AlchemyWebSocketProvider,
-  InfuraWebSocketProvider,
-} from '@ethersproject/providers';
-import dayjs from 'dayjs';
-import { useWebSocketProvider, } from 'wagmi';
 import { useMutation, useQuery } from 'react-query';
-import { valueExists } from '@/utils';
+
 import { TIME } from '@/constants';
+import { valueExists } from '@/utils';
 import { favorite } from '@/lib/mutations';
 import { queryClient } from '@/lib/clients';
 import { LoadingTransaction } from '@/components';
-import { getTransactionsForAddress } from '@/lib/wrappers';
+import { alchemyGetAssetTransfers } from '@/lib/wrappers';
 import { DownArrow, RedHeart, TransparentHeart } from '@/components/icons';
 import { useIsMounted, useFollowings, useFavorites, useUser } from '@/hooks';
+import type { AlchemyGetAssetTransfersResponse } from '@/lib/wrappers/alchemy.types';
+import { Transfer } from '@/lib/wrappers/alchemy.types';
 
-type Provider = AlchemyWebSocketProvider | InfuraWebSocketProvider | WebSocketProvider;
-/**
- * this will get past transactions for followed addresses
- * to help populate the feed on load
- */
-const getPastTransactions = async (addresses: string[]) => {
-  const responses = await Promise.all(
-    addresses.map(async address => {
-      const transactions = await getTransactionsForAddress({
-        address,
-        limit: 3,
-      });
-      return transactions;
-    })
-  );
-  const successResponses = responses.filter(response => response.error === false);
-  const allTransactionsMerged = successResponses.reduce((acc, curr) => {
-    return [...acc, ...curr.data.items];
-  }, []);
-  console.log('allTransactionsMerged', allTransactionsMerged[0]);
-  const filter = (tx: any) => {
-    return {
-      from: tx.from_address,
-      to: tx.to_address,
-      gasPrice: tx.gas_quote,
-      transactionHash: tx.tx_hash,
-      status: tx.successful,
-      blockNumber: tx.block_height,
-      timestamp: dayjs().format('M/DD HH:mm'),
-    };
-  };
-  return allTransactionsMerged.map(filter);
-};
+type FullfilledResult = PromiseFulfilledResult<AlchemyGetAssetTransfersResponse>[];
+async function getAssetTransfers(address: string) {
+  const transfersTo = await alchemyGetAssetTransfers({ toAddress: address });
+  const transfersFrom = await alchemyGetAssetTransfers({ fromAddress: address });
+  const promise = await Promise.allSettled([transfersTo, transfersFrom]);
+  const fulfilled = promise.filter(({ status }) => status === 'fulfilled') as FullfilledResult;
+  return fulfilled.map(({ value }) => value.result?.transfers ?? []).flat();
+}
 
-/**
- * this will get live transactions for followed addresses using websocket
- */
-// TODO
-const getLiveTransactions = async (provider: Provider, addresses: string[]) => {
-  const { transactions } = await provider.getBlockWithTransactions('latest');
-  const filter = (x: TransactionResponse) => addresses.includes(x.from); // || addresses.includes(x.to);
-  return transactions.filter(filter);
-};
-
-const Feed: NextPage = () => {
+const Feed = () => {
   const isMounted = useIsMounted();
 
   const { user } = useUser({ redirectTo: '/login' });
-  const address = user?.publicAddress;
+  const address = user?.publicAddress as string;
 
-  const provider = useWebSocketProvider();
-
-  const [favorites] = useFavorites({ address: address as string });
-  const [followings] = useFollowings({ address: address as string });
+  const [favorites] = useFavorites({ address });
+  const [followings] = useFollowings({ address });
 
   const favoriteMutation = useMutation(
     ({ address, hash }: { address: string; hash: string }) => favorite({ address, hash }),
@@ -85,28 +37,29 @@ const Feed: NextPage = () => {
     }
   );
 
-  const { data: pastTransactions } = useQuery(
-    ['pastTransactions', address],
-    async () => await getPastTransactions(followings),
+  const {
+    data: transactions,
+    isLoading,
+    isError,
+  } = useQuery(
+    ['transfers', address],
+    async () => {
+      const promise = await Promise.allSettled(
+        followings.map(async following => await getAssetTransfers(following))
+      );
+      const fullfilled = promise.filter(
+        result => result.status === 'fulfilled' && result.value
+      ) as PromiseFulfilledResult<any>[];
+      console.log(fullfilled);
+      return fullfilled.map(({ value }) => value).flat();
+    },
     {
-      enabled: !!address,
-      refetchOnWindowFocus: false,
-      refetchInterval: TIME.SECOND * 15,
+      enabled: !!address && !!followings && isMounted,
+      refetchInterval: TIME.MINUTE * 3,
+      //refetchOnWindowFocus: false,
     }
   );
 
-  const { data: transactions } = useQuery(
-    ['feed', address],
-    async () => getLiveTransactions(provider!, followings),
-    {
-      enabled: false, // !!address && valueExists(provider),
-      retry: false,
-      initialData: [],
-      onSettled: data => console.log(`data ${data}, length: ${data?.length}`),
-    }
-  );
-
-  // show 5 fake loading cards while waiting for data
   if (!isMounted) {
     return (
       <>
@@ -119,104 +72,71 @@ const Feed: NextPage = () => {
     );
   }
 
-  let readyTransactions = pastTransactions;
+  let readyTransactions = transactions; //?? [];
 
   return (
-    <main className="flex flex-col items-center w-full mx-auto mt-6 text-white align-top justify-items-start gap-y-4 md:mt-12">
+    <main className="mx-auto mt-6 flex w-full flex-col items-center justify-items-start gap-y-4 align-top text-white md:mt-12">
       {readyTransactions &&
         readyTransactions.length > 0 &&
-        readyTransactions.map((transaction: any, idx: any) => {
+        readyTransactions.map((transaction: Transfer, idx: number) => {
           return (
             <section
               key={idx}
-              className="w-full max-w-xl p-4 text-center bg-white border border-gray-200 rounded-xl dark:border-gray-800 dark:bg-gray-800">
+              className="w-full max-w-xl rounded-xl border border-gray-200 bg-white p-4 text-center dark:border-gray-800 dark:bg-gray-800">
               <a
-                className="block text-xl leading-snug text-black truncate hover:underline dark:text-white"
+                className="block truncate text-xl leading-snug text-black hover:underline dark:text-white"
                 href={`/user/${transaction.from}`}>
                 {transaction.from}
               </a>
               <DownArrow />
               <a
-                className="block my-2 text-xl leading-snug text-black truncate hover:underline dark:text-white"
+                className="my-2 block truncate text-xl leading-snug text-black hover:underline dark:text-white"
                 href={`/user/${transaction.from}`}>
                 {transaction.to}
               </a>
               <div className="my-4 border border-b-0 border-gray-200 dark:border-gray-600"></div>
 
-              <div className="flex items-center justify-around m-auto mt-3 text-center text-gray-500 dark:text-gray-400">
+              <div className="m-auto mt-3 flex items-center justify-around text-center text-gray-500 dark:text-gray-400">
                 <div className="flex items-center">
                   <button
                     onClick={() =>
                       favoriteMutation.mutate({
                         address: address as string,
-                        hash: transaction.transactionHash,
+                        hash: transaction.hash,
                       })
                     }>
-                    {favorites.includes(transaction.transactionHash) ? (
-                      <RedHeart />
-                    ) : (
-                      <TransparentHeart />
-                    )}
+                    {favorites.includes(transaction.hash) ? <RedHeart /> : <TransparentHeart />}
                   </button>
                 </div>
                 <div className="flex items-center">
                   <span className="rounded bg-gray-100 px-1.5 py-0.5 text-sm font-medium text-gray-800 dark:bg-gray-700 dark:text-gray-300">
-                    {transaction.timestamp}
+                    {transaction.asset}
                   </span>
                 </div>
+                {transaction?.value && (
+                  <div className="flex items-center">
+                    <span className="rounded bg-gray-100 px-1.5 py-0.5 text-sm font-medium text-gray-800 dark:bg-gray-700 dark:text-gray-300">
+                      💰&nbsp;&nbsp;${transaction?.value?.toFixed(2)}
+                    </span>
+                  </div>
+                )}
                 <div className="flex items-center">
                   <span className="hidden rounded bg-gray-100 px-1.5 py-0.5 text-sm font-medium text-gray-800 dark:bg-gray-700 dark:text-gray-300 md:block">
-                    🧱&nbsp;&nbsp;{transaction.blockNumber}
+                    🧱&nbsp;&nbsp;{transaction.blockNum}
                   </span>
                 </div>
                 <div className="flex flex-row items-center">
-                  <span className="rounded bg-gray-100 px-1 py-0.5 text-sm font-medium text-gray-800 dark:bg-gray-700 dark:text-gray-300">
-                    ⛽️&nbsp;&nbsp;
-                    {Number(transaction.gasPrice).toFixed(2)}
+                  <span className="rounded bg-gray-100 py-0.5 px-2 text-sm font-medium text-gray-800 dark:bg-gray-700 dark:text-gray-300">
+                    {transaction.category.toUpperCase()}
                   </span>
                 </div>
-                <div className="flex flex-row items-center">
-                  {transaction.status ? (
-                    <span className="m-0 rounded bg-green-100 px-2 py-0.5 text-xs font-semibold text-green-800 dark:bg-green-200 dark:text-green-900 md:mr-2">
-                      <svg
-                        xmlns="http://www.w3.org/2000/svg"
-                        className="w-4"
-                        fill="none"
-                        viewBox="0 0 24 24"
-                        stroke="currentColor">
-                        <path
-                          strokeLinecap="round"
-                          strokeLinejoin="round"
-                          strokeWidth="2"
-                          d="M5 13l4 4L19 7"
-                        />
-                      </svg>
-                    </span>
-                  ) : (
-                    <span className="m-0 rounded bg-red-100 px-2 py-0.5 text-xs font-semibold text-red-800 dark:bg-red-200 dark:text-red-900 md:mr-2">
-                      <svg
-                        xmlns="http://www.w3.org/2000/svg"
-                        className="w-4"
-                        fill="none"
-                        viewBox="0 0 24 24"
-                        stroke="currentColor">
-                        <path
-                          strokeLinecap="round"
-                          strokeLinejoin="round"
-                          strokeWidth="2"
-                          d="M6 18L18 6M6 6l12 12"
-                        />
-                      </svg>
-                    </span>
-                  )}
-                </div>
                 <a
                   className="flex w-[25%] items-center"
-                  href={`https://etherscan.io/tx/${transaction.transactionHash}`}
+                  href={`https://etherscan.io/tx/${transaction.hash}`}
                   rel="noopener noreferrer"
                   target="_blank">
                   <span className="truncate rounded bg-blue-100 px-1.5 py-0.5 text-xs font-semibold text-blue-900 hover:cursor-pointer hover:bg-blue-200 hover:text-blue-400 hover:underline dark:bg-blue-200 dark:text-blue-900 dark:hover:bg-blue-300">
-                    {transaction.transactionHash}
+                    {transaction.hash}
                   </span>
                 </a>
               </div>
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 7e49c17..c5f55a5 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -1,7 +1,7 @@
-import type { NextPage } from 'next';
 import * as React from 'react';
-import { useUser } from '@/hooks';
+import type { NextPage } from 'next';
 import clsx from 'clsx';
+import { useUser } from '@/hooks';
 
 const Index: NextPage = () => {
   useUser({ redirectTo: '/login' });
diff --git a/src/pages/login.tsx b/src/pages/login.tsx
index 1a00cd4..7ca0102 100644
--- a/src/pages/login.tsx
+++ b/src/pages/login.tsx
@@ -180,7 +180,8 @@ const Web3ConnectButton = ({
       onClick={async (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
         event.preventDefault();
         return await onButtonClick(connector);
-      }}>
+      }}
+    >
       <WalletIcon name={connector.name} />
       {['metamask', 'injected'].includes(connector.name) ? 'MetaMask' : connector.name}
     </button>
diff --git a/src/pages/nfts/[address].tsx b/src/pages/nfts/[address].tsx
index 46121c9..998a35c 100644
--- a/src/pages/nfts/[address].tsx
+++ b/src/pages/nfts/[address].tsx
@@ -34,7 +34,8 @@ const CopyButton = ({ buttonText, textToCopy }: { buttonText: string; textToCopy
     <button
       type="button"
       className="text-md mb-2 flex space-x-2 rounded-lg bg-gradient-to-br from-purple-600 to-blue-500 px-5 py-2.5 text-center font-medium text-white hover:bg-gradient-to-bl focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-800"
-      onClick={copyToClipboard}>
+      onClick={copyToClipboard}
+    >
       <span>{copyButtonText}</span>
       <span>
         <CopyIcon />
@@ -97,7 +98,7 @@ const Nfts: NextPage = () => {
   }, [fetchNextPage, continuationToken]);
 
   return (
-    <main className="flex flex-col items-center justify-start flex-grow min-h-screen px-0 pb-8 mt-4">
+    <main className="mt-4 flex min-h-screen flex-grow flex-col items-center justify-start px-0 pb-8">
       <p className="mb-4 text-3xl font-black dark:text-white">{name ?? address}</p>
 
       {!!infiniteQueryResponse && <CopyButton buttonText="Copy profile link" />}
diff --git a/src/pages/profile.tsx b/src/pages/profile.tsx
index 8f7a427..f799141 100644
--- a/src/pages/profile.tsx
+++ b/src/pages/profile.tsx
@@ -27,15 +27,16 @@ const TabButton = ({
   return (
     <button
       className={clsx(
-        `relative flex w-full flex-col items-center py-2 md:py-4 px-2 text-center text-xs md:text-sm font-medium focus:z-20 focus:ring-4 dark:text-white md:px-4`,
+        `relative flex w-full flex-col items-center py-2 px-2 text-center text-xs font-medium focus:z-20 focus:ring-4 dark:text-white md:py-4 md:px-4 md:text-sm`,
         text === 'FOLLOWING' && `md:rounded-tl-lg`,
         text === 'FAVORITES' && `rounded-tr-lg`,
         active
           ? `active bg-gray-100 text-gray-900  focus:ring-blue-300 dark:bg-gray-700`
           : `bg-white text-gray-500 hover:bg-gray-50 hover:text-gray-700 focus:ring-blue-300 dark:bg-gray-800 dark:hover:bg-gray-700 dark:hover:text-white`
       )}
-      onClick={onClick}>
-      <span className={clsx(`text-lg md:text-xl font-semibold`)}>{count}</span>
+      onClick={onClick}
+    >
+      <span className={clsx(`text-lg font-semibold md:text-xl`)}>{count}</span>
       <span className="">{text}</span>
     </button>
   );
@@ -59,22 +60,26 @@ const Profile: NextPage = () => {
   return (
     <main
       className={clsx(
-        'flex flex-col items-center justify-center gap-y-12 md:mt-10 mx-1.5',
+        'mx-1.5 flex flex-col items-center justify-center gap-y-12 md:mt-10',
         'dark:text-gray-50'
-      )}>
+      )}
+    >
       <section
-        className={clsx(`m-auto flex w-40 flex-col items-center justify-center text-center`)}>
+        className={clsx(`m-auto flex w-40 flex-col items-center justify-center text-center`)}
+      >
         <Avatar imageUrl={avatar ?? '/images/placeholder.png'} />
         <div
           className={clsx(
             'group mt-8 inline-flex h-9 items-center whitespace-nowrap rounded-full bg-sky-50 p-5 text-lg text-sky-600 hover:cursor-pointer hover:bg-sky-100 hover:text-sky-700 focus:outline-none focus:ring-2 focus:ring-sky-600',
             'dark:bg-gray-700 dark:text-gray-100 dark:hover:bg-gray-600 dark:hover:text-white dark:focus:ring-gray-500'
-          )}>
+          )}
+        >
           <a
             className={clsx(`flex items-center`, `hover:underline hover:decoration-dotted`)}
             href={`https://app.ens.domains/name/${name}`}
             rel="noopener noreferrer"
-            target="_blank">
+            target="_blank"
+          >
             <span>{name ?? `Get ENS name`}</span>
             {name && (
               <div data-tip="https://ens.domains" className={clsx('tooltip-bottom tooltip')}>
@@ -85,7 +90,8 @@ const Profile: NextPage = () => {
                     `dark:text-gray-500 dark:group-hover:text-gray-400`
                   )}
                   viewBox="0 0 20 20"
-                  fill="currentColor">
+                  fill="currentColor"
+                >
                   <path
                     fillRule="evenodd"
                     d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-3a1 1 0 00-.867.5 1 1 0 11-1.731-1A3 3 0 0113 8a3.001 3.001 0 01-2 2.83V11a1 1 0 11-2 0v-1a1 1 0 011-1 1 1 0 100-2zm0 8a1 1 0 100-2 1 1 0 000 2z"
@@ -100,8 +106,9 @@ const Profile: NextPage = () => {
 
       <section
         className={clsx(
-          `mb-4 flow-root w-full bg-white pb-4 shadow dark:bg-gray-800 md:min-w-[600px] md:max-w-[865px] md:rounded-xl rounded-md`
-        )}>
+          `mb-4 flow-root w-full rounded-md bg-white pb-4 shadow dark:bg-gray-800 md:min-w-[600px] md:max-w-[865px] md:rounded-xl`
+        )}
+      >
         <ul className="flex divide-x divide-gray-200 rounded-sm shadow dark:divide-gray-700 sm:flex">
           <li className="w-full">
             <TabButton
@@ -128,7 +135,7 @@ const Profile: NextPage = () => {
             />
           </li>
         </ul>
-        <ul className="px-3 pt-1 divide-y divide-gray-200 dark:divide-gray-700 md:px-6">
+        <ul className="divide-y divide-gray-200 px-3 pt-1 dark:divide-gray-700 md:px-6">
           {tab === Tab['FOLLOWERS'] &&
             followers.map((address, idx) => (
               <li className="w-full py-3 sm:py-4" key={idx}>
diff --git a/src/pages/user/[address].tsx b/src/pages/user/[address].tsx
index 2c22cb7..45aad1c 100644
--- a/src/pages/user/[address].tsx
+++ b/src/pages/user/[address].tsx
@@ -117,14 +117,16 @@ const User: NextPage = () => {
       className={clsx(
         `grid h-fit w-full grid-cols-1 justify-center md:gap-4 md:px-4`,
         `md:grid-cols-3`
-      )}>
+      )}
+    >
       <section className="col-span-1">
         <div className={clsx(`flex w-full justify-center px-3`)}>
           <div
             className={clsx(
               `mb-3 flex w-full flex-col items-center justify-items-center rounded-lg bg-white bg-no-repeat py-4 text-center align-middle shadow xl:py-5`,
               `dark:bg-transparent`
-            )}>
+            )}
+          >
             <img
               className="mb-2 rounded-lg"
               src={image ?? '/images/placeholder.png'}
@@ -134,15 +136,17 @@ const User: NextPage = () => {
               <li className="flex justify-between font-bold dark:text-white">
                 <button
                   onClick={() => copy(`${name}`)}
-                  className="hover:cursor-pointer hover:underline">
+                  className="hover:cursor-pointer hover:underline"
+                >
                   {name}
                 </button>
                 <span>{balance && `${balance.formatted.slice(0, 4)}Ξ`}</span>
               </li>
-              <li className="text-gray-500 truncate dark:text-gray-400 text-ellipsis">
+              <li className="truncate text-ellipsis text-gray-500 dark:text-gray-400">
                 <button
                   onClick={() => copy(`${userAddress}`)}
-                  className="truncate hover:cursor-pointer hover:underline">
+                  className="truncate hover:cursor-pointer hover:underline"
+                >
                   {userAddress}
                 </button>
               </li>
@@ -157,12 +161,14 @@ const User: NextPage = () => {
                     `bg-gradient-to-r from-cyan-400 via-cyan-500 to-cyan-600 shadow-lg shadow-cyan-500/50 hover:bg-gradient-to-br focus:ring-4 focus:ring-cyan-300 dark:shadow-lg dark:shadow-cyan-800/80 dark:focus:ring-cyan-800`,
                     isSelf && 'hidden',
                     isFollowed && `bg-cyan-400`
-                  )}>
+                  )}
+                >
                   <span
                     className={clsx(
                       `relative flex w-full items-center justify-center rounded-md bg-white px-5 py-2.5 align-middle transition-all duration-75 ease-in group-hover:bg-opacity-0 dark:bg-gray-900`,
                       isFollowed && `dark:bg-opacity-10`
-                    )}>
+                    )}
+                  >
                     {isFollowed ? 'UNFOLLOW' : isFollowedLoading ? 'LOADING...' : 'FOLLOW'}
                   </span>
                 </button>
@@ -174,7 +180,8 @@ const User: NextPage = () => {
         <div
           className={clsx(
             `mb-4 w-full rounded-xl bg-white shadow dark:border-2 dark:border-gray-600 dark:bg-transparent`
-          )}>
+          )}
+        >
           <ul className="flex divide-x divide-gray-200 rounded-sm shadow dark:divide-gray-700 sm:flex">
             <li className="w-full">
               <button
@@ -184,7 +191,8 @@ const User: NextPage = () => {
                     ? `active bg-gray-100 text-gray-700 focus:ring-blue-300 dark:bg-gray-800`
                     : `bg-white text-gray-500 hover:bg-gray-50 hover:text-gray-700 focus:ring-blue-300 dark:bg-transparent dark:hover:bg-gray-700 dark:hover:text-white`
                 )}
-                onClick={followersTab}>
+                onClick={followersTab}
+              >
                 FOLLOWERS
               </button>
             </li>
@@ -197,12 +205,13 @@ const User: NextPage = () => {
                     ? `active bg-gray-100 text-gray-700 focus:ring-blue-300 dark:bg-gray-800`
                     : `bg-white text-gray-500 hover:bg-gray-50 hover:text-gray-700 focus:ring-blue-300 dark:bg-transparent dark:hover:bg-gray-700 dark:hover:text-white`
                 )}
-                onClick={followingTab}>
+                onClick={followingTab}
+              >
                 FOLLOWING
               </button>
             </li>
           </ul>
-          <ul className="px-6 py-4 divide-y divide-gray-200 rounded-b-xl dark:divide-gray-700 dark:bg-gray-800">
+          <ul className="divide-y divide-gray-200 rounded-b-xl px-6 py-4 dark:divide-gray-700 dark:bg-gray-800">
             {currentTab === tab.FOLLOWERS ? (
               followers.map((address, idx) => (
                 <li className="py-3 hover:cursor-pointer sm:py-4" key={idx}>
@@ -252,7 +261,7 @@ const User: NextPage = () => {
       </section>
 
       <section className="col-span-2">
-        <div className="w-full py-4 mb-4 bg-white bg-no-repeat rounded-lg shadow dark:bg-transparent">
+        <div className="mb-4 w-full rounded-lg bg-white bg-no-repeat py-4 shadow dark:bg-transparent">
           <Gallery nfts={nftsQueryResponse ?? []} />
         </div>
       </section>
diff --git a/src/providers/web3.tsx b/src/providers/web3.tsx
index 7faa6ef..6923ede 100644
--- a/src/providers/web3.tsx
+++ b/src/providers/web3.tsx
@@ -5,7 +5,6 @@ import { FullPageLoadingSpinner } from '@/components';
 import { connectors, wagmiWebSocketProvider, wagmiProvider } from '@/wallet';
 
 export const WagmiProvider = ({ children }: { children: React.ReactNode }) => {
-
   const { authenticated, status } = useUser();
 
   if (status !== 'success') return <FullPageLoadingSpinner />;
@@ -16,7 +15,8 @@ export const WagmiProvider = ({ children }: { children: React.ReactNode }) => {
       connectors={connectors}
       provider={wagmiProvider}
       webSocketProvider={wagmiWebSocketProvider}
-      connectorStorageKey={`${Date.now()}`}>
+      connectorStorageKey={`${Date.now()}`}
+    >
       {children}
     </Provider>
   );
diff --git a/src/styles/gallery.module.css b/src/styles/gallery.module.css
index 2fe6044..49465a1 100644
--- a/src/styles/gallery.module.css
+++ b/src/styles/gallery.module.css
@@ -5,7 +5,7 @@
   -moz-column-gap: 0px;
   column-count: 4;
   box-sizing: border-box;
-  @apply py-10 space-x-3 space-y-3 md:w-11/12;
+  @apply space-x-3 space-y-3 py-10 md:w-11/12;
 }
 
 @media (max-width: 1200px) {
diff --git a/src/styles/globals.css b/src/styles/globals.css
index 67e50ba..81a1480 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -50,7 +50,6 @@ a {
   text-decoration: none;
 }
 
-
 /* keep scrollbar but hide it since it's ugly */
 #liaddshapes::-webkit-scrollbar {
   width: 0 !important;
diff --git a/src/types/environment.d.ts b/src/types/environment.d.ts
index 48e953f..1130b84 100644
--- a/src/types/environment.d.ts
+++ b/src/types/environment.d.ts
@@ -9,6 +9,7 @@ declare namespace NodeJS {
     NEXT_PUBLIC_ETHERSCAN_KEY: string;
     NEXT_PUBLIC_INFURA_PROJECT_ID: string;
     NEXT_PUBLIC_NFT_PORT_KEY: string;
-    NEXT_PUBLIC_COVALENT_API_KEY: string;
+    COVALENT_KEY: string;
+    NEXT_PUBLIC_COVALENT_KEY: string;
   }
 }
diff --git a/src/utils/ens-to-address.ts b/src/utils/ens-to-address.ts
index 925dd72..a9a9574 100644
--- a/src/utils/ens-to-address.ts
+++ b/src/utils/ens-to-address.ts
@@ -1,4 +1,4 @@
-import { wagmiProvider } from "@/wallet";
+import { wagmiProvider } from '@/wallet';
 
 export const ensToAddress = async (name: string) => {
   const provider = wagmiProvider();
diff --git a/src/utils/index.ts b/src/utils/index.ts
index 1f8d895..2832f51 100644
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@@ -1,7 +1,11 @@
-export * from './nft-utils';
 export * from './time';
+export * from './nft-utils';
 export * from './converters';
 
+export const eNotationToDecimal = (value: number | string) => parseFloat(`${value}`).toFixed(10);
+
+export const to32BytesHash = (number: number) => `0x${number.toString(16).padStart(64, '0')}`;
+
 export const passEnsRegex = (name: string) => {
   if (!valueExists(name)) return false;
   const regex = /^[a-zA-Z]{3,}(.eth)$/;
diff --git a/src/utils/nft-utils.ts b/src/utils/nft-utils.ts
index 4a2a336..b6ba030 100644
--- a/src/utils/nft-utils.ts
+++ b/src/utils/nft-utils.ts
@@ -1,4 +1,3 @@
-
 export const isImage = (s: string) => imageExtensions.some(_ => s.endsWith(_));
 export const isVideo = (s: string) => videoExtensions.some(_ => s.endsWith(_));
 
diff --git a/src/wallet/utils.ts b/src/wallet/utils.ts
index c510497..ef037fa 100644
--- a/src/wallet/utils.ts
+++ b/src/wallet/utils.ts
@@ -43,7 +43,7 @@ export const switchOnChainChange = async ({
 
   return window.ethereum.on('chainChanged', (chainId: string) => {
     console.log(`chain changed to ${chainId}`);
-    
+
     if (Number(chainId) !== Number(switchToChainId)) {
       switchNetwork(switchToChainId);
       onChainChange();
diff --git a/tsconfig.json b/tsconfig.json
index 5de45bc..dc75797 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,7 +1,11 @@
 {
   "compilerOptions": {
     "target": "ES5",
-    "lib": ["DOM", "DOM.Iterable", "ESNext"],
+    "lib": [
+      "DOM",
+      "DOM.Iterable",
+      "ESNext"
+    ],
     "allowJs": true,
     "skipLibCheck": true,
     "strict": true,
@@ -16,9 +20,17 @@
     "incremental": true,
     "baseUrl": ".",
     "paths": {
-      "@/*": ["./src/*"]
+      "@/*": [
+        "./src/*"
+      ]
     }
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".scratch/_error.tsx"],
-  "exclude": ["node_modules"]
-}
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
+}
\ No newline at end of file