From a6b4b169d0e64d42bb1864ffc9c40388cd77efb5 Mon Sep 17 00:00:00 2001
From: Daniel Ayoub <danny.a95@gmail.com>
Date: Mon, 17 Sep 2018 14:19:21 -0400
Subject: [PATCH] hook up buildingPayment.amount to send for asset input, add
 story, and update storyshots

---
 .../__snapshots__/Storyshots.test.js.snap     | 669 ++++++++++++++++++
 .../send-form/asset-input/container.js        |   1 +
 shared/wallets/send-form/asset-input/index.js |   2 +
 .../send-form/asset-input/index.stories.js    |  13 +-
 shared/wallets/send-form/index.stories.js     |   2 +-
 5 files changed, 685 insertions(+), 2 deletions(-)

diff --git a/shared/stories/__tests__/__snapshots__/Storyshots.test.js.snap b/shared/stories/__tests__/__snapshots__/Storyshots.test.js.snap
index 17f2cfe27acf..d30ab865c142 100644
--- a/shared/stories/__tests__/__snapshots__/Storyshots.test.js.snap
+++ b/shared/stories/__tests__/__snapshots__/Storyshots.test.js.snap
@@ -63134,6 +63134,427 @@ Array [
 ]
 `;
 
+exports[`Storyshots Common Controlled input playground 1`] = `
+Array [
+  .css-0,
+[data-css-0] {
+  font-size: 13px;
+  line-height: 17px;
+  color: rgba(0, 0, 0, 0.75);
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+  font-family: OpenSans;
+  font-weight: 400;
+}
+
+.css-1,
+[data-css-1] {
+  font-size: 14px;
+  line-height: 18px;
+  color: rgba(0, 0, 0, 0.75);
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+  font-family: OpenSans;
+  font-weight: 600;
+  text-align: center;
+  white-space: pre;
+}
+
+<div
+    style={
+      Object {
+        "height": "100%",
+        "width": "100%",
+      }
+    }
+  >
+    <div
+      style={
+        Object {
+          "alignItems": "stretch",
+          "display": "flex",
+          "flexDirection": "column",
+          "justifyContent": "flex-start",
+          "padding": 16,
+          "width": "100%",
+        }
+      }
+    >
+      <span
+        className="css-0"
+      >
+        Basic controlled inputs
+      </span>
+      <div
+        style={
+          Object {
+            "flexShrink": 0,
+            "height": 16,
+          }
+        }
+      />
+      <style>
+        ::-webkit-input-placeholder { color: rgba(0, 0, 0, 0.40); }
+                 ::-webkit-outer-spin-button, ::-webkit-inner-spin-button {-webkit-appearance: none; margin: 0;}
+      </style>
+      <input
+        onBlur={[Function]}
+        onChange={[Function]}
+        onClick={[Function]}
+        onCompositionEnd={[Function]}
+        onCompositionStart={[Function]}
+        onFocus={[Function]}
+        onKeyDown={[Function]}
+        onKeyUp={[Function]}
+        placeholder="type=\\"text\\""
+        style={
+          Object {
+            "WebkitFontSmoothing": "antialiased",
+            "borderColor": "rgba(0, 0, 0, 0.10)",
+            "borderStyle": "solid",
+            "borderWidth": 1,
+            "color": "rgba(0, 0, 0, 0.75)",
+            "fontFamily": "OpenSans",
+            "fontSize": 13,
+            "fontWeight": 400,
+            "lineHeight": "unset",
+            "outline": "none",
+            "textRendering": "optimizeLegibility",
+          }
+        }
+        value=""
+      />
+      <div
+        style={
+          Object {
+            "flexShrink": 0,
+            "height": 16,
+          }
+        }
+      />
+      <style>
+        ::-webkit-input-placeholder { color: rgba(0, 0, 0, 0.40); }
+                 ::-webkit-outer-spin-button, ::-webkit-inner-spin-button {-webkit-appearance: none; margin: 0;}
+      </style>
+      <input
+        onBlur={[Function]}
+        onChange={[Function]}
+        onClick={[Function]}
+        onCompositionEnd={[Function]}
+        onCompositionStart={[Function]}
+        onFocus={[Function]}
+        onKeyDown={[Function]}
+        onKeyUp={[Function]}
+        placeholder="type=\\"password\\""
+        style={
+          Object {
+            "WebkitFontSmoothing": "antialiased",
+            "borderColor": "rgba(0, 0, 0, 0.10)",
+            "borderStyle": "solid",
+            "borderWidth": 1,
+            "color": "rgba(0, 0, 0, 0.75)",
+            "fontFamily": "OpenSans",
+            "fontSize": 13,
+            "fontWeight": 400,
+            "lineHeight": "unset",
+            "outline": "none",
+            "textRendering": "optimizeLegibility",
+          }
+        }
+        type="password"
+        value=""
+      />
+      <div
+        style={
+          Object {
+            "flexShrink": 0,
+            "height": 16,
+          }
+        }
+      />
+      <style>
+        ::-webkit-input-placeholder { color: rgba(0, 0, 0, 0.40); }
+                 ::-webkit-outer-spin-button, ::-webkit-inner-spin-button {-webkit-appearance: none; margin: 0;}
+      </style>
+      <input
+        onBlur={[Function]}
+        onChange={[Function]}
+        onClick={[Function]}
+        onCompositionEnd={[Function]}
+        onCompositionStart={[Function]}
+        onFocus={[Function]}
+        onKeyDown={[Function]}
+        onKeyUp={[Function]}
+        placeholder="type=\\"number\\" (desktop only)"
+        style={
+          Object {
+            "WebkitFontSmoothing": "antialiased",
+            "borderColor": "rgba(0, 0, 0, 0.10)",
+            "borderStyle": "solid",
+            "borderWidth": 1,
+            "color": "rgba(0, 0, 0, 0.75)",
+            "fontFamily": "OpenSans",
+            "fontSize": 13,
+            "fontWeight": 400,
+            "lineHeight": "unset",
+            "outline": "none",
+            "textRendering": "optimizeLegibility",
+          }
+        }
+        type="number"
+        value=""
+      />
+      <div
+        style={
+          Object {
+            "flexShrink": 0,
+            "height": 16,
+          }
+        }
+      />
+      <div
+        style={
+          Object {
+            "alignItems": "stretch",
+            "display": "flex",
+            "flexDirection": "column",
+            "justifyContent": "flex-start",
+            "width": "100%",
+          }
+        }
+      >
+        <span
+          className="css-0"
+        >
+          Live mutations
+        </span>
+        <div
+          style={
+            Object {
+              "flexShrink": 0,
+              "height": 16,
+            }
+          }
+        />
+        <style>
+          ::-webkit-input-placeholder { color: rgba(0, 0, 0, 0.40); }
+                 ::-webkit-outer-spin-button, ::-webkit-inner-spin-button {-webkit-appearance: none; margin: 0;}
+        </style>
+        <input
+          onBlur={[Function]}
+          onChange={[Function]}
+          onClick={[Function]}
+          onCompositionEnd={[Function]}
+          onCompositionStart={[Function]}
+          onFocus={[Function]}
+          onKeyDown={[Function]}
+          onKeyUp={[Function]}
+          style={
+            Object {
+              "WebkitFontSmoothing": "antialiased",
+              "borderColor": "rgba(0, 0, 0, 0.10)",
+              "borderStyle": "solid",
+              "borderWidth": 1,
+              "color": "rgba(0, 0, 0, 0.75)",
+              "fontFamily": "OpenSans",
+              "fontSize": 13,
+              "fontWeight": 400,
+              "lineHeight": "unset",
+              "outline": "none",
+              "textRendering": "optimizeLegibility",
+            }
+          }
+          value=""
+        />
+        <div
+          style={
+            Object {
+              "flexShrink": 0,
+              "height": 16,
+            }
+          }
+        />
+        <div
+          style={
+            Object {
+              "alignItems": "center",
+              "display": "flex",
+              "flexDirection": "row",
+              "justifyContent": "center",
+              "minHeight": 64,
+              "width": "100%",
+            }
+          }
+        >
+          <div
+            onClick={[Function]}
+            onMouseDown={[Function]}
+            onMouseUp={[Function]}
+            style={
+              Object {
+                "alignItems": "center",
+                "alignSelf": "center",
+                "backgroundColor": "#e6e6e6",
+                "borderRadius": 50,
+                "cursor": "pointer",
+                "display": "inline-block",
+                "flexDirection": "column",
+                "height": 32,
+                "justifyContent": "center",
+                "lineHeight": "inherit",
+                "minWidth": undefined,
+                "paddingLeft": 24,
+                "paddingRight": 24,
+                "position": "relative",
+                "textAlign": "left",
+                "transform": "none",
+                "transition": "none",
+              }
+            }
+          >
+            <div
+              style={
+                Object {
+                  "alignItems": "center",
+                  "display": "flex",
+                  "flexDirection": "row",
+                  "height": "100%",
+                  "justifyContent": "center",
+                  "position": "relative",
+                }
+              }
+            >
+              <span
+                className="css-1"
+              >
+                Set value
+              </span>
+            </div>
+          </div>
+          <div
+            style={
+              Object {
+                "height": 8,
+                "width": 8,
+              }
+            }
+          />
+          <div
+            onClick={[Function]}
+            onMouseDown={[Function]}
+            onMouseUp={[Function]}
+            style={
+              Object {
+                "alignItems": "center",
+                "alignSelf": "center",
+                "backgroundColor": "#e6e6e6",
+                "borderRadius": 50,
+                "cursor": "pointer",
+                "display": "inline-block",
+                "flexDirection": "column",
+                "height": 32,
+                "justifyContent": "center",
+                "lineHeight": "inherit",
+                "minWidth": undefined,
+                "paddingLeft": 24,
+                "paddingRight": 24,
+                "position": "relative",
+                "textAlign": "left",
+                "transform": "none",
+                "transition": "none",
+              }
+            }
+          >
+            <div
+              style={
+                Object {
+                  "alignItems": "center",
+                  "display": "flex",
+                  "flexDirection": "row",
+                  "height": "100%",
+                  "justifyContent": "center",
+                  "position": "relative",
+                }
+              }
+            >
+              <span
+                className="css-1"
+              >
+                Set selection
+              </span>
+            </div>
+          </div>
+          <div
+            style={
+              Object {
+                "height": 8,
+                "width": 8,
+              }
+            }
+          />
+          <div
+            onClick={[Function]}
+            onMouseDown={[Function]}
+            onMouseUp={[Function]}
+            style={
+              Object {
+                "alignItems": "center",
+                "alignSelf": "center",
+                "backgroundColor": "#e6e6e6",
+                "borderRadius": 50,
+                "cursor": "pointer",
+                "display": "inline-block",
+                "flexDirection": "column",
+                "height": 32,
+                "justifyContent": "center",
+                "lineHeight": "inherit",
+                "minWidth": undefined,
+                "paddingLeft": 24,
+                "paddingRight": 24,
+                "position": "relative",
+                "textAlign": "left",
+                "transform": "none",
+                "transition": "none",
+              }
+            }
+          >
+            <div
+              style={
+                Object {
+                  "alignItems": "center",
+                  "display": "flex",
+                  "flexDirection": "row",
+                  "height": "100%",
+                  "justifyContent": "center",
+                  "position": "relative",
+                }
+              }
+            >
+              <span
+                className="css-1"
+              >
+                Run test
+              </span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      id="modal-root"
+    />
+  </div>,
+  <div
+    pointerEvents="box-none"
+    style={
+      Object {
+        "position": "absolute",
+      }
+    }
+  />,
+]
+`;
+
 exports[`Storyshots Common Dropdown 1`] = `
 Array [
   .css-0,
@@ -218829,6 +219250,7 @@ Array [
                 "width": "100%",
               }
             }
