diff --git a/packages/bierzo-wallet/src/routes/addresses/components/ManageName.tsx b/packages/bierzo-wallet/src/routes/addresses/components/ManageName.tsx new file mode 100644 index 000000000..23647effe --- /dev/null +++ b/packages/bierzo-wallet/src/routes/addresses/components/ManageName.tsx @@ -0,0 +1,127 @@ +import Paper from "@material-ui/core/Paper"; +import clipboardCopy from "clipboard-copy"; +import { + ActionMenu, + ActionMenuItem, + Block, + Hairline, + Image, + makeStyles, + ToastContext, + ToastVariant, + Tooltip, + Typography, +} from "medulas-react-components"; +import React from "react"; + +import { BwUsernameWithChainName } from ".."; +import { history } from "../.."; +import AddressesTable from "../../../components/AddressesTable"; +import copy from "../../../components/AddressesTable/assets/copy.svg"; +import { REGISTER_PERSONALIZED_ADDRESS_ROUTE } from "../../paths"; +import { AddressesTooltipHeader, TooltipContent } from "../../registerName/components"; + +interface Props { + readonly account: BwUsernameWithChainName; + readonly onRegisterUsername: () => void; +} + +const usePaper = makeStyles({ + rounded: { + borderRadius: "5px", + }, + elevation1: { + boxShadow: "none", + }, +}); + +const menuItems: ActionMenuItem[] = [ + { title: "Renew", action: () => console.log("Renew") }, + { title: "Transfer iovname", action: () => console.log("Transfer iovname") }, + { title: "Delete iovname", action: () => console.log("Delete iovname") }, +]; + +const useStyles = makeStyles({ + link: { + cursor: "pointer", + }, +}); + +const ManageName: React.FunctionComponent = ({ account, onRegisterUsername }) => { + const paperClasses = usePaper(); + const classes = useStyles(); + const toast = React.useContext(ToastContext); + + const onAccountCopy = (): void => { + clipboardCopy(account.username); + toast.show("Account has been copied to clipboard.", ToastVariant.INFO); + }; + + const onEdit = (): void => { + history.push(REGISTER_PERSONALIZED_ADDRESS_ROUTE, account); + }; + + return ( + + + + + + {account.username} + + + + Copy + + + + Expires on 19/12/2025 + + + + + {account.addresses.length > 0 ? "LINKED ADDRESSES" : "NO LINKED ADDRESSES"} + + + + + } title="Your linked addresses"> + With IOV you can have an universal blockchain address that is linked to all your addresses. + Just give your friends your personalized address. + + + + + + + + {account.addresses.length > 0 ? "Edit" : "Link Now"} + + + + + + + {account.addresses.length > 0 && } + + + + ); +}; + +export default ManageName; diff --git a/packages/bierzo-wallet/src/routes/addresses/index.stories.tsx b/packages/bierzo-wallet/src/routes/addresses/index.stories.tsx index fce1cfce4..75a1f9bc1 100644 --- a/packages/bierzo-wallet/src/routes/addresses/index.stories.tsx +++ b/packages/bierzo-wallet/src/routes/addresses/index.stories.tsx @@ -12,6 +12,7 @@ import { import { BwUsernameWithChainName } from "."; import AddressesTab from "./components/AddressesTab"; import Iovnames from "./components/Iovnames"; +import ManageName from "./components/ManageName"; import UserAddresses from "./components/UserAddresses"; const chainAddresses: ChainAddressPairWithName[] = [ @@ -101,4 +102,12 @@ storiesOf(`${bierzoRoot}/Addresses`, module) rpcEndpointType="extension" /> + )) + .add("Manage names", () => ( + + + ));