Skip to content

Commit

Permalink
fix(mobile): About risk explanation
Browse files Browse the repository at this point in the history
  • Loading branch information
voloshinskii committed Apr 17, 2024
1 parent 063a165 commit 2543a86
Show file tree
Hide file tree
Showing 4 changed files with 126 additions and 13 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ import {
isAndroid,
Icon,
ListItemContent,
TouchableOpacity,
} from '@tonkeeper/uikit';
import { push } from '$navigation/imperative';
import { SheetActions, useNavigation } from '@tonkeeper/router';
Expand Down Expand Up @@ -54,6 +55,7 @@ import { TokenDetailsParams } from '../../../../components/TokenDetails/TokenDet
import { ModalStackRouteNames } from '$navigation';
import { CanceledActionError } from '$core/Send/steps/ConfirmStep/ActionErrors';
import { emulateBoc, sendBoc } from '@tonkeeper/shared/utils/blockchain';
import { openAboutRiskAmountModal } from '@tonkeeper/shared/modals/AboutRiskAmountModal';

interface SignRawModalProps {
consequences?: MessageConsequences;
Expand Down Expand Up @@ -224,6 +226,21 @@ export const SignRawModal = memo<SignRawModalProps>((props) => {
}
}, [consequences, wallet]);

const totalAmountTitle = useMemo(() => {
if (totalRiskedAmount) {
return (
t('confirmSendModal.total_risk', {
totalAmount: formatter.format(totalRiskedAmount.totalFiat, {
currency: fiatCurrency,
}),
}) +
(consequences?.risk.nfts.length > 0
? ` + ${consequences?.risk.nfts.length} NFT`
: '')
);
}
}, [consequences?.risk.nfts.length, fiatCurrency, totalRiskedAmount]);

return (
<Modal>
<Modal.Header
Expand Down Expand Up @@ -300,19 +317,29 @@ export const SignRawModal = memo<SignRawModalProps>((props) => {
ref={footerRef}
/>
{totalRiskedAmount ? (
<Text
color={totalRiskedAmount.isDangerous ? 'accentOrange' : 'textSecondary'}
type="body2"
textAlign="center"
>
{t('confirmSendModal.total_risk', {
totalAmount: formatter.format(totalRiskedAmount.totalFiat, {
currency: fiatCurrency,
}),
})}
{consequences?.risk.nfts.length > 0 &&
` + ${consequences?.risk.nfts.length} NFT`}
</Text>
<>
<View style={styles.totalAmountContainer}>
<Text
color={totalRiskedAmount.isDangerous ? 'accentOrange' : 'textSecondary'}
type="body2"
textAlign="center"
>
{totalAmountTitle}
</Text>
<TouchableOpacity
hitSlop={{ top: 8, right: 8, bottom: 8, left: 8 }}
onPress={() =>
openAboutRiskAmountModal(
totalAmountTitle!,
consequences?.risk.nfts.length > 0,
)
}
>
<Icon color="iconTertiary" name={'ic-information-circle-16'} />
</TouchableOpacity>
</View>
<Spacer y={16} />
</>
) : null}
</Modal.Footer>
</Modal>
Expand Down Expand Up @@ -444,4 +471,10 @@ const styles = Steezy.create(({ colors }) => ({
fontSize: isAndroid ? 17 : 20,
marginTop: isAndroid ? -1 : 1,
},
totalAmountContainer: {
gap: 4,
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
},
}));
5 changes: 5 additions & 0 deletions packages/shared/i18n/locales/tonkeeper/en.json
Original file line number Diff line number Diff line change
Expand Up @@ -1215,5 +1215,10 @@
"backup_button": "Back up",
"logout_button": "Sign Out",
"delete_button": "Delete Wallet Data"
},
"about_risk_modal": {
"description": "The total value of tokens that will be sent from your wallet. Refunds are not included in the total value.",
"description_with_nft": "The total value of tokens, excluding the cost of NFTs, that will be sent from your wallet. Refunds are not included in the total value.",
"ok_button": "OK"
}
}
5 changes: 5 additions & 0 deletions packages/shared/i18n/locales/tonkeeper/ru-RU.json
Original file line number Diff line number Diff line change
Expand Up @@ -1279,5 +1279,10 @@
"backup_button": "Сделать резервную копию",
"logout_button": "Выйти",
"delete_button": "Удалить данные кошелька"
},
"about_risk_modal": {
"description": "Общая стоимость токенов, которые будут отправлены с вашего кошелька. Возвраты не учитываются в общей стоимости.",
"description_with_nft": "Общая стоимость токенов, за исключением стоимости NFT, которые будут отправлены с вашего кошелька. Возвраты не учитываются в общей стоимости.",
"ok_button": "Понятно"
}
}
70 changes: 70 additions & 0 deletions packages/shared/modals/AboutRiskAmountModal.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,70 @@
import React, { memo } from 'react';
import { Button, Modal, Spacer, Text, View } from '@tonkeeper/uikit';
import { Steezy } from '@tonkeeper/uikit';
import { navigation, SheetActions, useNavigation } from '@tonkeeper/router';
import { t } from '@tonkeeper/shared/i18n';

export interface AboutRiskAmountModalProps {
title: string;
withNft?: boolean;
}

export const AboutRiskAmountModal = memo<AboutRiskAmountModalProps>((props) => {
const nav = useNavigation();
return (
<Modal>
<Modal.Header />
<Modal.Content>
<View style={styles.wrap}>
<Text textAlign="center" type="h2">
{props.title}
</Text>
<Spacer y={4} />
<Text textAlign="center" color="textSecondary" type="body1">
{t(
props.withNft
? 'about_risk_modal.description_with_nft'
: 'about_risk_modal.description',
)}
</Text>
</View>
<Spacer y={32} />
</Modal.Content>
<Modal.Footer>
<View style={styles.buttonContainer}>
<Button onPress={nav.goBack} size="large" title={'OK'} color="secondary" />
</View>
<Spacer y={16} />
</Modal.Footer>
</Modal>
);
});

export function openAboutRiskAmountModal(title: string, withNft?: boolean) {
return navigation.push('SheetsProvider', {
$$action: SheetActions.ADD,
component: AboutRiskAmountModal,
params: { title, withNft },
path: 'AboutRiskAmountModal',
});
}

const styles = Steezy.create({
wrap: {
alignItems: 'center',
paddingHorizontal: 32,
textAlign: 'center',
paddingTop: 48,
},
footerWrap: {
paddingHorizontal: 16,
},
checkboxWithLabel: {
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
},
buttonContainer: {
paddingHorizontal: 16,
},
});

0 comments on commit 2543a86

Please sign in to comment.