+            value=""
           />
           <div
             style={
@@ -219160,6 +219582,7 @@ Array [
                 "width": "100%",
               }
             }
+            value=""
           />
           <div
             style={
@@ -220316,6 +220739,7 @@ Array [
                 "width": "100%",
               }
             }
+            value=""
           />
           <div
             style={
@@ -221811,6 +222235,7 @@ Array [
                 "width": "100%",
               }
             }
+            value=""
           />
           <div
             style={
@@ -223306,6 +223731,7 @@ Array [
                 "width": "100%",
               }
             }
+            value=""
           />
           <div
             style={
@@ -224003,6 +224429,7 @@ Array [
                 "width": "100%",
               }
             }
+            value=""
           />
           <div
             style={
@@ -225228,6 +225655,7 @@ Array [
                 "width": "100%",
               }
             }
+            value=""
           />
           <div
             style={
@@ -226812,6 +227240,7 @@ Array [
                 "width": "100%",
               }
             }
+            value=""
           />
           <div
             style={
@@ -228231,6 +228660,7 @@ Array [
                 "width": "100%",
               }
             }
+            value=""
           />
           <div
             style={
@@ -229902,6 +230332,7 @@ Array [
                 "width": "100%",
               }
             }
+            value=""
           />
           <div
             style={
@@ -234924,6 +235355,7 @@ Array [
                 "width": "100%",
               }
             }
