diff --git a/app/Types.tsx b/app/Types.tsx index b3db384..7a43b74 100644 --- a/app/Types.tsx +++ b/app/Types.tsx @@ -3,3 +3,8 @@ export interface User { stellarAccount: string id: string } + +export interface Transaction { + id: string + memo?: string +} diff --git a/app/components/TransferForm.tsx b/app/components/TransferForm.tsx new file mode 100644 index 0000000..ea31ad2 --- /dev/null +++ b/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 +} + +interface State { + amount: string + sending: boolean +} + +class TransferForm extends React.Component { + constructor(props: Props) { + super(props) + + this.state = { + amount: '', + sending: false + } + } + + async send(): Promise { + 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 ( + + +
+ + + this.setState({ amount })} + value={amount} + keyboardType={'decimal-pad'} + autoFocus={true} + autoCorrect={false} + autoCapitalize={"none"} + /> + + {!sending && ( + + )} + {sending && } + +
+
+ ); + } +} + +export default TransferForm diff --git a/storybook/stories/Transfer/index.tsx b/storybook/stories/Transfer/index.tsx new file mode 100644 index 0000000..a7481ab --- /dev/null +++ b/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 ( + + ) + } +} + +export default TransferFormStory diff --git a/storybook/stories/index.js b/storybook/stories/index.js index cce91e2..765d69a 100644 --- a/storybook/stories/index.js +++ b/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', () => ) @@ -43,3 +44,6 @@ storiesOf('Payment', module) .add('to account +$10', () => { return ( ) }) + +storiesOf('TransferForm', module). + add('default', () => )