Move Address manage component to another route

iov-one · Mar 4, 2020 · 991be4e · 991be4e
1 parent 1774bc2
commit 991be4e
Show file tree

Hide file tree

Showing 7 changed files with 131 additions and 29 deletions.
diff --git a/...outes/addresses/components/ManageName.tsx → ...t/src/routes/addressManage/ManageName.tsx b/...outes/addresses/components/ManageName.tsx → ...t/src/routes/addressManage/ManageName.tsx
@@ -14,15 +14,16 @@ import {
 } 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";
+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;
 }
 
@@ -35,19 +36,12 @@ const usePaper = makeStyles({
   },
 });
 
-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<Props> = ({ account, onRegisterUsername }) => {
+const ManageName: React.FunctionComponent<Props> = ({ account, menuItems, onRegisterUsername }) => {
   const paperClasses = usePaper();
   const classes = useStyles();
   const toast = React.useContext(ToastContext);
@@ -58,7 +52,7 @@ const ManageName: React.FunctionComponent<Props> = ({ account, onRegisterUsernam
   };
 
   const onEdit = (): void => {
-    history.push(REGISTER_PERSONALIZED_ADDRESS_ROUTE, account);
+    history.push(REGISTER_IOVNAME_ROUTE, account);
   };
 
   return (

diff --git a/packages/bierzo-wallet/src/routes/addressManage/index.stories.tsx b/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>
+  ));
diff --git a/packages/bierzo-wallet/src/routes/addressManage/index.tsx b/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;
diff --git a/packages/bierzo-wallet/src/routes/addresses/components/IovnamesExists.tsx b/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 (

diff --git a/packages/bierzo-wallet/src/routes/addresses/index.stories.tsx b/packages/bierzo-wallet/src/routes/addresses/index.stories.tsx
@@ -12,7 +12,6 @@ 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[] = [
@@ -102,12 +101,4 @@ storiesOf(`${bierzoRoot}/Addresses`, module)
         rpcEndpointType="extension"
       />
     </DecoratedStorybook>
-  ))
-  .add("Manage names", () => (
-    <DecoratedStorybook>
-      <ManageName
-        account={usernames[0]}
-        onRegisterUsername={linkTo(REGISTER_USERNAME_STORY_PATH, REGISTER_USERNAME_REGISTRATION_STORY_PATH)}
-      />
-    </DecoratedStorybook>
   ));
diff --git a/packages/bierzo-wallet/src/routes/index.tsx b/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} />

diff --git a/packages/bierzo-wallet/src/routes/paths.ts b/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";