Layout for "Manage starnames/iovnames/names" views

packages/bierzo-wallet/src/routes/addressManage/ManageName.tsx

@@ -0,0 +1,121 @@
+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 { history } from "..";
+import AddressesTable from "../../components/AddressesTable";
+import copy from "../../components/AddressesTable/assets/copy.svg";
+import { BwUsernameWithChainName } from "../addresses";
+import { REGISTER_IOVNAME_ROUTE } from "../paths";
+import { AddressesTooltipHeader, TooltipContent } from "../register";
+
+interface Props {
+  readonly account: BwUsernameWithChainName;
+  readonly menuItems: readonly ActionMenuItem[];
+  readonly onRegisterUsername: () => void;
+}
+
+const usePaper = makeStyles({
+  rounded: {
+    borderRadius: "5px",
+  },
+  elevation1: {
+    boxShadow: "none",
+  },
+});
+
+const useStyles = makeStyles({
+  link: {
+    cursor: "pointer",
+  },
+});
+const ManageName: React.FunctionComponent<Props> = ({ account, menuItems, 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_IOVNAME_ROUTE, account);
+  };
+
+  return (
+    <Block marginTop={1} width={650}>
+      <Paper classes={paperClasses}>
+        <Block
+          display="flex"
+          flexDirection="column"
+          width="100%"
+          marginTop={4}
+          padding={5}
+          border="1px solid #F3F3F3"
+        >
+          <Block display="flex" alignItems="center" alignSelf="center">
+            <Typography variant="h4" align="center">
+              {account.username}
+            </Typography>
+            <Block marginRight={2} />
+            <Block onClick={onAccountCopy} className={classes.link}>
+              <Image src={copy} alt="Copy" width={20} />
+            </Block>
+          </Block>
+          <Typography variant="body2" inline align="center" color="textSecondary">
+            Expires on 19/12/2025
+          </Typography>
+          <Block display="flex" alignItems="center" marginBottom={1} marginTop={4}>
+            <Block display="flex" alignItems="center" width={162}>
+              <Typography variant="subtitle2" weight="semibold" inline>
+                {account.addresses.length > 0 ? "LINKED ADDRESSES" : "NO LINKED ADDRESSES"}
+              </Typography>
+
+              <Block marginRight={1} />
+              <Tooltip maxWidth={320}>
+                <TooltipContent header={<AddressesTooltipHeader />} 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.
+                </TooltipContent>
+              </Tooltip>
+            </Block>
+            <Block marginLeft={2} marginRight={2} flexGrow={1}>
+              <Hairline color="grey.100" />
+            </Block>
+            <Typography
+              variant="subtitle2"
+              weight="semibold"
+              inline
+              link
+              color="primary"
+              align="right"
+              onClick={onEdit}
+            >
+              {account.addresses.length > 0 ? "Edit" : "Link Now"}
+            </Typography>
+            <Block marginLeft={2} marginRight={2} borderColor="grey.100" borderLeft="1px solid" height={30} />
+            <ActionMenu menuItems={menuItems} />
+            <Block marginLeft={1} />
+          </Block>
+          <Block marginTop={2} />
+          {account.addresses.length > 0 && <AddressesTable chainAddresses={account.addresses} />}
+        </Block>
+      </Paper>
+    </Block>
+  );
+};
+
+export default ManageName;

packages/bierzo-wallet/src/routes/addressManage/index.stories.tsx

