Add expiration selector to create session page

packages/keychain/src/components/connect/CreateSession.tsx

@@ -2,18 +2,24 @@ import { Container, Content, Footer } from "components/layout";
 import { BigNumberish, shortString } from "starknet";
 import { ControllerError } from "utils/connection";
 import { Button, HStack, Text, Checkbox } from "@chakra-ui/react";
-import { useCallback, useEffect, useState } from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
 import { useConnection } from "hooks/connection";
 import { ControllerErrorAlert } from "components/ErrorAlert";
 import { SessionConsent } from "components/connect";
-import { SESSION_EXPIRATION } from "const";
+import { DEFAULT_SESSION_DURATION } from "const";
 import { Upgrade } from "./Upgrade";
 import { ErrorCode } from "@cartridge/account-wasm";
 import { TypedDataPolicy } from "@cartridge/presets";
 import { ParsedSessionPolicies } from "hooks/session";
-
 import { UnverifiedSessionSummary } from "components/session/UnverifiedSessionSummary";
 import { VerifiedSessionSummary } from "components/session/VerifiedSessionSummary";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@cartridge/ui-next";
 
 export function CreateSession({
   policies,
@@ -28,16 +34,20 @@ export function CreateSession({
   const [isConnecting, setIsConnecting] = useState(false);
   const [isDisabled, setIsDisabled] = useState(false);
   const [isConsent, setIsConsent] = useState(false);
-  const [expiresAt] = useState<bigint>(SESSION_EXPIRATION);
+  const [duration, setDuration] = useState<bigint>(DEFAULT_SESSION_DURATION);
+  const expiresAt = useMemo(
+    () => duration + BigInt(Math.floor(Date.now() / 1000)),
+    [duration],
+  );
   const [maxFee] = useState<BigNumberish>();
   const [error, setError] = useState<ControllerError | Error>();
 
   useEffect(() => {
     if (!chainId) return;
     const normalizedChainId = normalizeChainId(chainId);
 
-    const violatingPolicy = policies?.messages?.find(
-      (policy) =>
+    const violatingPolicy = policies.messages?.find(
+      (policy: TypedDataPolicy) =>
         "domain" in policy &&
         (!policy.domain.chainId ||
           normalizeChainId(policy.domain.chainId) !== normalizedChainId),
@@ -103,6 +113,29 @@ export function CreateSession({
         )}
       </Content>
       <Footer>
+        <div className="flex items-center text-sm text-muted-foreground py-4 gap-2">
+          <div className="font-medium">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>
+            </SelectContent>
+          </Select>
+        </div>
+
         {!policies?.verified && (
           <HStack
             p={3}
@@ -128,9 +161,11 @@ export function CreateSession({
             </Text>
           </HStack>
         )}
+
         {error && isControllerError(error) && (
           <ControllerErrorAlert error={error} />
         )}
+
         <HStack spacing={4} width="full">
           <Button onClick={() => onConnect()} isDisabled={isConnecting} px={10}>
             Skip
@@ -147,6 +182,8 @@ export function CreateSession({
             {isUpdate ? "update" : "create"} session
           </Button>
         </HStack>
+
+        {!error && <div className="flex flex-col"></div>}
       </Footer>
     </Container>
   );

packages/keychain/src/const.ts

@@ -2,3 +2,4 @@ export const CARTRIDGE_DISCORD_LINK = "https://discord.gg/cartridge";
 export const SESSION_EXPIRATION = BigInt(
   Math.floor(Date.now() / 1000) + 7 * 24 * 60 * 60,
 ); // 1 week
+export const DEFAULT_SESSION_DURATION = BigInt(7 * 24 * 60 * 60);

packages/ui-next/src/components/primitives/select.tsx

@@ -2,14 +2,14 @@
 
 import * as React from "react";
 import {
-  CaretSortIcon,
-  CheckIcon,
+  CheckCircledIcon,
   ChevronDownIcon,
   ChevronUpIcon,
 } from "@radix-ui/react-icons";
 import * as SelectPrimitive from "@radix-ui/react-select";
 
 import { cn } from "@/utils";
+import { CaratIcon } from "../icons";
 
 const Select = SelectPrimitive.Root;
 
@@ -24,14 +24,14 @@ const SelectTrigger = React.forwardRef<
   <SelectPrimitive.Trigger
     ref={ref}
     className={cn(
-      "flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm placeholder:text-muted-foreground focus:outline-none disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
+      "flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md bg-secondary px-3 py-2 text-xs font-bold text-foreground placeholder:text-muted-foreground focus:outline-none disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
       className,
     )}
     {...props}
   >
     {children}
     <SelectPrimitive.Icon asChild>
-      <CaretSortIcon className="h-4 w-4 opacity-50" />
+      <CaratIcon variant="down" className="text-muted-foreground" />
     </SelectPrimitive.Icon>
   </SelectPrimitive.Trigger>
 ));
@@ -80,7 +80,7 @@ const SelectContent = React.forwardRef<
     <SelectPrimitive.Content
       ref={ref}
       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",
+        "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md bg-popover text-popover-foreground font-bold 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",
         className,
@@ -110,7 +110,7 @@ const SelectLabel = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <SelectPrimitive.Label
     ref={ref}
-    className={cn("px-2 py-1.5 text-sm font-semibold", className)}
+    className={cn("px-2 py-1.5 text-xs font-semibold", className)}
     {...props}
   />
 ));
@@ -123,14 +123,14 @@ const SelectItem = React.forwardRef<
   <SelectPrimitive.Item
     ref={ref}
     className={cn(
-      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-xs text-muted-foreground outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       className,
     )}
     {...props}
   >
     <span className="absolute right-2 flex h-3.5 w-3.5 items-center justify-center">
       <SelectPrimitive.ItemIndicator>
-        <CheckIcon className="h-4 w-4" />
+        <CheckCircledIcon />
       </SelectPrimitive.ItemIndicator>
     </span>
     <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>

packages/ui-next/src/themes/dark.css

@@ -3,13 +3,13 @@
     --background: 135 8% 9%; /* bg.background */
     --foreground: 0 0% 100%; /* text.primary */
 
-    --popover: 135 8% 9%; /* bg.background */
+    --popover: 135 6% 13%; /* bg.primary */
     --popover-foreground: 0 0% 100%; /* text.primary */
 
     --primary: 44 96% 61%; /* brand.primary */
     --primary-foreground: 135 15% 10%; /* bg.primary */
 
-    --secondary: 135 12% 13%; /* bg.primary */
+    --secondary: 135 6% 13%; /* bg.primary */
     --secondary-foreground: 0 0% 100%; /* text.primary */
 
     --tertiary: 120 57% 78%;
@@ -30,7 +30,7 @@
     --destructive: 7 72% 65%; /* text.error */
     --destructive-foreground: 7 72% 65%; /* text.error */
 
-    --border: 0 0% 50%;
+    --border: 135 8% 9%; /* bg.background */
     --input: 120 7.5% 15.69%; /* bg.secondary */
     --ring: 0 0% 100%; /* text.primary */
 

packages/ui-next/src/themes/default.css

@@ -30,7 +30,7 @@
     --destructive: 7 72% 65%;
     --destructive-foreground: 7 72% 65%;
 
-    --border: 0 0% 50%;
+    --border: 220 60% 99%;
     --input: 210 2.48% 94.9%; /* bg.secondary */
     --ring: 0 0% 0%;