Merge pull request #2473 from bandprotocol/bottom-part-oracle-script-…

…index Scan: Implemented OWASM code tab for OC index page, improved some components
bandprotocol · Aug 13, 2020 · c3fc052 · c3fc052
2 parents 66aeef5 + 73fd022
commit c3fc052
Show file tree

Hide file tree

Showing 5 changed files with 205 additions and 36 deletions.
diff --git a/CHANGELOG_UNRELEASED.md b/CHANGELOG_UNRELEASED.md
@@ -18,6 +18,8 @@
 
 ### Scan
 
+ - (imprv) [\#2473](https://github.com/bandprotocol/bandchain/pull/2473) Implemented OWASM code tab for OC index page, improved some components
+
 ### Bridges
 
 ### Runtime

diff --git a/scan/src/components/buttons/CopyButton.re b/scan/src/components/buttons/CopyButton.re
@@ -48,7 +48,7 @@ module Code = {
         CssHelper.flexBox(~align=`center, ~justify=`center, ()),
       ])}
       onClick={_ => {
-        Copy.copy(data |> JsBuffer.toUTF8);
+        Copy.copy(data);
         setCopy(_ => true);
         let _ = Js.Global.setTimeout(() => setCopy(_ => false), 700);
         ();

diff --git a/scan/src/components/data-source/DataSourceCode.re b/scan/src/components/data-source/DataSourceCode.re
@@ -32,7 +32,12 @@ module Styles = {
       top(`px(30)),
       right(`px(30)),
       zIndex(9),
-      Media.mobile([right(`px(20))]),
+      Media.mobile([
+        position(`static),
+        display(`flex),
+        justifyContent(`flexEnd),
+        marginBottom(`px(8)),
+      ]),
     ]);
 };
 
@@ -45,13 +50,10 @@ let renderCode = content => {
 [@react.component]
 let make = (~executable) => {
   let code = executable |> JsBuffer.toUTF8;
-
   React.useMemo1(
     () =>
       <div className=Styles.tableLowerContainer>
-        <div className=Styles.copyContainer>
-          <CopyButton.Code data=executable title="Copy Code" />
-        </div>
+        <div className=Styles.copyContainer> <CopyButton.Code data=code title="Copy Code" /> </div>
         {code |> renderCode}
       </div>,
     [||],

diff --git a/scan/src/components/oracle-script/OracleScriptCode.re b/scan/src/components/oracle-script/OracleScriptCode.re
@@ -1,10 +1,10 @@
 module Styles = {
   open Css;
 
-  let tableLowerContainer = style([padding(`px(8))]);
-  let tableWrapper = style([padding2(~v=`px(20), ~h=`px(15))]);
+  let tableLowerContainer = style([position(`relative)]);
+  let tableWrapper =
+    style([padding(`px(24)), Media.mobile([padding2(~v=`px(20), ~h=`zero)])]);
   let codeImage = style([width(`px(20)), marginRight(`px(10))]);
-  let vFlex = style([display(`flex), flexDirection(`row), alignItems(`center)]);
 
   let scriptContainer =
     style([
@@ -24,6 +24,16 @@ module Styles = {
     ]);
 
   let padding = style([padding(`px(20))]);
+  let copyContainer =
+    style([
+      position(`absolute),
+      top(`px(10)),
+      right(`px(10)),
+      zIndex(9),
+      Media.mobile([right(`zero), top(`px(-38))]),
+    ]);
+  let infoIcon = style([width(`px(12)), height(`px(12)), display(`block)]);
+  let titleSpacing = style([marginBottom(`px(8))]);
 };
 
 let renderCode = content => {
@@ -38,32 +48,65 @@ let make = (~url: string) =>
     let%Opt code = CodeHook.getCode(url);
     Some(
       <div className=Styles.tableWrapper>
-        <>
-          <VSpacing size={`px(10)} />
-          <Row>
-            <HSpacing size={`px(15)} />
-            <Col>
-              <div> <Text value="Platform" /> </div>
-              <VSpacing size={`px(5)} />
-              <div> <Text value="OWASM v0.1" code=true weight=Text.Semibold /> </div>
-            </Col>
-            <HSpacing size={`px(370)} />
-            <Col>
-              <div> <Text value="Language" /> </div>
-              <VSpacing size={`px(5)} />
-              <div> <Text value="Rust 1.40.0" code=true weight=Text.Semibold /> </div>
-            </Col>
-          </Row>
-          <VSpacing size={`px(35)} />
-          <div className=Styles.tableLowerContainer>
-            <div className=Styles.vFlex>
+        <Row.Grid marginBottom=24>
+          <Col.Grid col=Col.Six colSm=Col.Six>
+            <div className={Css.merge([CssHelper.flexBox(), Styles.titleSpacing])}>
+              <Heading size=Heading.H5 value="Platform" />
+              <HSpacing size=Spacing.xs />
+              //TODO: remove mock message later
+              <CTooltip
+                tooltipPlacementSm=CTooltip.BottomLeft
+                tooltipText="Lorem ipsum, or lipsum as it is sometimes known.">
+                <img className=Styles.infoIcon src=Images.infoIcon />
+              </CTooltip>
+            </div>
+            <Text
+              value="OWASM v0.1"
+              weight=Text.Regular
+              size=Text.Lg
+              block=true
+              color=Colors.gray7
+            />
+          </Col.Grid>
+          <Col.Grid col=Col.Six colSm=Col.Six>
+            <div className={Css.merge([CssHelper.flexBox(), Styles.titleSpacing])}>
+              <Heading size=Heading.H5 value="Language" />
+              <HSpacing size=Spacing.xs />
+              //TODO: remove mock message later
+              <CTooltip tooltipText="Lorem ipsum, or lipsum as it is sometimes known.">
+                <img className=Styles.infoIcon src=Images.infoIcon />
+              </CTooltip>
+            </div>
+            <Text
+              value="Rust 1.40.0"
+              weight=Text.Regular
+              size=Text.Lg
+              block=true
+              color=Colors.gray7
+            />
+          </Col.Grid>
+        </Row.Grid>
+        <Row.Grid marginBottom=24 marginBottomSm=12>
+          <Col.Grid>
+            <div className={CssHelper.flexBox()}>
               <img src=Images.code className=Styles.codeImage />
-              <Text value="src/logic.rs" size=Text.Lg color=Colors.gray7 />
+              <HSpacing size=Spacing.xs />
+              <Text
+                value="src/logic.rs"
+                weight=Text.Semibold
+                size=Text.Lg
+                block=true
+                color=Colors.gray7
+              />
             </div>
-            <VSpacing size=Spacing.lg />
-            code->renderCode
+          </Col.Grid>
+        </Row.Grid>
+        <div className=Styles.tableLowerContainer>
+          <div className=Styles.copyContainer>
+            <CopyButton.Code data=code title="Copy Code" />
           </div>
-        </>
+          {code |> renderCode}
+        </div>
       </div>,
     );
   }

diff --git a/scan/src/reusable/CTooltip.re b/scan/src/reusable/CTooltip.re
@@ -2,7 +2,9 @@ type placement =
   | Left
   | Right
   | Top
-  | Bottom;
+  | Bottom
+  | BottomLeft
+  | BottomRight;
 
 module Styles = {
   open Css;
@@ -11,7 +13,9 @@ module Styles = {
       cursor(`pointer),
       position(`relative),
       display(`block),
-      hover([selector("> div:nth-child(1)", [opacity(1.), pointerEvents(`unset)])]),
+      hover([
+        selector("> div:nth-child(1)", [opacity(1.), zIndex(99), pointerEvents(`unset)]),
+      ]),
     ]);
   let tooltipItem = width_ =>
     style([
@@ -32,6 +36,7 @@ module Styles = {
         position(`absolute),
         border(`px(5), `solid, Colors.transparent),
       ]),
+      Media.mobile([padding(`px(12)), fontSize(`px(12))]),
     ]);
 
   let placement =
@@ -83,13 +88,130 @@ module Styles = {
           top(`px(-10)),
           borderBottomColor(Colors.gray7),
         ]),
+      ])
+    | BottomLeft =>
+      style([
+        top(`percent(100.)),
+        left(`percent(50.)),
+        transform(`translateX(`percent(-30.))),
+        before([
+          transform(`translateX(`percent(-50.))),
+          left(`percent(30.)),
+          top(`px(-10)),
+          borderBottomColor(Colors.gray7),
+        ]),
+      ])
+    | BottomRight =>
+      style([
+        top(`percent(100.)),
+        left(`percent(50.)),
+        transform(`translateX(`percent(-70.))),
+        before([
+          transform(`translateX(`percent(-70.))),
+          left(`percent(70.)),
+          top(`px(-10)),
+          borderBottomColor(Colors.gray7),
+        ]),
+      ]);
+
+  let placementSm =
+    fun
+    | Left =>
+      style([
+        Media.mobile([
+          top(`percent(50.)),
+          right(`percent(100.)),
+          transform(`translateY(`percent(-50.))),
+          before([
+            top(`percent(50.)),
+            transform(`translateY(`percent(-50.))),
+            right(`px(-10)),
+            borderLeftColor(Colors.gray7),
+          ]),
+        ]),
+      ])
+    | Right =>
+      style([
+        Media.mobile([
+          top(`percent(50.)),
+          left(`percent(100.)),
+          transform(`translateY(`percent(-50.))),
+          before([
+            top(`percent(50.)),
+            transform(`translateY(`percent(-50.))),
+            left(`px(-10)),
+            borderRightColor(Colors.gray7),
+          ]),
+        ]),
+      ])
+    | Top =>
+      style([
+        Media.mobile([
+          bottom(`percent(100.)),
+          left(`percent(50.)),
+          transform(`translateX(`percent(-50.))),
+          before([
+            transform(`translateX(`percent(-50.))),
+            left(`percent(50.)),
+            bottom(`px(-10)),
+            borderTopColor(Colors.gray7),
+          ]),
+        ]),
+      ])
+    | Bottom =>
+      style([
+        Media.mobile([
+          top(`percent(100.)),
+          left(`percent(50.)),
+          transform(`translateX(`percent(-50.))),
+          before([
+            transform(`translateX(`percent(-50.))),
+            left(`percent(50.)),
+            top(`px(-10)),
+            borderBottomColor(Colors.gray7),
+          ]),
+        ]),
+      ])
+    | BottomLeft =>
+      style([
+        Media.mobile([
+          top(`percent(100.)),
+          left(`percent(50.)),
+          transform(`translateX(`percent(-30.))),
+          before([
+            transform(`translateX(`percent(-50.))),
+            left(`percent(30.)),
+            top(`px(-10)),
+            borderBottomColor(Colors.gray7),
+          ]),
+        ]),
+      ])
+    | BottomRight =>
+      style([
+        Media.mobile([
+          top(`percent(100.)),
+          left(`percent(50.)),
+          transform(`translateX(`percent(-70.))),
+          before([
+            transform(`translateX(`percent(-50.))),
+            left(`percent(70.)),
+            top(`px(-10)),
+            borderBottomColor(Colors.gray7),
+          ]),
+        ]),
       ]);
 };
 
 [@react.component]
-let make = (~width=150, ~tooltipText="", ~tooltipPlacement=Bottom, ~children) => {
+let make =
+    (~width=150, ~tooltipText="", ~tooltipPlacement=Bottom, ~tooltipPlacementSm=Bottom, ~children) => {
   <div className=Styles.tooltipContainer>
-    <div className={Css.merge([Styles.tooltipItem(width), Styles.placement(tooltipPlacement)])}>
+    <div
+      className={Css.merge([
+        Styles.tooltipItem(width),
+        Styles.placement(tooltipPlacement),
+        Styles.placementSm(tooltipPlacementSm),
+      ])}>
       {tooltipText |> React.string}
     </div>
     children