@@ -0,0 +1,71 @@
+import { Address, ChainId } from "@iov/bcp";
+import { action } from "@storybook/addon-actions";
+import { linkTo } from "@storybook/addon-links";
+import { storiesOf } from "@storybook/react";
+import { ActionMenuItem } from "medulas-react-components";
+import React from "react";
+
+import { ChainAddressPairWithName } from "../../components/AddressesTable";
+import DecoratedStorybook, { bierzoRoot } from "../../utils/storybook";
+import { BwUsernameWithChainName } from "../addresses";
+import {
+  REGISTER_USERNAME_REGISTRATION_STORY_PATH,
+  REGISTER_USERNAME_STORY_PATH,
+} from "../register/index.stories";
+import ManageName from "./ManageName";
+
+const chainAddresses: ChainAddressPairWithName[] = [
+  {
+    chainId: "local-iov-devnet" as ChainId,
+    address: "tiov1dcg3fat5zrvw00xezzjk3jgedm7pg70y222af3" as Address,
+    chainName: "IOV Devnet",
+  },
+  {
+    chainId: "lisk-198f2b61a8" as ChainId,
+    address: "1349293588603668134L" as Address,
+    chainName: "Lisk Devnet",
+  },
+  {
+    chainId: "ethereum-eip155-5777" as ChainId,
+    address: "0xD383382350F9f190Bd2608D6381B15b4e1cec0f3" as Address,
+    chainName: "Ganache",
+  },
+];
+
+const username: BwUsernameWithChainName = {
+  username: "test2*iov",
+  addresses: [chainAddresses[0], chainAddresses[1]],
+};
+
+const menuItems: readonly ActionMenuItem[] = [
+  {
+    title: "Renew",
+    action: () => {
+      action("Renew")();
+    },
+  },
+  {
+    title: "Transfer iovname",
+    action: () => {
+      action("Transfer iovname")();
+    },
+  },
+  {
+    title: "Delete iovname",
+    action: () => {
+      action("Delete iovname")();
+    },
+  },
+];
+
+storiesOf(`${bierzoRoot}/Address Manage`, module)
+  .addParameters({ viewport: { defaultViewport: "responsive" } })
+  .add("Manage names", () => (
+    <DecoratedStorybook>
+      <ManageName
+        account={username}
+        menuItems={menuItems}
+        onRegisterUsername={linkTo(REGISTER_USERNAME_STORY_PATH, REGISTER_USERNAME_REGISTRATION_STORY_PATH)}
+      />
+    </DecoratedStorybook>
+  ));

packages/bierzo-wallet/src/routes/addressManage/index.tsx

@@ -0,0 +1,40 @@
+import { ActionMenuItem, Block } from "medulas-react-components";
+import * as React from "react";
+
+import { history } from "..";
+import PageMenu from "../../components/PageMenu";
+import { BwUsernameWithChainName } from "../addresses";
+import { REGISTER_IOVNAME_ROUTE, REGISTER_STARNAME_ROUTE } from "../paths";
+import ManageName from "./ManageName";
+
+function onRegisterUsername(): void {
+  history.push(REGISTER_IOVNAME_ROUTE);
+}
+
+function onRegisterStarname(): void {
+  history.push(REGISTER_STARNAME_ROUTE);
+}
+
+const menuItems: readonly ActionMenuItem[] = [
+  { title: "Renew", action: () => console.log("Renew") },
+  { title: "Transfer iovname", action: () => console.log("Transfer iovname") },
+  { title: "Delete iovname", action: () => console.log("Delete iovname") },
+];
+
+const AddressManage = (): JSX.Element => {
+  const aadressToManage: BwUsernameWithChainName | undefined = history.location.state;
+
+  if (!aadressToManage) {
+    throw new Error("No address to manage provided, something wrong.");
+  }
+
+  return (
+    <PageMenu>
+      <Block marginTop={4} display="flex" flexDirection="column" alignItems="center" justifyContent="center">
+        <ManageName menuItems={menuItems} account={aadressToManage} onRegisterUsername={onRegisterUsername} />
+      </Block>
+    </PageMenu>
+  );
+};
+
+export default AddressManage;

packages/bierzo-wallet/src/routes/addresses/components/IovnamesExists.tsx

