Skip to content

Commit

Permalink
Merge pull request #13 from ourzora/add-transaction-view
Browse files Browse the repository at this point in the history
Smol Safe UI updates
  • Loading branch information
iainnash authored Dec 18, 2023
2 parents df22d2b + f3d77c0 commit 4ccc6cb
Show file tree
Hide file tree
Showing 7 changed files with 216 additions and 168 deletions.
104 changes: 54 additions & 50 deletions src/app/NewSafeProposal.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { Field, FieldArray, Formik } from "formik";
import { SafeInformation } from "./SafeInformation";
import { SafeInformation } from "../components/SafeInformation";
import { Card, View, Text, Button, useToast } from "reshaped";
import {
SyntheticEvent,
Expand Down Expand Up @@ -445,55 +445,59 @@ const EditProposal = ({
const defaultActions = proposal || DEFAULT_PROPOSAL;

return (
<Card>
<Formik
validationSchema={proposalSchema}
initialValues={defaultActions}
onSubmit={onSubmit}
>
{({ handleSubmit, values, isValid }) => (
<form onSubmit={handleSubmit}>
<View gap={4}>
<View.Item>
<Text variant="featured-2">New Proposal Details</Text>
</View.Item>
<View.Item>
<Field name="nonce">
{GenericField({
label: "Nonce (optional)",
fieldProps: { type: "number" },
})}
</Field>
</View.Item>
<FieldArray name="actions">
{(actions) => (
<>
{values.actions?.map((_, indx) => (
<FormActionItem
remove={actions.remove}
indx={indx}
name={`actions.${indx}`}
/>
))}
<View direction="row" justify="space-between">
<View> </View>
<Button onClick={actions.handlePush(DEFAULT_ACTION_ITEM)}>
Add
</Button>
</View>
</>
)}
</FieldArray>
<View.Item>
<Button disabled={!isValid} type="submit">
Done
</Button>
</View.Item>
</View>
</form>
)}
</Formik>
</Card>
<View paddingTop={4}>
<Card>
<Formik
validationSchema={proposalSchema}
initialValues={defaultActions}
onSubmit={onSubmit}
>
{({ handleSubmit, values, isValid }) => (
<form onSubmit={handleSubmit}>
<View gap={4}>
<View.Item>
<Text variant="featured-2">New Proposal Details</Text>
</View.Item>
<View.Item>
<Field name="nonce">
{GenericField({
label: "Nonce (optional)",
fieldProps: { type: "number" },
})}
</Field>
</View.Item>
<FieldArray name="actions">
{(actions) => (
<>
{values.actions?.map((_, indx) => (
<FormActionItem
remove={actions.remove}
indx={indx}
name={`actions.${indx}`}
/>
))}
<View direction="row" justify="space-between">
<View> </View>
<Button
onClick={actions.handlePush(DEFAULT_ACTION_ITEM)}
>
Add
</Button>
</View>
</>
)}
</FieldArray>
<View.Item>
<Button disabled={!isValid} type="submit">
Done
</Button>
</View.Item>
</View>
</form>
)}
</Formik>
</Card>
</View>
);
};

Expand Down
98 changes: 0 additions & 98 deletions src/app/SafeInformation.tsx

This file was deleted.

19 changes: 19 additions & 0 deletions src/app/SafeInformationPage.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
import { Button, View } from "reshaped";
import { SafeInformation } from "../components/SafeInformation";
import { Link, useNavigate, useParams } from "react-router-dom";

export const SafeInformationPage = () => {
const { networkId, safeAddress } = useParams();
const navigate = useNavigate();

const onNewProposalClick = () => {
navigate(`/safe/${networkId}/${safeAddress}/new`);
};

return (
<View gap={4}>
<SafeInformation />
<Button onClick={onNewProposalClick}>New Proposal</Button>
</View>
);
};
4 changes: 2 additions & 2 deletions src/app/Wrapper.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,8 @@ import { App } from "./App";
import { ViewSafe } from "./ViewSafe";
import { Root } from "./Root";
import { CreateSafe } from "./CreateSafe";
import { SafeInformation } from "./SafeInformation";
import { NewSafeProposal } from "./NewSafeProposal";
import { SafeInformationPage } from "./SafeInformationPage";

const router = createHashRouter([
{
Expand All @@ -29,7 +29,7 @@ const router = createHashRouter([
{
path: "/safe/:networkId/:safeAddress",
index: true,
Component: SafeInformation,
Component: SafeInformationPage,
},
{
path: "/safe/:networkId/:safeAddress/new",
Expand Down
2 changes: 1 addition & 1 deletion src/components/InfoBox.tsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { Icon, Tooltip } from "reshaped";
import { Info } from "react-feather";

export const InfoBox = ({ children }: { children: string }) => {
export const InfoBox = ({ children }: { children: React.ReactNode }) => {
return (
<Tooltip text={children}>
{(attributes) => (
Expand Down
118 changes: 118 additions & 0 deletions src/components/SafeInformation.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,118 @@
import { useContext, useState } from "react";
import { SafeInformationContext } from "../app/ViewSafe";
import { Button, Card, Text, View } from "reshaped";
import { allowedNetworks } from "../chains";
import { InfoBox } from "../components/InfoBox";
import { Address } from "viem";
import { AddressView } from "../components/AddressView";
import { OwnerAction, SetOwnerModal } from "../components/SetOwnerModal";

const SafeInformationItem = ({
title,
description,
children,
}: {
title: string;
description: string;
children: React.ReactNode;
}) => (
<>
<View direction="row" align="center">
<Text variant="body-2">{title}:</Text> <InfoBox>{description}</InfoBox>
</View>
{children}
</>
);

export const SafeInformation = ({
children,
}: {
children?: React.ReactNode;
}) => {
const [ownerAction, setOwnerAction] = useState<OwnerAction>();

const safeInformation = useContext(SafeInformationContext);

if (!safeInformation) return <div></div>;
return (
<div>
{ownerAction && (
<SetOwnerModal
onClose={() => {
setOwnerAction(undefined);
}}
action={ownerAction}
/>
)}
<Card>
<View divided gap={2}>
<View.Item>
<SafeInformationItem
title="Network"
description="Chain for the Safe"
>
{allowedNetworks[safeInformation.chainId]?.name ||
safeInformation.chainId.toString()}
</SafeInformationItem>
</View.Item>
<View.Item>
<SafeInformationItem
title="Threshold"
description="Number of signers that need to approve a transaction before
execution"
>
{safeInformation.threshold}
</SafeInformationItem>
</View.Item>
<View.Item>
<SafeInformationItem
title="Signers"
description="Signers are the list of addresses for the signers of the multisig"
>
<View paddingTop={1}>
{safeInformation.owners.map((owner) => (
<View.Item key={owner}>
<View align="center" direction="row">
<AddressView address={owner as Address} />
<Button
onClick={() => {
setOwnerAction({ type: "remove", address: owner });
}}
variant="ghost"
>
{" "}
x{" "}
</Button>
</View>
</View.Item>
))}
<View.Item>
<View justify="end" direction="row">
<View>
<Button
onClick={() => {
setOwnerAction({ type: "add" });
}}
>
Add
</Button>
</View>
</View>
</View.Item>
</View>
</SafeInformationItem>
</View.Item>
<View.Item>
<SafeInformationItem
title="Nonce"
description="Nonce is the index of the current transaction of the safe"
>
{safeInformation.nonce}
</SafeInformationItem>
</View.Item>
</View>
</Card>
{children}
</div>
);
};
Loading

0 comments on commit 4ccc6cb

Please sign in to comment.