Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add tx page and elements interface #62

Merged
merged 3 commits into from
Sep 28, 2023
Merged

Add tx page and elements interface #62

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
8e3832d
add tx page and elements interface
bogos Sep 25, 2023
402de06
Merge branch 'develop' of github.com:protofire/ink-multisig-ui into f…
bogos Sep 26, 2023
0c96b8d
refactor grid components, fix problem with icons steppers
bogos Sep 27, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
36 changes: 36 additions & 0 deletions public/assets/arrow-outward.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
11 changes: 8 additions & 3 deletions src/components/AddressAccountSelect/AccountAvatar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,20 +1,25 @@
import { Avatar, Box, Typography } from "@mui/material";
import Identicon from "@polkadot/react-identicon";

import { truncateAddress } from "@/utils/formatString";
import { shortNameLonger, truncateAddress } from "@/utils/formatString";

interface Props {
address: string;
truncateLenght?: number;
name?: string;
}

export function AccountAvatar({ address }: Props) {
export function AccountAvatar({ address, name, truncateLenght = 4 }: Props) {
return (
<Box display="flex" alignItems="center">
<Avatar>
<Identicon value={address} size={32} theme="beachball" />
</Avatar>
<Box marginLeft={1}>
<Typography color="white">{truncateAddress(address, 4)}</Typography>
{name !== undefined ? <span>{shortNameLonger(name)}</span> : <></>}
henrypalacios marked this conversation as resolved.
Show resolved Hide resolved
<Typography color={name !== undefined ? "#636669" : "white"}>
henrypalacios marked this conversation as resolved.
Show resolved Hide resolved
{truncateAddress(address, truncateLenght)}
</Typography>
</Box>
</Box>
);
Expand Down
68 changes: 68 additions & 0 deletions src/components/TxTable/Tabs.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,68 @@
import Box from "@mui/material/Box";
import Tab from "@mui/material/Tab";
import Tabs from "@mui/material/Tabs";
import * as React from "react";

interface TabPanelProps {
children?: React.ReactNode;
index: number;
value: number;
}

type AssetTabsProps = {
options: string[];
children: React.ReactNode;
onChange?: (newValue: number) => void;
};

function CustomTabPanel(props: TabPanelProps) {
const { children, value, index, ...other } = props;

return (
<div
role="tabpanel"
hidden={value !== index}
id={`simple-tabpanel-${index}`}
aria-labelledby={`simple-tab-${index}`}
{...other}
>
{value === index && <Box>{children}</Box>}
</div>
);
}

function a11yProps(index: number) {
return {
id: `assets-tab-${index}`,
"aria-controls": `simple-tabpanel-${index}`,
};
}

export default function AssetTabs(props: AssetTabsProps) {
const [value, setValue] = React.useState(0);

const handleChange = (_: React.SyntheticEvent, newValue: number) => {
setValue(newValue);
props.onChange?.(newValue);
};

return (
<Box sx={{ width: "100%" }}>
<Box sx={{ borderBottom: 1, borderColor: "divider" }}>
<Tabs value={value} onChange={handleChange}>
{props.options.map((option, index) => (
<Tab
key={option}
label={option}
{...a11yProps(index)}
sx={{ textTransform: "none" }}
/>
))}
</Tabs>
</Box>
<CustomTabPanel value={value} index={value}>
{props.children}
</CustomTabPanel>
</Box>
);
}
55 changes: 55 additions & 0 deletions src/components/TxTable/TxDetail/AdvancedDetail.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,55 @@
import { Grid, Typography } from "@mui/material";

import { DEFAULT_COL_WIDTH, StyledTypography } from "./styled";

type Props = { data: undefined };

const advancedDetails = [
{
name: "Operation:",
value: "0(call)",
},
{
name: "safeTxGas:",
value: "59786",
},
{
name: "baseGas:",
value: "0",
},
{
name: "gasPrice:",
value: "0",
},
{
name: "gasToken:",
value: "0x0000...0000",
},
{
name: "refundReceiver:",
value: "0x0000...0000",
},
{
name: "Signature 1:",
value: "65 bytes",
},
{
name: "Raw data:",
value: "68 bytes",
},
];

export const AdvancedDetail = (data: Props) => (
<Grid container>
{advancedDetails.map((detail) => (
<>
<Grid item {...DEFAULT_COL_WIDTH.name}>
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Wouldn't this be the same as the new GridCol component? 🤔

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This will change in the future, because it is not clear to me exactly which properties will be shown.

<StyledTypography>{detail.name}</StyledTypography>
</Grid>
<Grid item {...DEFAULT_COL_WIDTH.value}>
<Typography>{detail.value}</Typography>
</Grid>
</>
))}
</Grid>
);
79 changes: 79 additions & 0 deletions src/components/TxTable/TxDetail/ContractDetail.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,79 @@
import styled from "@emotion/styled";
import { Grid, GridProps, Typography } from "@mui/material";
import React from "react";

import { StyledTypography } from "./styled";

type Props = { data: undefined };

const TabGrid = styled(Grid)<GridProps>(() => ({
paddingLeft: "2rem",
}));

const detailNameWidth = {
xs: 5,
sm: 5,
md: 5,
};

const detailValueWidth = {
xs: 6,
sm: 6,
md: 6,
};

export const ContractDetail = (data: Props) => {
return (
<>
<>
<Grid container>
<Grid item {...detailNameWidth}>
<StyledTypography>Method name:</StyledTypography>
</Grid>
<Grid item {...detailValueWidth}>
<Typography>STORE</Typography>
</Grid>
<Grid item {...detailNameWidth}>
<StyledTypography>Arguments: </StyledTypography>
</Grid>
<Grid item {...detailValueWidth}>
<Typography>15</Typography>
</Grid>
</Grid>

{/* Start argument details*/}
<Grid
container
sx={{
marginTop: "0.5rem",
}}
>
<TabGrid {...detailNameWidth}>
<StyledTypography>Argument Name(ARG Type) </StyledTypography>
</TabGrid>
<Grid item {...detailValueWidth}>
<Typography>ARGUMENT value</Typography>
</Grid>
<TabGrid {...detailNameWidth}>
<StyledTypography>value(unit256): </StyledTypography>
</TabGrid>
<Grid item {...detailValueWidth}>
<Typography>12</Typography>
</Grid>
<TabGrid {...detailNameWidth}>
<StyledTypography>value(unit256): </StyledTypography>
</TabGrid>
<Grid item {...detailValueWidth}>
<Typography>12</Typography>
</Grid>
<TabGrid {...detailNameWidth}>
<StyledTypography>value(unit256): </StyledTypography>
</TabGrid>
<Grid item {...detailValueWidth}>
<Typography>12</Typography>
</Grid>
</Grid>
</>
</>
);
};
48 changes: 48 additions & 0 deletions src/components/TxTable/TxDetail/ReceivedDetail.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,48 @@
import { Grid, Typography } from "@mui/material";

import { truncateAddress } from "@/utils/formatString";

import { DEFAULT_COL_WIDTH, StyledTypography } from "./styled";

type ReceivedDetailProps = { address: string };

export const ReceivedDetail = (data: ReceivedDetailProps) => {
const { address } = data;
const dumpData = {
txHash: truncateAddress(address, 16),
safeTxHahs: 15,
created: "Sep 10, 2023 - 12:53:00 PM",
executed: "Sep 10, 2023 - 12:53:00 PM",
};

return (
<>
<Grid container>
<Grid item {...DEFAULT_COL_WIDTH.name}>
<StyledTypography>Transaction hash:</StyledTypography>
</Grid>
<Grid item {...DEFAULT_COL_WIDTH.value}>
<Typography>{dumpData.txHash}</Typography>
</Grid>
<Grid item {...DEFAULT_COL_WIDTH.name}>
<StyledTypography>safeTxHash: </StyledTypography>
</Grid>
<Grid item {...DEFAULT_COL_WIDTH.value}>
<Typography>{dumpData.safeTxHahs}</Typography>
</Grid>
<Grid item {...DEFAULT_COL_WIDTH.name}>
<StyledTypography>Created: </StyledTypography>
</Grid>
<Grid item {...DEFAULT_COL_WIDTH.value}>
<Typography>{dumpData.created}</Typography>
</Grid>
<Grid item {...DEFAULT_COL_WIDTH.name}>
<StyledTypography>Executed: </StyledTypography>
</Grid>
<Grid item {...DEFAULT_COL_WIDTH.value}>
<Typography>{dumpData.executed}</Typography>
</Grid>
</Grid>
</>
);
};
51 changes: 51 additions & 0 deletions src/components/TxTable/TxDetail/SendDetail.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,51 @@
import { Box, Grid, Typography } from "@mui/material";

import { AccountAvatar } from "@/components/AddressAccountSelect/AccountAvatar";
import CopyButton from "@/components/common/CopyButton";
import OpenNewTabButton from "@/components/common/OpenNewTabButton";

import { DEFAULT_COL_WIDTH, StyledTypography } from "./styled";

type Props = {
address: string;
name: string;
mockUrl: string;
};

export const SendDetail = (data: Props) => {
const { address, name, mockUrl } = data;
return (
<Grid container>
<Grid item {...DEFAULT_COL_WIDTH.name}>
<StyledTypography>Created at:</StyledTypography>
</Grid>
<Grid item {...DEFAULT_COL_WIDTH.value}>
<Typography>Sep 10, 2023 - 12:53:00 PM</Typography>
</Grid>
<Grid item {...DEFAULT_COL_WIDTH.name}>
<StyledTypography>Created by: </StyledTypography>
</Grid>
<Grid
henrypalacios marked this conversation as resolved.
Show resolved Hide resolved
item
{...DEFAULT_COL_WIDTH.value}
sx={{ margin: "22px 0px", display: "flex" }}
>
<AccountAvatar
address={address}
name={name}
truncateLenght={8}
></AccountAvatar>
<Box sx={{ marginTop: "20px", marginLeft: "15px" }}>
<CopyButton text={address} />
<OpenNewTabButton text={mockUrl} />
</Box>
</Grid>
<Grid item {...DEFAULT_COL_WIDTH.name}>
<StyledTypography>Transaction hash:</StyledTypography>
</Grid>
<Grid item {...DEFAULT_COL_WIDTH.value}>
<Typography>BFGSBWmxadVYDrEG7zHIJ</Typography>
</Grid>
</Grid>
);
};
Loading