From e7a2a70bb87a669c4b78ca210a6003de7cf5d408 Mon Sep 17 00:00:00 2001
From: JunichiSugiura <jun.sugiura.jp@gmail.com>
Date: Thu, 5 Dec 2024 18:02:37 +0000
Subject: [PATCH] Set expiresAt based on selected duration

---
 .../src/components/connect/CreateSession.tsx  | 56 ++++++++++++-------
 .../src/components/primitives/select.tsx      |  4 +-
 2 files changed, 39 insertions(+), 21 deletions(-)

diff --git a/packages/keychain/src/components/connect/CreateSession.tsx b/packages/keychain/src/components/connect/CreateSession.tsx
index ac67c4094..c67689698 100644
--- a/packages/keychain/src/components/connect/CreateSession.tsx
+++ b/packages/keychain/src/components/connect/CreateSession.tsx
@@ -6,12 +6,18 @@ import { useCallback, useEffect, useMemo, useState } from "react";
 import { useConnection } from "hooks/connection";
 import { ControllerErrorAlert } from "components/ErrorAlert";
 import { SessionConsent } from "components/connect";
-import { DEFAULT_SESSION_DURATION, SESSION_EXPIRATION } from "const";
+import { DEFAULT_SESSION_DURATION } from "const";
 import { Upgrade } from "./Upgrade";
 import { ErrorCode } from "@cartridge/account-wasm";
 import { SessionSummary } from "components/SessionSummary";
 import { TypedDataPolicy } from "@cartridge/presets";
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@cartridge/ui-next";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@cartridge/ui-next";
 
 export function CreateSession({
   onConnect,
@@ -24,9 +30,10 @@ export function CreateSession({
   const [isConnecting, setIsConnecting] = useState(false);
   const [isDisabled, setIsDisabled] = useState(false);
   const [duration, setDuration] = useState<bigint>(DEFAULT_SESSION_DURATION);
-  const expiresAt = useMemo(() => {
-    return SESSION_EXPIRATION
-  }, [])
+  const expiresAt = useMemo(
+    () => duration + BigInt(Math.floor(Date.now() / 1000)),
+    [duration],
+  );
   const [maxFee] = useState<BigNumberish>();
   const [error, setError] = useState<ControllerError | Error>();
 
@@ -35,7 +42,7 @@ export function CreateSession({
     const normalizedChainId = normalizeChainId(chainId);
 
     const violatingPolicy = policies.messages?.find(
-      (policy) =>
+      (policy: TypedDataPolicy) =>
         "domain" in policy &&
         (!policy.domain.chainId ||
           normalizeChainId(policy.domain.chainId) !== normalizedChainId),
@@ -44,9 +51,11 @@ export function CreateSession({
     if (violatingPolicy) {
       setError({
         code: ErrorCode.PolicyChainIdMismatch,
-        message: `Policy for ${(violatingPolicy as TypedDataPolicy).domain.name
-          }.${(violatingPolicy as TypedDataPolicy).primaryType
-          } has mismatched chain ID.`,
+        message: `Policy for ${
+          (violatingPolicy as TypedDataPolicy).domain.name
+        }.${
+          (violatingPolicy as TypedDataPolicy).primaryType
+        } has mismatched chain ID.`,
       });
       setIsDisabled(true);
     } else {
@@ -102,19 +111,28 @@ export function CreateSession({
         {!error && (
           <div className="flex flex-col">
             <div className="flex items-center text-sm text-muted-foreground">
-              <div>Expires in{" "}</div>
-              <Select value={duration.toString()}
-                onValueChange={val => {
-                  console.log(val)
-                }}>
-                <SelectTrigger className="w-28" >
-                  <SelectValue defaultValue={(60 * 60 * 24).toString()} placeholder="1 HR" />
+              <div>Expires in </div>
+              <Select
+                value={duration.toString()}
+                onValueChange={(val) => {
+                  setDuration(BigInt(val));
+                }}
+              >
+                <SelectTrigger className="w-28">
+                  <SelectValue
+                    defaultValue={(60 * 60 * 24).toString()}
+                    placeholder="1 HR"
+                  />
                 </SelectTrigger>
 
                 <SelectContent>
                   <SelectItem value={(60 * 60).toString()}>1 HR</SelectItem>
-                  <SelectItem value={(60 * 60 * 24).toString()}>24 HRS</SelectItem>
-                  <SelectItem value={(60 * 60 * 24 * 7).toString()}>1 WEEK</SelectItem>
+                  <SelectItem value={(60 * 60 * 24).toString()}>
+                    24 HRS
+                  </SelectItem>
+                  <SelectItem value={(60 * 60 * 24 * 7).toString()}>
+                    1 WEEK
+                  </SelectItem>
                   <SelectItem value={"never"}>NEVER</SelectItem>
                 </SelectContent>
               </Select>
@@ -141,7 +159,7 @@ export function CreateSession({
           </div>
         )}
       </Footer>
-    </Container >
+    </Container>
   );
 }
 
diff --git a/packages/ui-next/src/components/primitives/select.tsx b/packages/ui-next/src/components/primitives/select.tsx
index a73fa4227..998074c2e 100644
--- a/packages/ui-next/src/components/primitives/select.tsx
+++ b/packages/ui-next/src/components/primitives/select.tsx
@@ -82,7 +82,7 @@ const SelectContent = React.forwardRef<
       className={cn(
         "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
         position === "popper" &&
-        "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+          "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
         className,
       )}
       position={position}
@@ -93,7 +93,7 @@ const SelectContent = React.forwardRef<
         className={cn(
           "p-1",
           position === "popper" &&
-          "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]",
+            "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]",
         )}
       >
         {children}