Skip to content

Commit

Permalink
memos ui
Browse files Browse the repository at this point in the history
  • Loading branch information
@banklesss
banklesss committed Feb 6, 2023
1 parent b630fec commit 807ef72
Show file tree
Hide file tree
Showing 6 changed files with 63 additions and 55 deletions.
15 changes: 15 additions & 0 deletions src/Send/Context/SendContext.tsx
View file
Expand Up @@ -8,12 +8,14 @@ type SendState = {
receiver: string
amount: string
sendAll: boolean
memo: string
}

type SendActions = {
receiverChanged: (receiver: SendState['receiver']) => void
amountChanged: (amount: SendState['amount']) => void
tokenSelected: (tokenId: SendState['tokenId']) => void
memoChanged: (memo: SendState['memo']) => void
sendAllChanged: () => void
allTokensSelected: () => void
resetForm: () => void
Expand All @@ -38,6 +40,7 @@ export const SendProvider = ({
receiverChanged: (receiver) => dispatch({type: 'receiverChanged', receiver}),
amountChanged: (amount) => dispatch({type: 'amountChanged', amount}),
tokenSelected: (tokenId) => dispatch({type: 'tokenSelected', tokenId}),
memoChanged: (memo) => dispatch({type: 'memoChanged', memo}),
sendAllChanged: () => dispatch({type: 'sendAllChanged'}),
allTokensSelected: () => dispatch({type: 'allTokensSelected', primaryTokenId: wallet.primaryTokenInfo.id}),
resetForm: () => dispatch({type: 'resetForm', primaryTokenId: wallet.primaryTokenInfo.id}),
Expand All @@ -57,6 +60,10 @@ type SendAction =
type: 'amountChanged'
amount: string
}
| {
type: 'memoChanged'
memo: SendState['memo']
}
| {
type: 'sendAllChanged'
}
Expand Down Expand Up @@ -107,6 +114,13 @@ const sendReducer = (state: SendState, action: SendAction) => {
tokenId: action.primaryTokenId,
}

case 'memoChanged':
return {
...state,
sendAll: true,
memo: action.memo,
}

case 'resetForm':
return initialState(action.primaryTokenId)

Expand All @@ -127,4 +141,5 @@ const initialState = (primaryTokenId: TokenId) => ({
receiver: '',
amount: '',
sendAll: false,
memo: '',
})
21 changes: 12 additions & 9 deletions src/Send/MemoField.tsx
View file
Expand Up @@ -4,32 +4,32 @@ import {StyleSheet, Text, View} from 'react-native'

import {TextInput} from '../components'
import {COLORS} from '../theme'
import {useSend} from './Context/SendContext'

const maxMemoValue = 256

export const MemoField = () => {
const [memo, setMemo] = React.useState('')
const strings = useStrings()
const {memo, memoChanged} = useSend()

const showError = memo.length > maxMemoValue

return (
<View style={styles.container}>
<TextInput
value={memo}
onChangeText={setMemo}
onChangeText={(memo) => memoChanged(memo.trim())}
label={strings.label}
autoComplete={false}
testID="memoFieldInput"
errorText="xckckck"
errorText={showError ? 'error' : undefined}
noErrors={true}
/>

<View style={styles.helper}>
<Text style={[styles.warning, {color: memo.trim().length > 5 ? COLORS.ERROR_TEXT_COLOR : undefined}]}>
{strings.warning}
</Text>
<Text style={[styles.warning, showError && styles.error]}>{strings.warning}</Text>

<Text
style={[styles.counter, {color: memo.trim().length > 5 ? COLORS.ERROR_TEXT_COLOR : undefined}]}
>{`/${maxMemoValue}`}</Text>
<Text style={[styles.counter, showError && styles.error]}>{`${memo.length}/${maxMemoValue}`}</Text>
</View>
</View>
)
Expand Down Expand Up @@ -71,4 +71,7 @@ const styles = StyleSheet.create({
color: COLORS.TEXT_INPUT,
fontSize: 12,
},
error: {
color: COLORS.ERROR_TEXT_COLOR,
},
})
56 changes: 13 additions & 43 deletions src/TxHistory/TxDetails/TxDetails.stories.tsx
View file
Expand Up @@ -5,46 +5,16 @@ import {mocks, QueryProvider, RouteProvider} from '../../../storybook'
import {SelectedWalletProvider} from '../../SelectedWallet'
import {TxDetails} from './TxDetails'

storiesOf('TxDetails', module)
.add('loading', () => (
<QueryProvider>
<RouteProvider params={{id: mocks.txid}}>
<SelectedWalletProvider
wallet={{
...mocks.wallet,
getTransactions: mocks.getTransactions.loading,
}}
>
<TxDetails />
</SelectedWalletProvider>
</RouteProvider>
</QueryProvider>
))
.add('error', () => (
<QueryProvider>
<RouteProvider params={{id: mocks.txid}}>
<SelectedWalletProvider
wallet={{
...mocks.wallet,
getTransactions: mocks.getTransactions.error,
}}
>
<TxDetails />
</SelectedWalletProvider>
</RouteProvider>
</QueryProvider>
))
.add('success', () => (
<QueryProvider>
<RouteProvider params={{id: mocks.txid}}>
<SelectedWalletProvider
wallet={{
...mocks.wallet,
getTransactions: mocks.getTransactions.success,
}}
>
<TxDetails />
</SelectedWalletProvider>
</RouteProvider>
</QueryProvider>
))
storiesOf('TxDetails', module).add('Default', () => (
<QueryProvider>
<RouteProvider params={{id: mocks.txid}}>
<SelectedWalletProvider
wallet={{
...mocks.wallet,
}}
>
<TxDetails />
</SelectedWalletProvider>
</RouteProvider>
</QueryProvider>
))
16 changes: 14 additions & 2 deletions src/TxHistory/TxDetails/TxDetails.tsx
View file
Expand Up @@ -8,7 +8,7 @@ import {LayoutAnimation, Linking, StyleSheet, TouchableOpacity, View, ViewProps}
import {ScrollView} from 'react-native-gesture-handler'

import {Banner, Boundary, Button, CopyButton, FadeIn, Icon, StatusBar, Text} from '../../components'
import {useTipStatus, useTransactionInfo} from '../../hooks'
import {useTipStatus, useTransactionInfos} from '../../hooks'
import globalMessages from '../../i18n/global-messages'
import {formatDateToSeconds, formatTokenWithSymbol} from '../../legacy/format'
import {getNetworkConfigById} from '../../legacy/networks'
Expand All @@ -31,7 +31,8 @@ export const TxDetails = () => {
const [expandedInItemId, setExpandedInItemId] = useState<null | ItemId>(null)
const [expandedOutItemId, setExpandedOutItemId] = useState<null | ItemId>(null)
const [addressDetail, setAddressDetail] = React.useState<null | string>(null)
const transaction = useTransactionInfo({wallet, txid: id})
const transactions = useTransactionInfos(wallet)
const transaction = transactions[id]

useTitle(formatDateToSeconds(transaction.submittedAt))

Expand Down Expand Up @@ -68,6 +69,12 @@ export const TxDetails = () => {
</Boundary>
</Banner>

<View style={styles.borderTop}>
<Label>{strings.memo}</Label>
</View>

<Text style={styles.assetsTitle}>{transaction.memo}</Text>

<Label>{strings.fromAddresses}</Label>

{fromFiltered.map((item) => (
Expand Down Expand Up @@ -313,6 +320,7 @@ const useStrings = () => {
fee: intl.formatMessage(messages.fee),
fromAddresses: intl.formatMessage(messages.fromAddresses),
toAddresses: intl.formatMessage(messages.toAddresses),
memo: intl.formatMessage(messages.memo),
transactionId: intl.formatMessage(messages.transactionId),
txAssuranceLevel: intl.formatMessage(messages.txAssuranceLevel),
confirmations: (cnt) => intl.formatMessage(messages.confirmations, {cnt}),
Expand Down Expand Up @@ -370,6 +378,10 @@ const messages = defineMessages({
id: 'components.txhistory.txdetails.toAddresses',
defaultMessage: '!!!To Addresses',
},
memo: {
id: 'components.txhistory.txdetails.memo',
defaultMessage: '!!!Memo',
},
transactionId: {
id: 'components.txhistory.txdetails.transactionId',
defaultMessage: '!!!Transaction ID',
Expand Down
7 changes: 6 additions & 1 deletion src/components/ConfirmTx/ConfirmTx.tsx
View file
Expand Up @@ -14,6 +14,7 @@ import {WrongPassword} from '../../legacy/errors'
import {DeviceId, DeviceObj} from '../../legacy/ledgerUtils'
import {isEmptyString} from '../../legacy/utils'
import {useSelectedWallet} from '../../SelectedWallet'
import {useSend} from '../../Send/Context/SendContext'
import {COLORS} from '../../theme'
import {CardanoTypes, walletManager, withBLE, withUSB} from '../../yoroi-wallets'
import {YoroiUnsignedTx} from '../../yoroi-wallets/types'
Expand Down Expand Up @@ -59,6 +60,7 @@ export const ConfirmTx = ({
const wallet = useSelectedWallet()

const {mutateAsync: submitTx} = useSubmitTx({wallet})
const {memo} = useSend()

const [password, setPassword] = useState('')
const [isProcessing, setIsProcessing] = useState(false)
Expand Down Expand Up @@ -158,6 +160,9 @@ export const ConfirmTx = ({
await smoothModalNotification(submitTx(signedTx))
setDialogStep(DialogStep.Closed)
onSuccess(signedTx)
if (memo.length > 0) {
await wallet.saveMemo(signedTx.signedTx.id, memo)
}
} catch (err) {
if (err instanceof LocalizableError) {
showError({
Expand Down Expand Up @@ -191,7 +196,7 @@ export const ConfirmTx = ({
setIsProcessing(false)
}
},
[onError, onSuccess, password, strings, submitTx, useUSB, wallet, yoroiUnsignedTx],
[memo, onError, onSuccess, password, strings, submitTx, useUSB, wallet, yoroiUnsignedTx],
)

const {authWithOs} = useAuthOsWithEasyConfirmation({id: wallet.id}, {onSuccess: onConfirm})
Expand Down
3 changes: 3 additions & 0 deletions src/i18n/locales/en-US.json
View file
Expand Up @@ -107,6 +107,8 @@
"components.send.assetselectorscreen.unknownAsset": "Unknown Asset",
"components.send.addressreaderqr.title": "Scan QR code address",
"components.send.amountfield.label": "Amount",
"components.send.memofield.label": "Memo",
"components.send.memofield.warning": "(Optional) Memo is stored locally",
"components.send.biometricauthscreen.DECRYPTION_FAILED": "Biometrics login failed. Please use an alternate login method.",
"components.send.biometricauthscreen.NOT_RECOGNIZED": "Biometrics were not recognized. Try again",
"components.send.biometricauthscreen.SENSOR_LOCKOUT": "Too many failed attempts. The sensor is now disabled",
Expand Down Expand Up @@ -263,6 +265,7 @@
"components.txhistory.txdetails.fromAddresses": "From Addresses",
"components.txhistory.txdetails.omittedCount": "+ {cnt} omitted {cnt, plural, one {address} other {addresses}}",
"components.txhistory.txdetails.toAddresses": "To Addresses",
"components.txhistory.txdetails.memo": "Memo",
"components.txhistory.txdetails.transactionId": "Transaction ID",
"components.txhistory.txdetails.txAssuranceLevel": "Transaction assurance level",
"components.txhistory.txdetails.txTypeMulti": "Multi-party transaction",
Expand Down

0 comments on commit 807ef72

Please sign in to comment.