Skip to content

Commit

Permalink
Add expiration selector
Browse files Browse the repository at this point in the history
  • Loading branch information
@JunichiSugiura
JunichiSugiura committed Dec 5, 2024
1 parent 51b001a commit 23ad742
Show file tree
Hide file tree
Showing 3 changed files with 58 additions and 34 deletions.
77 changes: 50 additions & 27 deletions packages/keychain/src/components/connect/CreateSession.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -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<bigint>(SESSION_EXPIRATION);
const [duration, setDuration] = useState<bigint>(DEFAULT_SESSION_DURATION);
const expiresAt = useMemo(() => {
return SESSION_EXPIRATION
}, [])
const [maxFee] = useState<BigNumberish>();
const [error, setError] = useState<ControllerError | Error>();

Expand All @@ -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 {
Expand Down Expand Up @@ -98,27 +100,48 @@ export function CreateSession({
<ControllerErrorAlert error={error} />
)}
{!error && (
<VStack spacing={4} width="full">
<Button
colorScheme="colorful"
isDisabled={isDisabled || isConnecting}
isLoading={isConnecting}
onClick={() => onCreateSession()}
width="full"
>
{isUpdate ? "update" : "create"} session
</Button>
<Button
onClick={() => onConnect()}
isDisabled={isConnecting}
width="full"
>
Skip
</Button>
</VStack>
<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" />
</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={"never"}>NEVER</SelectItem>
</SelectContent>
</Select>
</div>

<VStack spacing={4} width="full">
<Button
colorScheme="colorful"
isDisabled={isDisabled || isConnecting}
isLoading={isConnecting}
onClick={() => onCreateSession()}
width="full"
>
{isUpdate ? "update" : "create"} session
</Button>
<Button
onClick={() => onConnect()}
isDisabled={isConnecting}
width="full"
>
Skip
</Button>
</VStack>
</div>
)}
</Footer>
</Container>
</Container >
);
}

Expand Down
1 change: 1 addition & 0 deletions packages/keychain/src/const.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
14 changes: 7 additions & 7 deletions packages/ui-next/src/components/primitives/select.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,14 +2,14 @@

import * as React from "react";
import {
CaretSortIcon,
CheckIcon,
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;

Expand All @@ -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 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}
<SelectPrimitive.Icon asChild>
<CaretSortIcon className="h-4 w-4 opacity-50" />
<CaratIcon variant="down" />
</SelectPrimitive.Icon>
</SelectPrimitive.Trigger>
));
Expand Down Expand Up @@ -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}
Expand All @@ -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}
Expand All @@ -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}
/>
));
Expand All @@ -123,7 +123,7 @@ 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 outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
className,
)}
{...props}
Expand Down

0 comments on commit 23ad742

Please sign in to comment.