Add transferm form component.

app/Types.tsx

@@ -3,3 +3,8 @@ export interface User {
   stellarAccount: string
   id: string
 }
+
+export interface Transaction {
+  id: string
+  memo?: string
+}

app/components/TransferForm.tsx

@@ -0,0 +1,74 @@
+import * as React from 'react';
+import { Alert } from 'react-native'
+import { Container, Content, Form, Item, Input, Label, Button, Text, Spinner } from 'native-base';
+import { styles as s } from "react-native-style-tachyons";
+
+import { Transaction } from '../Types'
+
+interface Props {
+  send: (amount: string) => Promise<Transaction>
+}
+
+interface State {
+  amount: string
+  sending: boolean
+}
+
+class TransferForm extends React.Component<Props, State> {
+  constructor(props: Props) {
+    super(props)
+
+    this.state = {
+      amount: '',
+      sending: false
+    }
+  }
+
+  async send(): Promise<Transaction> {
+    const { amount } = this.state
+
+    this.setState({
+      sending: true
+    })
+
+    const transaction = await this.props.send(amount)
+
+    this.setState({
+      sending: false
+    })
+
+    return transaction
+  }
+
+  render() {
+    const { amount, sending } = this.state
+
+    return (
+      <Container>
+        <Content scrollEnabled={false}>
+          <Form>
+            <Item floatingLabel>
+              <Label>Amount</Label>
+              <Input
+                onChangeText={(amount) => this.setState({ amount })}
+                value={amount}
+                keyboardType={'decimal-pad'}
+                autoFocus={true}
+                autoCorrect={false}
+                autoCapitalize={"none"}
+              />
+            </Item>
+            {!sending && (
+               <Button full style={[s.mt4]} onPress={() => this.send()}>
+                 <Text>Send</Text>
+               </Button>
+            )}
+            {sending && <Spinner color="blue" />}
+          </Form>
+        </Content>
+      </Container>
+    );
+  }
+}
+
+export default TransferForm

storybook/stories/Transfer/index.tsx

@@ -0,0 +1,30 @@
+import * as React from 'react';
+import { Alert } from 'react-native';
+import TransferForm from '../../../app/components/TransferForm';
+
+class TransferFormStory extends React.Component {
+  render() {
+    const transaction = {
+      id: '1234'
+    }
+
+    const send = (amount: string) => {
+      return new Promise((resolve) => {
+        Alert.alert(
+          `Sending ${amount} to or from your bank!`,
+          'This should call the mutation deposit or withdrawal',
+          [
+            {text: 'OK', onPress: () => resolve(transaction)},
+          ],
+          { cancelable: false }
+        )
+      })
+        }
+
+    return (
+      <TransferForm send={send} />
+    )
+  }
+}
+
+export default TransferFormStory

storybook/stories/index.js

@@ -10,6 +10,7 @@ import Loading from '../../app/components/Loading'
 import Login from './Login'
 import Balance from '../../app/containers/Balance'
 import Payment from './Payment'
+import Transfer from './Transfer'
 
 storiesOf('Welcome', module).add('to Storybook', () => <Welcome showApp={linkTo('Button')} />)
 
@@ -43,3 +44,6 @@ storiesOf('Payment', module)
   .add('to account +$10', () => {
     return (<Payment operation={'43381600641101825'} /> )
   })
+
+storiesOf('TransferForm', module).
+  add('default', () => <Transfer />)