Merge pull request #1523 from bandprotocol/1492-make-address-copy-easily

Scan: refactor address render, add copy icon
bandprotocol · May 9, 2020 · 1b61857 · 1b61857
2 parents 0ea8acf + a3c35e2
commit 1b61857
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 51 deletions.
diff --git a/scan/src/pages/AccountIndexPage.re b/scan/src/pages/AccountIndexPage.re
@@ -147,7 +147,7 @@ let make = (~address, ~hashtag: Route.account_tab_t) =>
       </Row>
       <VSpacing size=Spacing.lg />
       <VSpacing size=Spacing.sm />
-      <div className=Styles.vFlex> <AddressRender address position=AddressRender.Title /> </div>
+      <div className=Styles.vFlex> <AddressRender address position=AddressRender.Title copy=true/> </div>
       <VSpacing size=Spacing.xxl />
       <Row justify=Row.Between alignItems=`flexStart>
         <Col size=0.75>

diff --git a/scan/src/reusable/AddressRender.re b/scan/src/reusable/AddressRender.re
@@ -8,34 +8,6 @@ type position =
   | Text(is_pointer)
   | Nav;
 
-let prefixFontSize =
-  fun
-  | Title => Text.Xxl
-  | Subtitle => Text.Lg
-  | Text(_) => Text.Md
-  | Nav => Text.Sm;
-
-let addressFontSize =
-  fun
-  | Title => Text.Xxl
-  | Subtitle => Text.Lg
-  | Text(_) => Text.Md
-  | Nav => Text.Sm;
-
-let lineHeight =
-  fun
-  | Title => Text.Px(24)
-  | Subtitle => Text.Px(18)
-  | Text(_) => Text.Px(16)
-  | Nav => Text.Px(14);
-
-let letterSpacing =
-  fun
-  | Title
-  | Text(_)
-  | Nav => Text.Unset
-  | Subtitle => Text.Em(0.02);
-
 module Styles = {
   open Css;
 
@@ -45,13 +17,29 @@ module Styles = {
     fun
     | Title
     | Subtitle
-    | Text(Pointer)
-    | Nav => style([pointerEvents(`auto)])
+    | Nav
+    | Text(Pointer) => style([pointerEvents(`auto)])
     | Text(NonPointer) => style([pointerEvents(`none)]);
+
+  let prefix = style([fontWeight(`num(600))]);
+
+  let font =
+    fun
+    | Title => style([fontSize(`px(18)), lineHeight(`px(24))])
+    | Subtitle => style([fontSize(`px(14)), lineHeight(`px(28)), letterSpacing(`em(0.02))])
+    | Text(_) => style([fontSize(`px(12)), lineHeight(`px(16))])
+    | Nav => style([fontSize(`px(10)), lineHeight(`px(14))]);
+
+  let base =
+    style([overflow(`hidden), textOverflow(`ellipsis), whiteSpace(`nowrap), display(`block)]);
+
+  let copy = style([width(`px(15)), marginLeft(`px(10)), cursor(`pointer)]);
 };
 
 [@react.component]
-let make = (~address, ~position=Text(Pointer), ~validator=false) => {
+let make = (~address, ~position=Text(Pointer), ~validator=false, ~copy=false) => {
+  let prefix = validator ? "bandvaloper" : "band";
+
   let noPrefixAddress =
     validator
       ? address |> Address.toOperatorBech32 |> Js.String.sliceToEnd(~from=11)
@@ -63,24 +51,20 @@ let make = (~address, ~position=Text(Pointer), ~validator=false) => {
       Styles.pointerEvents(validator ? Text(NonPointer) : position),
     ])}
     onClick={_ => Route.redirect(Route.AccountIndexPage(address, Route.AccountTransactions))}>
-    <Text
-      value={validator ? "bandvaloper" : "band"}
-      size={position |> prefixFontSize}
-      weight=Text.Semibold
-      code=true
-      spacing={position |> letterSpacing}
-      height={position |> lineHeight}
-    />
-    <Text
-      value=noPrefixAddress
-      size={position |> addressFontSize}
-      weight=Text.Regular
-      spacing={position |> letterSpacing}
-      code=true
-      nowrap=true
-      block=true
-      ellipsis=true
-      height={position |> lineHeight}
-    />
+    <span className={Css.merge([Styles.font(position), Styles.base, Text.Styles.code])}>
+      <span className=Styles.prefix> {prefix |> React.string} </span>
+      {noPrefixAddress |> React.string}
+    </span>
+    {copy
+       ? <img
+           src=Images.copy
+           className=Styles.copy
+           onClick={_ => {
+             validator
+               ? Copy.copy(address |> Address.toOperatorBech32)
+               : Copy.copy(address |> Address.toBech32)
+           }}
+         />
+       : React.null}
   </div>;
 };