Wallet: initial wallet settings page

frontend/wallet/src/common/PublicKey.re

@@ -13,3 +13,7 @@ let prettyPrint = s =>
   };
 
 let equal = (a, b) => a === b;
+
+let uriEncode = Js.Global.encodeURIComponent;
+
+let uriDecode = Js.Global.decodeURIComponent;

frontend/wallet/src/common/PublicKey.rei

@@ -4,3 +4,5 @@ let ofStringExn: string => t;
 let toString: t => string;
 let prettyPrint: t => string;
 let equal: (t, t) => bool;
+let uriEncode: t => string;
+let uriDecode: string => t;

frontend/wallet/src/render/AddressBook.re

@@ -1,6 +1,8 @@
 open Tc;
 
 /// state is an immutable dictionary from public-key to name
+/// Empty string values are not allowed, setting to "" is
+/// equivalent to removing the name for a given key
 
 type t = StrDict.t(string);
 
@@ -21,11 +23,21 @@ let toJsonString = t => {
   |> Js.Json.stringify;
 };
 
-let lookup = (t, key: PublicKey.t) =>
-  StrDict.get(t, ~key=PublicKey.toString(key));
-
-let set = (t, ~key, ~name) =>
-  StrDict.insert(t, ~key=PublicKey.toString(key), ~value=name);
-
-let getWalletName = (t, key: PublicKey.t) =>
+let lookup = (t: StrDict.t(string), key: PublicKey.t) =>
+  StrDict.get(t, ~key=PublicKey.toString(key))
+  |> Option.andThen(
+       ~f=
+         fun
+         | "" => None
+         | x => Some(x),
+     );
+
+let set = (t: StrDict.t(string), ~key, ~name) =>
+  if (name == "") {
+    StrDict.update(t, ~key=PublicKey.toString(key), ~f=_ => None);
+  } else {
+    StrDict.insert(t, ~key=PublicKey.toString(key), ~value=name);
+  };
+
+let getWalletName = (t: StrDict.t(string), key: PublicKey.t) =>
   lookup(t, key) |> Option.withDefault(~default=PublicKey.prettyPrint(key));

frontend/wallet/src/render/Hooks.re

@@ -1,7 +1,7 @@
 let useActiveWallet = () => {
   let url = ReasonReact.Router.useUrl();
   switch (url.path) {
-  | ["wallet", walletKey] => Some(PublicKey.ofStringExn(walletKey))
+  | ["wallet", walletKey] => Some(PublicKey.uriDecode(walletKey))
   | _ => None
   };
 };

frontend/wallet/src/render/Router.re

@@ -4,14 +4,14 @@ module Styles = {
   let container = style([width(`percent(100.)), overflow(`scroll)]);
 };
 
