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;
+}
+
+
({
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', () =>
)
.add('XLM', () =>
)
.add('Asset', () =>
)
+ .add('Prefilled XLM', () =>
)
.add('USD over warning', () =>
)
.add('XLM over warning', () =>
)
.add('asset type warning', () =>
)
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'