Create session displays error

cartridge-gg · Jul 31, 2024 · ead04c8 · ead04c8
1 parent 90e3622
commit ead04c8
Showing 1 changed file with 20 additions and 12 deletions.
diff --git a/packages/keychain/src/components/connect/CreateSession.tsx b/packages/keychain/src/components/connect/CreateSession.tsx
@@ -2,10 +2,11 @@ import { Container, Content, Footer } from "components/layout";
 import { BigNumberish } from "starknet";
 import { Policy } from "@cartridge/controller";
 import { Button, Text } from "@chakra-ui/react";
-import { useState } from "react";
+import { useCallback, useState } from "react";
 import { useConnection } from "hooks/connection";
 import { LockIcon } from "@cartridge/ui";
 import { Policies } from "Policies";
+import { ErrorAlert } from "components/ErrorAlert";
 
 export function CreateSession({
   onConnect,
@@ -16,6 +17,20 @@ export function CreateSession({
   const [isConnecting, setIsConnecting] = useState(false);
   const [expiresAt] = useState<bigint>(3000000000n);
   const [maxFees] = useState<BigNumberish>();
+  const [error, setError] = useState<Error>();
+
+  const onCreateSession = useCallback(async () => {
+    try {
+      setError(undefined);
+      setIsConnecting(true);
+      await controller.approve(origin, expiresAt, policies, maxFees);
+      onConnect(policies);
+    } catch (e) {
+      setError(e)
+      setIsConnecting(false)
+    } 
+  }, [controller, origin, expiresAt, policies, maxFees, onConnect]);
+
   return (
     <Container
       variant="connect"
@@ -36,21 +51,14 @@ export function CreateSession({
       </Content>
 
       <Footer hideTxSummary>
+        {error && (
+          <ErrorAlert title="Create session failed" description={error.message} />
+        )}
         <Button
           colorScheme="colorful"
           isDisabled={isConnecting}
           isLoading={isConnecting}
-          onClick={async () => {
-            setIsConnecting(true);
-            await controller
-              .approve(origin, expiresAt, policies, maxFees)
-              .then(() => {
-                onConnect(policies);
-              })
-              .catch(() => {
-                setIsConnecting(false);
-              });
-          }}
+          onClick={()=> onCreateSession()}
         >
           create session
         </Button>