Merge pull request #286 from porters-xyz/fix-logout

web-portal/backend/src/siwe/siwe.service.ts

@@ -13,7 +13,7 @@ export interface ISession {
 }
 
 export const SESSION_OPTIONS = {
-  ttl: 60 * 60, // 1 hour
+  ttl: 60 * 60 * 60,
   password:
     process.env.SESSION_SECRET! ?? `NNb774sZ7bNnGkWTwkXE3T9QWCAC5DkY0HTLz`, // TODO: get via env vars only
 };

web-portal/frontend/components/dashboard/createAppModal.tsx

@@ -1,14 +1,13 @@
 import { useSearchParams, usePathname, useRouter } from "next/navigation";
 import { Modal, Button, TextInput, Textarea } from "@mantine/core";
 import { useForm } from "@mantine/form";
-import { useSession, useCreateAppMutation } from "@frontend/utils/hooks";
+import {  useCreateAppMutation } from "@frontend/utils/hooks";
 
 export default function CreateAppModal() {
     const searchParams = useSearchParams();
     const shouldOpen = searchParams?.get("new") === "app";
     const path = usePathname();
     const router = useRouter();
-    const { data: session } = useSession();
 
     const { values, getInputProps } = useForm({
         initialValues: {

web-portal/frontend/components/dashboard/layout.tsx

@@ -7,6 +7,7 @@ import {
   Title,
   Stack,
   Alert,
+  Skeleton
 } from "@mantine/core";
 
 import Link from "next/link";
@@ -32,7 +33,6 @@ import {
   useUserApps,
   useEndpoints,
   useRuleTypes,
-  useAppAlert,
   useTenantAlert,
 } from "@frontend/utils/hooks";
 import { useAtom, useSetAtom } from "jotai";
@@ -42,7 +42,7 @@ import {
   ruleTypesAtom,
   sessionAtom,
 } from "@frontend/utils/atoms";
-import { useAccount, useAccountEffect, useEnsName } from "wagmi";
+import { useAccount, useEnsName } from "wagmi";
 
 import CreateAppModal from "./createAppModal";
 import CreateAppButton from "./createApp";
@@ -122,12 +122,20 @@ export default function DashboardLayout({
       <AppShell.Header>
         <Flex w={"full"} justify="space-between" align="center" p={14}>
           <Burger opened={opened} onClick={toggle} hiddenFrom="sm" p={12} />
-          <Title order={2}>
+
+          <Title order={2} style={{
+            justifyContent: 'center',
+            alignItems: 'center'
+          }}>
+            <Skeleton height={32} radius="md" visible={!session?.address}>
             Welcome
-            {!isMobile
-              ? `, ${ensName ?? String(session?.address).substring(0, 10)}`
-              : null}
+            {session?.address ? (
+              !isMobile ? `, ${ensName ? ensName : String(session.address).substring(0, 10)}` : ''
+            ) : ''}
+            </Skeleton>
           </Title>
+
+
           <Flex gap={8}>
             <CreateAppButton />
             <LogoutButton />
@@ -192,7 +200,7 @@ export default function DashboardLayout({
         <CreateAppModal />
 
         <Container size={"xl"}>
-          {appsData.length && balance < 1000 && (
+          {!!appsData?.length && balance < 1000 && (
             <Alert
               color="blue"
               title="Balance Low"
@@ -205,7 +213,7 @@ export default function DashboardLayout({
             </Alert>
           )}
 
-          {showTenantAlert && (
+          {!!showTenantAlert && (
             <Alert
               color="blue"
               title="Rate Limited"

web-portal/frontend/components/dashboard/logout.tsx

@@ -1,21 +1,14 @@
 import { Button } from "@mantine/core";
 import { IconLogout } from "@tabler/icons-react";
-import { useDisconnect } from "wagmi";
 import { useViewportSize } from "@mantine/hooks";
+import { signOut } from "@frontend/utils/siwe";
 
 export default function LogoutButton() {
-  const { disconnectAsync } = useDisconnect();
-
   const { width } = useViewportSize();
   const isMobile = width < 600;
 
   return (
-    <Button
-      onClick={() => disconnectAsync()}
-      variant="outline"
-      color="#856853"
-      w="max-content"
-    >
+    <Button onClick={signOut} variant="outline" color="#856853" w="max-content">
       {isMobile && <IconLogout />}
       {!isMobile ? "Logout" : null}
     </Button>

web-portal/frontend/components/swap/Redeem.tsx

@@ -41,7 +41,7 @@ export default function Redeem() {
         (c) => Number(c.id) === Number(selectedChainId),
     );
 
-    const { writeContractAsync } = useWriteContract();
+    const { writeContractAsync, isPending } = useWriteContract();
 
     const chainId = useChainId();
     const { switchChain } = useSwitchChain();
@@ -248,10 +248,12 @@ export default function Redeem() {
 
             <Button
                 size="lg"
-                c="white"
-                bg={shouldDisable || needToSwitchChain ? "red" : "carrot"}
-                disabled={shouldDisable}
+                style={{
+                  backgroundColor: 'carrot'
+                }}
+                disabled={shouldDisable && !needToSwitchChain}
                 onClick={needToSwitchChain ? handleSwitchNetwork : handleRedeem}
+                loading={isPending}
             >
                 {!needToSwitchChain
                     ? `Redeem`

web-portal/frontend/components/swap/Swap.tsx

@@ -68,7 +68,7 @@ export default function Swap() {
     // Utils
     const chainId = useChainId();
     const { switchChain } = useSwitchChain();
-    const { writeContractAsync } = useWriteContract();
+    const { writeContractAsync, isPending } = useWriteContract();
     const { sendTransaction } = useSendTransaction();
     const queryClient = useQueryClient();
 
@@ -153,9 +153,7 @@ export default function Swap() {
 
     // Action Handlers
     const handleSwitchNetwork = () => {
-        if (chainId !== quote?.chainId) {
-            switchChain({ chainId: quote?.chainId });
-        }
+        switchChain({ chainId: selectedChainId });
     };
 
     const handleTokenChange = (token: IToken) => {
@@ -399,9 +397,13 @@ export default function Swap() {
                           ? handleAllowance
                           : handleSwap
                 }
-                bg={needToSwitchChain || showError ? "red" : "carrot"}
-                disabled={shouldDisable}
-                c="white"
+                style={{
+                  backgroundColor: 'carrot'
+                }}
+                disabled={shouldDisable && !needToSwitchChain}
+                c={shouldDisable && !needToSwitchChain ? 'blue.4' : 'white'}
+                loading={isPending}
+                loaderProps={{ type: 'dots' }}
             >
                 {showError
                     ? "Not enough balance"

web-portal/frontend/package.json

@@ -21,6 +21,7 @@
         "@react-pdf/renderer": "^3.4.4",
         "@tabler/icons-react": "^2.47.0",
         "@tanstack/react-query": "^5.28.6",
+        "@wagmi/core": "^2.10.4",
         "@web3modal/siwe": "^4.1.1",
         "@web3modal/wagmi": "^4.1.1",
         "date-fns": "^3.6.0",

web-portal/frontend/utils/Web3Provider.tsx

@@ -17,7 +17,6 @@ Object.entries(envVariables).forEach(([key, value]) => {
   }
 });
 
-
 const metadata = {
   name: "Porters RPC Gateway",
   description: "Porters RPC Gateway",
@@ -38,7 +37,7 @@ export const config = defaultWagmiConfig({
   }),
 });
 
-const queryClient = new QueryClient();
+export const queryClient = new QueryClient();
 
 export default function Web3Provider({
   children,

web-portal/frontend/utils/hooks.ts

@@ -10,21 +10,20 @@ import { usePathname, useRouter, useParams } from "next/navigation";
 import { Address, erc20Abi } from "viem";
 import { supportedChains } from "./consts";
 import _ from "lodash";
-import { IToken } from "./types";
+import { ISession, IToken } from "./types";
 import { timeOptions } from "./consts";
 import { useAtomValue } from "jotai";
 import { sessionAtom } from "./atoms";
 
 export const useSession = () => {
-  const { address, isConnected } = useAccount();
+  const { address } = useAccount();
   const { data, isLoading, isFetched } = useQuery({
     queryKey: ["session"],
     queryFn: getSession,
-    enabled: address && isConnected,
-    refetchInterval: 60 * 60 * 1000,
-    refetchOnMount: false,
+    enabled: !!address,
   });
 
+
   return { data, isLoading, isFetched };
 };
 

web-portal/frontend/utils/siwe.ts

@@ -1,6 +1,8 @@
 import { SiweMessage } from "siwe";
 import Cookies from "js-cookie";
 import { createSIWEConfig } from "@web3modal/siwe";
+import { queryClient, config } from "./Web3Provider";
+import { Config, disconnect } from "@wagmi/core";
 
 export const getNonce = async () => {
   const res = await fetch("/api/siwe", { method: "PUT" });
@@ -54,16 +56,16 @@ export const getSession = async () => {
 };
 
 export const signOut = async () => {
-  Cookies.remove("session");
-  const res = await fetch("/api/siwe", {
-    method: "DELETE",
-  });
-  if (!Cookies.get("session")) {
-    window.location.href = "/login";
-  }
-  if (res.ok) return true;
-  return false;
+  const result = await disconnect(config as any);
+  Cookies.set("session", "");
+  queryClient.setQueryData(["session"], null);
+  console.log({ session: Cookies.get("session"), result });
+
+  setTimeout(() => (window.location.href = "/login"), 1500);
+
+  return Boolean(result)
 };
+
 // @ts-ignore
 export const siweConfig = createSIWEConfig({
   createMessage,
@@ -72,5 +74,5 @@ export const siweConfig = createSIWEConfig({
   verifyMessage,
   signOut,
   signOutOnNetworkChange: false,
-  signOutOnDisconnect: true
+  signOutOnDisconnect: true,
 });

web-portal/frontend/utils/theme.ts

@@ -1,6 +1,5 @@
 import { createTheme, rem, Button, Modal, TextInput, Select, NumberInput, Textarea, Pill } from "@mantine/core";
 import { Crimson_Text, Karla, Red_Rose } from "next/font/google";
-import Link from "next/link";
 export const crimson = Crimson_Text({
   subsets: ["latin"],
   display: "swap",