diff --git a/packages/bierzo-wallet/src/routes/addresses/components/ManageName.tsx b/packages/bierzo-wallet/src/routes/addressManage/ManageName.tsx similarity index 81% rename from packages/bierzo-wallet/src/routes/addresses/components/ManageName.tsx rename to packages/bierzo-wallet/src/routes/addressManage/ManageName.tsx index 23647effe..b4be010d6 100644 --- a/packages/bierzo-wallet/src/routes/addresses/components/ManageName.tsx +++ b/packages/bierzo-wallet/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 = ({ account, onRegisterUsername }) => { +const ManageName: React.FunctionComponent = ({ account, menuItems, onRegisterUsername }) => { const paperClasses = usePaper(); const classes = useStyles(); const toast = React.useContext(ToastContext); @@ -58,7 +52,7 @@ const ManageName: React.FunctionComponent = ({ 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 new file mode 100644 index 000000000..341f7ea1d --- /dev/null +++ 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", () => ( + + + + )); diff --git a/packages/bierzo-wallet/src/routes/addressManage/index.tsx b/packages/bierzo-wallet/src/routes/addressManage/index.tsx new file mode 100644 index 000000000..d8451d793 --- /dev/null +++ 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 ( + + + + + + ); +}; + +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 index 2ba437fec..fd1182e5d 100644 --- 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 ( { - 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 index 75a1f9bc1..fce1cfce4 100644 --- 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" /> - )) - .add("Manage names", () => ( - - - )); diff --git a/packages/bierzo-wallet/src/routes/index.tsx b/packages/bierzo-wallet/src/routes/index.tsx index d7755e767..114bc3250 100644 --- 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 => ( + diff --git a/packages/bierzo-wallet/src/routes/paths.ts b/packages/bierzo-wallet/src/routes/paths.ts index af151a503..bf3d89ef5 100644 --- 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";