Add expiration to session summary

cartridge-gg · Jan 10, 2025 · c3b206f · c3b206f
1 parent 603f720
commit c3b206f
Show file tree

Hide file tree

Showing 8 changed files with 92 additions and 36 deletions.
diff --git a/...hain/__image_snapshots__/components-connect-createsession--default-chromium.png b/...hain/__image_snapshots__/components-connect-createsession--default-chromium.png
diff --git a/.../__image_snapshots__/components-connect-createsession--with-preset-chromium.png b/.../__image_snapshots__/components-connect-createsession--with-preset-chromium.png
diff --git a/packages/keychain/src/components/connect/CreateSession.tsx b/packages/keychain/src/components/connect/CreateSession.tsx
@@ -12,15 +12,7 @@ import { ParsedSessionPolicies } from "@/hooks/session";
 import { UnverifiedSessionSummary } from "@/components/session/UnverifiedSessionSummary";
 import { VerifiedSessionSummary } from "@/components/session/VerifiedSessionSummary";
 import { DEFAULT_SESSION_DURATION } from "@/const";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-  Button,
-  Checkbox,
-} from "@cartridge/ui-next";
+import { Button, Checkbox } from "@cartridge/ui-next";
 
 export function CreateSession({
   policies,
@@ -139,35 +131,21 @@ export function CreateSession({
       <Content gap={6}>
         <SessionConsent isVerified={policies?.verified} />
         {policies?.verified ? (
-          <VerifiedSessionSummary game={theme.name} policies={policies} />
+          <VerifiedSessionSummary
+            game={theme.name}
+            policies={policies}
+            duration={duration}
+            onDurationChange={setDuration}
+          />
         ) : (
-          <UnverifiedSessionSummary policies={policies} />
+          <UnverifiedSessionSummary
+            policies={policies}
+            duration={duration}
+            onDurationChange={setDuration}
+          />
         )}
       </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 && (
           <div
             className="flex items-center p-3 mb-3 gap-5 border border-solid-primary rounded-md cursor-pointer border-error-icon text-error-icon"

diff --git a/packages/keychain/src/components/session/ExpirationCard.tsx b/packages/keychain/src/components/session/ExpirationCard.tsx
@@ -0,0 +1,64 @@
+import { ClockIcon } from "@cartridge/ui-next";
+import { AccordionCard } from "./AccordionCard";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@cartridge/ui-next";
+
+interface ExpirationCardProps {
+  duration: bigint;
+  onDurationChange: (duration: bigint) => void;
+  isExpanded?: boolean;
+}
+
+export function ExpirationCard({
+  duration,
+  onDurationChange,
+}: ExpirationCardProps) {
+  return (
+    <AccordionCard
+      icon={<ClockIcon variant="solid" />}
+      title="Session Expiration"
+      trigger={
+        <div className="text-xs text-muted-foreground">
+          Expires in&nbsp;
+          <span className="text-accent-foreground font-bold">
+            {formatDuration(duration)}
+          </span>
+        </div>
+      }
+    >
+      <div className="flex flex-col gap-4 p-3 text-xs">
+        <div className="flex items-center justify-between">
+          <div className="text-muted-foreground">Duration</div>
+          <Select
+            value={duration.toString()}
+            onValueChange={(val) => onDurationChange(BigInt(val))}
+          >
+            <SelectTrigger className="w-28">
+              <SelectValue 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>
+      </div>
+    </AccordionCard>
+  );
+}
+
+function formatDuration(seconds: bigint): string {
+  const hours = Number(seconds) / 3600;
+  if (hours === 1) return "1 hour";
+  if (hours === 24) return "24 hours";
+  if (hours === 168) return "1 week";
+  return `${hours} hours`;
+}
diff --git a/packages/keychain/src/components/session/UnverifiedSessionSummary.tsx b/packages/keychain/src/components/session/UnverifiedSessionSummary.tsx
@@ -3,11 +3,16 @@ import { ParsedSessionPolicies } from "@/hooks/session";
 
 import { MessageCard } from "./MessageCard";
 import { ContractCard } from "./ContractCard";
+import { ExpirationCard } from "./ExpirationCard";
 
 export function UnverifiedSessionSummary({
   policies,
+  duration,
+  onDurationChange,
 }: {
   policies: ParsedSessionPolicies;
+  duration: bigint;
+  onDurationChange: (duration: bigint) => void;
 }) {
   return (
     <div className="flex flex-col gap-4">
@@ -31,6 +36,8 @@ export function UnverifiedSessionSummary({
       {policies.messages && policies.messages.length > 0 && (
         <MessageCard messages={policies.messages} isExpanded />
       )}
+
+      <ExpirationCard duration={duration} onDurationChange={onDurationChange} />
     </div>
   );
 }
diff --git a/packages/keychain/src/components/session/VerifiedSessionSummary.tsx b/packages/keychain/src/components/session/VerifiedSessionSummary.tsx
@@ -2,13 +2,18 @@ import { ParsedSessionPolicies } from "@/hooks/session";
 import { AggregateCard } from "./AggregateCard";
 import { CodeIcon } from "@cartridge/ui-next";
 import { ContractCard } from "./ContractCard";
+import { ExpirationCard } from "./ExpirationCard";
 
 export function VerifiedSessionSummary({
   game,
   policies,
+  duration,
+  onDurationChange,
 }: {
   game: string;
   policies: ParsedSessionPolicies;
+  duration: bigint;
+  onDurationChange: (duration: bigint) => void;
 }) {
   // Extract token and VRF contracts
   const individual = Object.entries(policies.contracts ?? {}).filter(
@@ -44,6 +49,8 @@ export function VerifiedSessionSummary({
           methods={contract.methods}
         />
       ))}
+
+      <ExpirationCard duration={duration} onDurationChange={onDurationChange} />
     </div>
   );
 }
diff --git a/packages/keychain/src/components/transaction/ConfirmTransaction.tsx b/packages/keychain/src/components/transaction/ConfirmTransaction.tsx
@@ -32,7 +32,7 @@ export function ConfirmTransaction() {
   return (
     <ExecutionContainer
       Icon={TransactionDuoIcon}
-      title="Review Transaction"
+      title={`Review Transaction${transactions.length > 1 ? "s" : ""}`}
       description={origin}
       executionError={ctx.error}
       transactions={ctx.transactions}

diff --git a/packages/ui-next/src/components/icons/state/clock.tsx b/packages/ui-next/src/components/icons/state/clock.tsx
@@ -6,7 +6,7 @@ export const ClockIcon = memo(
   forwardRef<SVGSVGElement, StateIconProps>(
     ({ className, size, variant, ...props }, forwardedRef) => (
       <svg
-        viewBox="0 0 24 24"
+        viewBox="0 0 20 20"
         className={iconVariants({ size, className })}
         ref={forwardedRef}
         {...props}