@@ -15,8 +15,8 @@ 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";
+import { ADDRESS_MANAGE_ROUTE, REGISTER_IOVNAME_ROUTE } from "../../paths";
+import { AddressesTooltipHeader, TooltipContent } from "../../register";
 
 interface Props {
   readonly usernames: readonly BwUsernameWithChainName[];
@@ -46,7 +46,7 @@ function IovnamesExists({ usernames, onRegisterUsername }: Props): JSX.Element {
   return (
     <React.Fragment>
       <Typography
-        id={REGISTER_PERSONALIZED_ADDRESS_ROUTE}
+        id={REGISTER_IOVNAME_ROUTE}
         link
         color="primary"
         align="center"
@@ -61,7 +61,7 @@ function IovnamesExists({ usernames, onRegisterUsername }: Props): JSX.Element {
         };
 
         const onEdit = (): void => {
-          history.push(REGISTER_PERSONALIZED_ADDRESS_ROUTE, username);
+          history.push(ADDRESS_MANAGE_ROUTE, username);
         };
 
         return (

packages/bierzo-wallet/src/routes/index.tsx

@@ -4,9 +4,11 @@ import { Route, Router, Switch } from "react-router";
 
 import RequireLogin from "../components/RequireLogin";
 import Addresses from "./addresses";
+import AddressManage from "./addressManage";
 import Balance from "./balance";
 import Login from "./login";
 import {
+  ADDRESS_MANAGE_ROUTE,
   ADDRESSES_ROUTE,
   BALANCE_ROUTE,
   LOGIN_ROUTE,
@@ -32,6 +34,7 @@ const Routes = (): JSX.Element => (
       <RequireLogin>
         <Route exact path={PAYMENT_ROUTE} component={Payment} />
         <Route exact path={ADDRESSES_ROUTE} component={Addresses} />
+        <Route exact path={ADDRESS_MANAGE_ROUTE} component={AddressManage} />
         <Route exact path={TRANSACTIONS_ROUTE} component={Transactions} />
         <Route exact path={BALANCE_ROUTE} component={Balance} />
         <Route exact path={REGISTER_PERSONALIZED_ADDRESS_ROUTE} component={RegisterUsername} />

packages/bierzo-wallet/src/routes/paths.ts

@@ -4,6 +4,9 @@ export const TRANSACTIONS_ROUTE = "/transactions";
 export const BALANCE_ROUTE = "/balance";
 export const CONFIRM_TRANSACTION_ROUTE = "/confirm-transaction";
 export const ADDRESSES_ROUTE = "/addresses";
-export const REGISTER_PERSONALIZED_ADDRESS_ROUTE = "/register-personalized-address";
+export const ADDRESS_MANAGE_ROUTE = "/address-manage";
+export const REGISTER_IOVNAME_ROUTE = "/register-iovname";
+export const REGISTER_STARNAME_ROUTE = "/register-starname";
+export const REGISTER_NAME_ROUTE = "/register-name";
 export const TERMS_ROUTE = "/terms";
 export const POLICY_ROUTE = "/policy";

packages/medulas-react-components/src/components/ActionMenu/index.stories.tsx

@@ -0,0 +1,21 @@
+import { action } from "@storybook/addon-actions";
+import { storiesOf } from "@storybook/react";
+import React from "react";
+
+import { medulasRoot, Storybook } from "../../utils/storybook";
+import Block from "../Block";
+import ActionMenu, { ActionMenuItem } from "./index";
+
+const menuItems: ActionMenuItem[] = [
+  { title: "Renew", action: () => action("Renew")() },
+  { title: "Transfer iovname", action: () => action("Transfer iovname")() },
+  { title: "Delete iovname", action: () => action("Delete iovname")() },
+];
+
+storiesOf(`${medulasRoot}/components`, module).add("ActionMenu", () => (
+  <Storybook>
+    <Block marginBottom={4} display="flex" justifyContent="center">
+      <ActionMenu menuItems={menuItems} />
+    </Block>
+  </Storybook>
+));