-let navigate = route => ReasonReact.Router.push("#" ++ Route.print(route));
-
 [@react.component]
 let make = () => {
   let url = ReasonReactRouter.useUrl();
   <div className=Styles.container>
     {switch (url.path) {
      | ["settings"] => <SettingsPage />
+     | ["settings", publicKey] =>
+       <WalletSettings publicKey={PublicKey.uriDecode(publicKey)} />
      | _ => <TransactionsView />
      }}
   </div>;

frontend/wallet/src/render/Theme.re

@@ -46,7 +46,9 @@ module Colors = {
   let marineAlpha = a => `rgba((51, 104, 151, a));
   let marine = marineAlpha(1.0);
 
-  let midnight = `hex("1F2D3D");
+  let midnightAlpha = a => `rgba((31, 45, 61, a));
+  let midnight = midnightAlpha(1.0);
+
   let jungle = `hex("2BAC46");
   let sage = `hex("65906e");
   let blanco = `hex("e3e0d5");
@@ -129,7 +131,7 @@ module Text = {
         lineHeight(`rem(1.25)),
       ]);
 
-    let smallSemiBold =
+    let semiBold =
       style([
         Typeface.plex,
         fontWeight(`semiBold),
@@ -139,6 +141,17 @@ module Text = {
       ]);
   };
 
+  module Header = {
+    let h3 =
+      style([
+        Typeface.plex,
+        fontWeight(`medium),
+        fontSize(`rem(1.25)),
+        lineHeight(`rem(1.5)),
+        letterSpacing(`rem(-0.03125)),
+      ]);
+  };
+
   let title =
     style([
       Typeface.plex,

frontend/wallet/src/render/components/AddWalletModal.re

@@ -1,28 +1,35 @@
 module Styles = {
   open Css;
 
-  let bodyMargin = style([margin(`rem(1.0))]);
+  let container =
+    style([
+      margin(`auto),
+      width(`rem(22.)),
+      display(`flex),
+      flexDirection(`column),
+      alignItems(`center),
+      justifyContent(`center),
+    ]);
+
+  let alert = style([margin2(~v=`rem(1.), ~h=`zero)]);
 };
 
 // TODO: Add validation that the wallet name isn't already in use
 
 [@react.component]
 let make = (~walletName, ~setModalState, ~onSubmit) => {
   <Modal title="Add Wallet" onRequestClose={() => setModalState(_ => None)}>
-    <div
-      className=Css.(
-        style([
-          display(`flex),
-          flexDirection(`column),
-          alignItems(`center),
-          justifyContent(`center),
-        ])
-      )>
-      <div className=Styles.bodyMargin>
-        <TextField
-          label="Name"
-          onChange={value => setModalState(_ => Some(value))}
-          value=walletName
+    <div className=Styles.container>
+      <Spacer height=1. />
+      <TextField
+        label="Name"
+        onChange={value => setModalState(_ => Some(value))}
+        value=walletName
+      />
+      <div className=Styles.alert>
+        <Alert
+          kind=`Info
+          message="You can change or delete your wallet later."
         />
       </div>
       <div className=Css.(style([display(`flex)]))>
@@ -31,7 +38,7 @@ let make = (~walletName, ~setModalState, ~onSubmit) => {
           style=Button.Gray
           onClick={_ => setModalState(_ => None)}
         />
-        <Spacer width=1. />
+        <Spacer width=2. />
         <Button
           label="Create"
           style=Button.Green

frontend/wallet/src/render/components/Alert.re

@@ -10,7 +10,9 @@ module Styles = {
       padding2(~v=`rem(0.25), ~h=`rem(0.5)),
     ]);
 
-  let text = Theme.Text.Body.smallSemiBold;
+  let text = Theme.Text.Body.semiBold;
+
+  let icon = style([flexShrink(0)]);
 };
 
 [@react.component]
@@ -25,7 +27,7 @@ let make = (~kind, ~message) => {
       }
     );
   <div className={Styles.box(bgColor, textColor)}>
-    <Icon kind=iconKind />
+    <span className=Styles.icon> <Icon kind=iconKind /> </span>
     <Spacer width=0.25 />
     <div className=Styles.text> {React.string(message)} </div>
   </div>;

frontend/wallet/src/render/components/Button.re

@@ -15,13 +15,14 @@ module Styles = {
         alignItems(`center),
         justifyContent(`center),
         height(`rem(3.)),
-        minWidth(`rem(12.5)),
+        minWidth(`rem(10.)),
         padding2(~v=`zero, ~h=`rem(1.)),
         background(white),
         border(`px(0), `solid, white),
         borderRadius(`rem(0.25)),
         active([outlineStyle(`none)]),
         focus([outlineStyle(`none)]),
+        disabled([pointerEvents(`none)]),
       ]),
     ]);
 
@@ -70,11 +71,13 @@ module Styles = {
 };
 
 [@react.component]
-let make = (~label, ~onClick=?, ~style=Blue) =>
+let make = (~label, ~onClick=?, ~style=Blue, ~disabled=false) =>
   <button
+    disabled
     ?onClick
     className={
       switch (style) {
+      | _ when disabled => Styles.gray
       | Blue => Styles.blue
       | Green => Styles.green
       | Red => Styles.red

frontend/wallet/src/render/components/Footer.re

@@ -93,7 +93,7 @@ let make = () => {
          onClick={_ => setDownloadState(_ => true)}
        />;
      }}
-    <WalletQuery>
+    <WalletQuery partialRefetch=true>
       {response =>
          switch (response.result) {
          | Loading

frontend/wallet/src/render/components/Header.re

@@ -50,9 +50,6 @@ module Styles = {
     ]);
 };
 
-[@bs.val] [@bs.scope "window.history"]
-external historyBack: unit => unit = "back";
-
 module SyncStatus = [%graphql
   {|
 subscription syncStatus {
@@ -69,9 +66,13 @@ module SyncStatusSubscription = ReasonApollo.CreateSubscription(SyncStatus);
 [@react.component]
 let make = () => {
   let url = ReasonReact.Router.useUrl();
-  let onSettingsPage = url.path == ["settings"];
+  let onSettingsPage =
+    switch (url.path) {
+    | ["settings", ..._] => true
+    | _ => false
+    };
   <header className=Styles.header>
-    <div className=Styles.logo>
+    <div className=Styles.logo onClick={_ => ReasonReact.Router.push("/")}>
       <img src="CodaLogo.svg" alt="Coda logo" />
     </div>
     <div className=Styles.rightButtons>
@@ -98,7 +99,8 @@ let make = () => {
         }
         onClick={_e =>
           onSettingsPage
-            ? historyBack() : ReasonReact.Router.push("/settings")
+            ? ReasonReact.Router.push("/")
+            : ReasonReact.Router.push("/settings")
         }>
         <Icon kind=Icon.Settings />
         <Spacer width=0.25 />

frontend/wallet/src/render/components/Icon.re

@@ -2,11 +2,13 @@ type kind =
   | Settings
   | BentArrow
   | ChevronDown
+  | EmptyChevronRight
   | Question
   | Warning
   | Info
   | Success
-  | Danger;
+  | Danger
+  | BackArrow;
 
 [@react.component]
 let make = (~kind) =>
@@ -30,6 +32,11 @@ let make = (~kind) =>
          d="M10.8339 15.5531L5.48633 10.605C4.44743 9.64366 5.18322 8 6.65244 8L17.3476 8C18.8168 8 19.5526 9.64366 18.5137 10.605L13.1661 15.5531C12.5221 16.149 11.4779 16.149 10.8339 15.5531Z"
          strokeWidth="0"
        />
+     | EmptyChevronRight =>
+       <path
+         d="M13.6721 6.93658L8.73555 2L6 4.73709L13.1493 11.8864L9.58124 15.4545C7.61876 17.417 6.01283 19.0345 6.01315 19.0489C6.01315 19.0636 6.62606 19.6881 7.37474 20.4368L8.73671 21.7987L13.6721 16.8618C16.3872 14.1467 18.6087 11.9136 18.6087 11.8989C18.6087 11.8842 16.3872 9.65161 13.6721 6.93658Z"
+         strokeWidth="0"
+       />
      | BentArrow =>
        <path
          d="M7.3273 6V14.2316H13.0437V11.5L18.5 14.8353L13.0437 18V15.4391H6V6H7.3273Z"
@@ -66,5 +73,10 @@ let make = (~kind) =>
          d="M5.34655 19H19.6599C20.6608 19 21.3052 17.9697 20.8527 17.0999L13.696 4.72256C13.2025 3.75915 11.7904 3.75915 11.2967 4.72256L4.14004 17.0999C3.70131 17.9696 4.34569 19 5.34654 19H5.34655ZM13.6276 16.1231C13.6276 16.7654 13.1478 17.2605 12.4623 17.2605C11.7768 17.2605 11.2969 16.7654 11.2969 16.1231V16.0963C11.2969 15.4541 11.7768 14.959 12.4623 14.959C13.1478 14.959 13.6276 15.4541 13.6276 16.0963V16.1231ZM11.8316 7.76012H13.1752C13.5454 7.76012 13.7648 8.06788 13.7237 8.45592L13.1341 13.4871C13.093 13.8484 12.8462 14.0759 12.5034 14.0759C12.1607 14.0759 11.9139 13.8484 11.8727 13.4871L11.2832 8.45592C11.2421 8.06788 11.4614 7.76012 11.8316 7.76012H11.8316Z"
          strokeWidth="0"
        />
+     | BackArrow =>
+       <path
+         d="M10.9956 20L3 12L10.9956 4L13.3263 6.332L9.29034 10.3509H21V13.6491L9.29034 13.6491L13.3263 17.668L10.9956 20Z"
+         strokeWidth="0"
+       />
      }}
   </svg>;

frontend/wallet/src/render/components/Pill.re

@@ -18,7 +18,10 @@ module Styles = {
     ]);
 
   let grey =
-    merge([base, style([backgroundColor(Theme.Colors.slateAlpha(0.06))])]);
+    merge([
+      base,
+      style([backgroundColor(Theme.Colors.midnightAlpha(0.06))]),
+    ]);
 
   let green =
     merge([base, style([backgroundColor(Theme.Colors.serpentineLight)])]);