From 23ad742a59002fe026745427a7fa25dee91f7471 Mon Sep 17 00:00:00 2001 From: JunichiSugiura Date: Thu, 5 Dec 2024 17:58:33 +0000 Subject: [PATCH] Add expiration selector --- .../src/components/connect/CreateSession.tsx | 77 ++++++++++++------- packages/keychain/src/const.ts | 1 + .../src/components/primitives/select.tsx | 14 ++-- 3 files changed, 58 insertions(+), 34 deletions(-) diff --git a/packages/keychain/src/components/connect/CreateSession.tsx b/packages/keychain/src/components/connect/CreateSession.tsx index 84be6ae2d..ac67c4094 100644 --- a/packages/keychain/src/components/connect/CreateSession.tsx +++ b/packages/keychain/src/components/connect/CreateSession.tsx @@ -2,15 +2,16 @@ import { Container, Content, Footer } from "components/layout"; import { BigNumberish, shortString } from "starknet"; import { ControllerError } from "utils/connection"; import { Button, VStack } 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, SESSION_EXPIRATION } 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"; export function CreateSession({ onConnect, @@ -22,7 +23,10 @@ export function CreateSession({ const { controller, policies, upgrade, chainId, logout } = useConnection(); const [isConnecting, setIsConnecting] = useState(false); const [isDisabled, setIsDisabled] = useState(false); - const [expiresAt] = useState(SESSION_EXPIRATION); + const [duration, setDuration] = useState(DEFAULT_SESSION_DURATION); + const expiresAt = useMemo(() => { + return SESSION_EXPIRATION + }, []) const [maxFee] = useState(); const [error, setError] = useState(); @@ -40,11 +44,9 @@ 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 { @@ -98,27 +100,48 @@ export function CreateSession({ )} {!error && ( - - - - +
+
+
Expires in{" "}
+ +
+ + + + + +
)} - + ); } diff --git a/packages/keychain/src/const.ts b/packages/keychain/src/const.ts index a3852af14..cf3ba415c 100644 --- a/packages/keychain/src/const.ts +++ b/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); diff --git a/packages/ui-next/src/components/primitives/select.tsx b/packages/ui-next/src/components/primitives/select.tsx index a1c6ec7dd..a73fa4227 100644 --- a/packages/ui-next/src/components/primitives/select.tsx +++ b/packages/ui-next/src/components/primitives/select.tsx @@ -2,7 +2,6 @@ import * as React from "react"; import { - CaretSortIcon, CheckIcon, ChevronDownIcon, ChevronUpIcon, @@ -10,6 +9,7 @@ import { 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< span]:line-clamp-1", + "flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-xs shadow-sm placeholder:text-muted-foreground focus:outline-none disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1", className, )} {...props} > {children} - + )); @@ -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} @@ -110,7 +110,7 @@ const SelectLabel = React.forwardRef< >(({ className, ...props }, ref) => ( )); @@ -123,7 +123,7 @@ const SelectItem = React.forwardRef<