+            value=""
           />
         </div>
         <div
@@ -235258,6 +235690,7 @@ Array [
                 "width": "100%",
               }
             }
+            value=""
           />
         </div>
         <div
@@ -332165,6 +332598,7 @@ input.lighterPlaceholder::placeholder {
                       }
                     }
                     type="number"
+                    value="3.4289000"
                   />
                   <div
                     style={
@@ -333213,6 +333647,7 @@ input.lighterPlaceholder::placeholder {
                       }
                     }
                     type="number"
+                    value="3.4289000"
                   />
                   <div
                     style={
@@ -333798,6 +334233,7 @@ Array [
               }
             }
             type="number"
+            value=""
           />
           <div
             style={
@@ -333896,6 +334332,234 @@ Array [
 ]
 `;
 
+exports[`Storyshots Wallets/SendForm/Asset input Prefilled XLM 1`] = `
+Array [
+  .css-0,
+[data-css-0] {
+  font-size: 24px;
+  line-height: 28px;
+  color: #845cdb;
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+  font-family: OpenSans;
+  font-weight: 800;
+}
+
+.css-1,
+[data-css-1] {
+  font-size: 12px;
+  line-height: 16px;
+  color: #4C8EFF;
+  cursor: pointer;
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+  font-family: OpenSans;
+  font-weight: 400;
+}
+
+.css-2,
+[data-css-2] {
+  font-size: 12px;
+  line-height: 16px;
+  color: rgba(0, 0, 0, 0.40);
+  user-select: text;
+  cursor: text;
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+  font-family: OpenSans;
+  font-weight: 400;
+  margin-left: 1px;
+  -webkit-user-select: text;
+  -moz-user-select: text;
+  -ms-user-select: text;
+}
+
+.css-3,
+[data-css-3] {
+  color: rgba(0, 0, 0, 0.40);
+}
+
+.css-3:hover,
+[data-css-3]:hover {
+  color: rgba(0, 0, 0, 0.75);
+}
+
+<div
+    style={
+      Object {
+        "height": "100%",
+        "width": "100%",
+      }
+    }
+  >
+    <div
+      style={
+        Object {
+          "maxWidth": 500,
+          "padding": 20,
+        }
+      }
+    >
+      <div
+        style={
+          Object {
+            "alignItems": "flex-start",
+            "display": "flex",
+            "flexDirection": "column",
+            "justifyContent": "flex-start",
+            "width": "100%",
+          }
+        }
+      >
+        <div
+          style={
+            Object {
+              "alignItems": "center",
+              "alignSelf": "center",
+              "borderColor": "rgba(0, 0, 0, 0.10)",
+              "borderRadius": 4,
+              "borderStyle": "solid",
+              "borderWidth": 0,
+              "display": "flex",
+              "flexDirection": "row",
+              "justifyContent": "flex-start",
+              "margin": 0,
+              "padding": 4,
+              "width": "100%",
+            }
+          }
+        >
+          <style>
+            ::-webkit-input-placeholder { color: rgba(132, 92, 219, 0.4); }
+                 ::-webkit-outer-spin-button, ::-webkit-inner-spin-button {-webkit-appearance: none; margin: 0;}
+          </style>
+          <input
+            onBlur={[Function]}
+            onChange={[Function]}
+            onCompositionEnd={[Function]}
+            onCompositionStart={[Function]}
+            onFocus={[Function]}
+            onKeyDown={[Function]}
+            onKeyUp={[Function]}
+            placeholder="0.0000000"
+            style={
+              Object {
+                "WebkitFontSmoothing": "antialiased",
+                "borderWidth": 0,
+                "color": "#845cdb",
+                "flex": 1,
+                "fontFamily": "OpenSans",
+                "fontSize": 24,
+                "fontWeight": 800,
+                "lineHeight": "unset",
+                "minWidth": 0,
+                "outline": "none",
+                "position": "relative",
+                "textRendering": "optimizeLegibility",
+                "top": -8,
+                "width": "100%",
+              }
+            }
+            type="number"
+            value="3.4289000"
+          />
+          <div
+            style={
+              Object {
+                "alignItems": "flex-end",
+                "alignSelf": "center",
+                "display": "flex",
+                "flexDirection": "column",
+                "justifyContent": "flex-start",
+              }
+            }
+          >
+            <span
+              className="css-0"
+            >
+              XLM
+            </span>
+            <span
+              className="css-1 hover-underline"
+              onClick={[Function]}
+            >
+              Change
+            </span>
+          </div>
+        </div>
+        <div
+          style={
+            Object {
+              "flexShrink": 0,
+              "height": 4,
+            }
+          }
+        />
+        <div
+          style={
+            Object {
+              "alignItems": "stretch",
+              "display": "flex",
+              "flexDirection": "row",
+              "justifyContent": "flex-start",
+              "width": "100%",
+            }
+          }
+        >
+          <span
+            className="css-2"
+          >
+            1 XLM = $0.2303
+          </span>
+          <div
+            style={
+              Object {
+                "flexShrink": 0,
+                "width": 4,
+              }
+            }
+          />
+          <div>
+            <span
+              className="css-3"
+              onClick={[Function]}
+              style={
+                Object {
+                  "WebkitFontSmoothing": "antialiased",
+                  "cursor": "pointer",
+                  "fontFamily": "kb",
+                  "fontSize": 12,
+                  "fontStyle": "normal",
+                  "fontVariant": "normal",
+                  "fontWeight": "normal",
+                  "lineHeight": 1,
+                  "speak": "none",
+                  "textTransform": "none",
+                  "userSelect": "none",
+                }
+              }
+            >
+              
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      id="modal-root"
+    />
+  </div>,
+  <div
+    pointerEvents="box-none"
+    style={
+      Object {
+        "position": "absolute",
+      }
+    }
+  />,
+]
+`;
+
 exports[`Storyshots Wallets/SendForm/Asset input USD over warning 1`] = `
 Array [
   .css-0,
@@ -334078,6 +334742,7 @@ Array [
               }
             }
             type="number"
+            value=""
           />
           <div
             style={
@@ -334331,6 +334996,7 @@ Array [
               }
             }
             type="number"
+            value=""
           />
           <div
             style={
@@ -334586,6 +335252,7 @@ Array [
               }
             }
             type="number"
+            value=""
           />
           <div
             style={
@@ -334864,6 +335531,7 @@ Array [
               }
             }
             type="number"
+            value=""
           />
           <div
             style={
@@ -335119,6 +335787,7 @@ Array [
               }
             }
             type="number"
+            value=""
           />
           <div
             style={
diff --git a/shared/wallets/send-form/asset-input/container.js b/shared/wallets/send-form/asset-input/container.js
index cf95c2e40cfc..82d078dd95bd 100644
--- a/shared/wallets/send-form/asset-input/container.js
+++ b/shared/wallets/send-form/asset-input/container.js
@@ -8,6 +8,7 @@ const mapStateToProps = (state: TypedState) => ({
   inputPlaceholder: '0.00',
   bottomLabel: '', // TODO
   topLabel: '', // TODO
+  value: state.wallets.buildingPayment.amount,
 })
 
 const mapDispatchToProps = (dispatch: Dispatch) => ({
diff --git a/shared/wallets/send-form/asset-input/index.js b/shared/wallets/send-form/asset-input/index.js
index fe34263d6a2a..b31688b3b6bb 100644
--- a/shared/wallets/send-form/asset-input/index.js
+++ b/shared/wallets/send-form/asset-input/index.js
@@ -11,6 +11,7 @@ type Props = {|
   onChangeDisplayUnit: () => void,
   onClickInfo: () => void,
   topLabel: string,
+  value: string,
   warningAsset?: string,
   warningPayee?: string,
 |}
@@ -41,6 +42,7 @@ const AssetInput = (props: Props) => (
       placeholder={props.inputPlaceholder}
       placeholderColor={Styles.globalColors.purple2_40}
       error={!!props.warningAsset}
+      value={props.value}
     />
     {props.warningAsset &&
       !props.warningPayee && (
diff --git a/shared/wallets/send-form/asset-input/index.stories.js b/shared/wallets/send-form/asset-input/index.stories.js
index ba2dcca506b6..aab9a70d9982 100644
--- a/shared/wallets/send-form/asset-input/index.stories.js
+++ b/shared/wallets/send-form/asset-input/index.stories.js
@@ -9,6 +9,7 @@ const common = {
   onChangeDisplayUnit: action('onChangeDisplayUnit'),
   onClickInfo: action('onClickInfo'),
   topLabel: '',
+  value: '',
 }
 
 const props1 = {
@@ -26,13 +27,22 @@ const props2 = {
   inputPlaceholder: '0.0000000',
 }
 
-export const props3 = {
+const props3 = {
   ...common,
   bottomLabel: '1 XLM = $0.2303',
   displayUnit: 'XLM',
   inputPlaceholder: '0.0000000',
 }
 
+// Exported for use in main send form story
+export const props4 = {
+  ...common,
+  bottomLabel: '1 XLM = $0.2303',
+  displayUnit: 'XLM',
+  inputPlaceholder: '0.0000000',
+  value: '3.4289000',
+}
+
 const warning1 = {
   warningAsset: '$13',
 }
@@ -52,6 +62,7 @@ const load = () => {
     .add('XLM worth USD', () => <AssetInput {...props1} />)
     .add('XLM', () => <AssetInput {...props3} />)
     .add('Asset', () => <AssetInput {...props2} />)
+    .add('Prefilled XLM', () => <AssetInput {...props4} />)
     .add('USD over warning', () => <AssetInput {...props1} {...warning1} />)
     .add('XLM over warning', () => <AssetInput {...props2} {...warning2} />)
     .add('asset type warning', () => <AssetInput {...props3} {...warning3} />)
diff --git a/shared/wallets/send-form/index.stories.js b/shared/wallets/send-form/index.stories.js
index 7e1863871492..447fc340488a 100644
--- a/shared/wallets/send-form/index.stories.js
+++ b/shared/wallets/send-form/index.stories.js
@@ -1,7 +1,7 @@
 // @flow
 import * as React from 'react'
 import * as Sb from '../../stories/storybook'
-import assetInput, {props3 as assetInputProps} from './asset-input/index.stories'
+import assetInput, {props4 as assetInputProps} from './asset-input/index.stories'
 import chooseAsset from './choose-asset/index.stories'
 import footers from './footer/index.stories'
 import noteAndMemo from './note-and-memo/index.stories'