Skip to content

Commit

Permalink
Fix session summary style (#1256)
Browse files Browse the repository at this point in the history
  • Loading branch information
@JunichiSugiura
JunichiSugiura authored Jan 8, 2025
1 parent c22cb0b commit b755f38
Show file tree
Hide file tree
Showing 5 changed files with 134 additions and 171 deletions.
110 changes: 56 additions & 54 deletions packages/keychain/src/components/connect/CreateSession.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,60 @@ export default meta;

type Story = StoryObj<typeof meta>;

const messages = [
{
types: {
StarknetDomain: [
{
name: "name",
type: "shortstring",
},
{
name: "version",
type: "shortstring",
},
{
name: "chainId",
type: "shortstring",
},
{
name: "revision",
type: "shortstring",
},
],
"eternum-Message": [
{
name: "identity",
type: "ContractAddress",
},
{
name: "channel",
type: "shortstring",
},
{
name: "content",
type: "string",
},
{
name: "timestamp",
type: "felt",
},
{
name: "salt",
type: "felt",
},
],
},
primaryType: "eternum-Message",
domain: {
name: "Eternum",
version: "1",
chainId: "SN_SEPOLIA",
revision: "1",
},
},
];

export const Default: Story = {
args: {
policies: parseSessionPolicies({
Expand Down Expand Up @@ -113,59 +167,7 @@ export const Default: Story = {
],
},
},
messages: [
{
types: {
StarknetDomain: [
{
name: "name",
type: "shortstring",
},
{
name: "version",
type: "shortstring",
},
{
name: "chainId",
type: "shortstring",
},
{
name: "revision",
type: "shortstring",
},
],
"eternum-Message": [
{
name: "identity",
type: "ContractAddress",
},
{
name: "channel",
type: "shortstring",
},
{
name: "content",
type: "string",
},
{
name: "timestamp",
type: "felt",
},
{
name: "salt",
type: "felt",
},
],
},
primaryType: "eternum-Message",
domain: {
name: "Eternum",
version: "1",
chainId: "SN_SEPOLIA",
revision: "1",
},
},
],
messages,
},
}),
onConnect: () => {},
Expand All @@ -179,7 +181,7 @@ export const WithPreset: Story = {
args: {
policies: parseSessionPolicies({
verified: true,
policies: controllerConfigs["dope-wars"].policies!,
policies: { ...controllerConfigs["dope-wars"].policies!, messages },
}),
onConnect: () => {},
},
Expand Down
9 changes: 6 additions & 3 deletions packages/keychain/src/components/session/AccordionCard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import {
AccordionContent,
AccordionItem,
AccordionTrigger,
cn,
} from "@cartridge/ui-next";

interface AccordionCardProps {
Expand All @@ -16,6 +17,7 @@ interface AccordionCardProps {
children: React.ReactNode;
trigger?: React.ReactNode;
isExpanded?: boolean;
className?: string;
}

export function AccordionCard({
Expand All @@ -25,10 +27,11 @@ export function AccordionCard({
children,
trigger,
isExpanded,
className,
}: AccordionCardProps) {
return (
<Card>
<CardHeader icon={icon} className="pl-0">
<CardHeader icon={icon}>
<div className="flex items-center justify-between">
{typeof title === "string" ? (
<CardTitle className="text-foreground">{title}</CardTitle>
Expand All @@ -45,12 +48,12 @@ export function AccordionCard({
collapsible
defaultValue={isExpanded ? "item" : undefined}
>
<AccordionItem value="item" className="flex flex-col gap-4">
<AccordionItem value="item" className="flex flex-col gap-2">
<AccordionTrigger className="text-xs text-muted-foreground">
{trigger}
</AccordionTrigger>

<AccordionContent className="text-xs flex flex-col bg-background border border-background rounded-md gap-px">
<AccordionContent className={cn("flex flex-col", className)}>
{children}
</AccordionContent>
</AccordionItem>
Expand Down
148 changes: 46 additions & 102 deletions packages/keychain/src/components/session/AggregateCard.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,13 @@
import React, { Fragment } from "react";
import { Card } from "@cartridge/ui-next";
import React from "react";
import { formatAddress } from "@cartridge/utils";
import { Divider, HStack, Spacer, Stack, Text, VStack } from "@chakra-ui/react";
import { useExplorer } from "@starknet-react/core";
import { constants } from "starknet";
import { Method } from "@cartridge/presets";
import { useChainId } from "@/hooks/connection";
import { ParsedSessionPolicies } from "@/hooks/session";
import { Link } from "react-router-dom";
import { AccordionCard } from "./AccordionCard";
import { MessageContent } from "./MessageCard";

interface AggregateCardProps {
title: string;
Expand Down Expand Up @@ -42,109 +41,54 @@ export function AggregateCard({ title, icon, policies }: AggregateCardProps) {
</span>
</div>
}
className="gap-2"
>
<Card>
{Object.entries(policies.contracts || {}).map(
([address, { name, methods }]) => (
<Fragment key={address}>
<HStack py={4}>
<Text color="text.primary" fontWeight="bold">
{name}
</Text>
<Spacer />
<Link
to={
chainId === constants.StarknetChainId.SN_MAIN ||
chainId === constants.StarknetChainId.SN_SEPOLIA
? explorer.contract(address)
: `#` // TODO: Add explorer for worlds.dev
}
target="_blank"
className="text-muted-foreground hover:underline"
>
{formatAddress(address, { first: 5, last: 5 })}
</Link>
</HStack>
<Stack
border="1px solid"
spacing={0}
borderColor="darkGray.800"
borderRadius="md"
divider={<Divider borderColor="solid.bg" />}
{Object.entries(policies.contracts || {}).map(
([address, { name, methods }]) => (
<div key={address} className="flex flex-col gap-2">
<div className="flex items-center justify-between bg-secondary text-xs">
<div className="py-2 font-bold">{name}</div>
<Link
to={
chainId === constants.StarknetChainId.SN_MAIN ||
chainId === constants.StarknetChainId.SN_SEPOLIA
? explorer.contract(address)
: `#` // TODO: Add explorer for worlds.dev
}
target="_blank"
className="text-muted-foreground hover:underline"
>
{methods.map((method: Method) => (
<VStack key={method.name} p={3} gap={3} align="flex-start">
<HStack w="full">
<Text
fontSize="xs"
color="text.primary"
fontWeight="bold"
>
{method.name}
</Text>
<Spacer />
<Text
fontSize="xs"
color="text.secondaryAccent"
fontWeight="bold"
>
{method.entrypoint}
</Text>
</HStack>
{method.description && (
<Text fontSize="xs" color="text.secondary">
{method.description}
</Text>
)}
</VStack>
))}
</Stack>
</Fragment>
),
)}
{formatAddress(address, { first: 5, last: 5 })}
</Link>
</div>

{policies.messages?.map((message) => (
<VStack key={message.primaryType} py={4} w="full" align="flex-start">
<Text
fontSize="sm"
className="text-foreground"
fontWeight="bold"
mb={4}
>
Messages
</Text>
<Stack
border="1px solid"
spacing={0}
borderColor="darkGray.800"
borderRadius="md"
divider={<Divider borderColor="solid.bg" />}
w="full"
>
{Object.entries(message.types).map(([typeName, fields]) => (
<VStack key={typeName} p={3} gap={3} align="flex-start">
<HStack w="full">
<Text fontSize="xs" color="text.primary" fontWeight="bold">
{typeName}
</Text>
</HStack>
{fields.map((field) => (
<HStack key={field.name} w="full">
<Text fontSize="xs" color="text.secondary">
{field.name}
</Text>
<Spacer />
<Text fontSize="xs" color="text.secondaryAccent">
{field.type}
</Text>
</HStack>
))}
</VStack>
<div className="flex flex-col gap-px rounded overflow-auto border border-background">
{methods.map((method: Method) => (
<div
key={method.name}
className="flex flex-col p-3 gap-3 text-xs"
>
<div className="flex items-center justify-between">
<div className="font-bold text-accent-foreground">
{method.name}
</div>
<div className="text-muted-foreground">
{method.entrypoint}
</div>
</div>
{method.description && (
<div className="text-muted-foreground">
{method.description}
</div>
)}
</div>
))}
</Stack>
</VStack>
))}
</Card>
</div>
</div>
),
)}

{policies.messages && <MessageContent messages={policies.messages} />}
</AccordionCard>
);
}
7 changes: 4 additions & 3 deletions packages/keychain/src/components/session/ContractCard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,17 +54,18 @@ export function ContractCard({
</span>
</div>
}
className="bg-background gap-px rounded overflow-auto border border-background"
>
{methods.map((method) => (
<div
key={method.entrypoint}
className="flex flex-col bg-secondary gap-4 p-3 first:rounded-t-md last:rounded-b-md text-xs"
className="flex flex-col bg-secondary gap-4 p-3 text-xs"
>
<div className="flex items-center justify-between">
<div className="font-bold">
<div className="font-bold text-accent-foreground">
{method.name ?? humanizeString(method.entrypoint)}
</div>
<div className="text-accent-foreground">{method.entrypoint}</div>
<div className="text-muted-foreground">{method.entrypoint}</div>
</div>
{method.description && (
<div className="text-muted-foreground">{method.description}</div>
Expand Down
Loading

0 comments on commit b755f38

Please sign in to comment.