Merge pull request #1158 from chainapsis/Heesung/KEPLR-353

[KEPLR-353, `Mobile`] Add information modal, terms of use on swap screen
chainapsis · Jul 12, 2024 · 14344ad · 14344ad
2 parents bf3d1cb + 1da78ed
commit 14344ad
Show file tree

Hide file tree

Showing 6 changed files with 89 additions and 4 deletions.
diff --git a/apps/mobile/src/config.ui.ts b/apps/mobile/src/config.ui.ts
@@ -2,6 +2,7 @@
 import {FiatCurrency} from '@keplr-wallet/types';
 
 export const HelpDeskUrl = 'https://help.keplr.app';
+export const TermsOfUseUrl = 'https://terms-of-use.keplr.app';
 
 export const CoinGeckoAPIEndPoint =
   process.env['KEPLR_EXT_COINGECKO_ENDPOINT'] ||

diff --git a/apps/mobile/src/languages/en.json b/apps/mobile/src/languages/en.json
@@ -377,12 +377,17 @@
   "page.ibc-swap.components.swap-asset-info.on-chain-name": "On {chainName}",
   "page.ibc-swap.components.swap-asset-info.modal.select-destination-chain.title": "Select Destination Chain",
   "page.ibc-swap.components.swap-asset-info.modal.search.placeholder": "Search for a chain",
+  "page.ibc-swap.components.swap-asset-info.quote-slippage-information-title": "About Quote and Slippage",
+  "page.ibc-swap.components.swap-asset-info.quote-slippage-information-paragraph": "The quotes shown is an estimate. Actual amounts may vary. Adjusting slippage can limit output price variation, but increases the chance of a swap failing.",
   "page.ibc-swap.components.swap-fee-info.button.transaction-fee": "Transaction Fee",
   "page.ibc-swap.components.swap-fee-info.button.service-fee": "Keplr Swap Fee",
   "page.ibc-swap.components.swap-fee-info.button.service-fee.paragraph": "Launch Event: Swap with 0% Keplr fee for the first month",
+  "page.ibc-swap.components.swap-fee-info.keplr-swap-fee-information.title": "Keplr Swap Fee",
+  "page.ibc-swap.components.swap-fee-info.keplr-swap-fee-information.paragraph": "Keplr fee of {swapFeePercent} is priced into the quote. The fee is split between Keplr and third-party liquidity infrastructure providers.",
   "page.ibc-swap.components.slippage-modal.title": "Slippage Settings",
   "page.ibc-swap.components.slippage-modal.label.slippage-tolerance": "Slippage Tolerance",
   "page.ibc-swap.components.slippage-modal.label.slippage-custom": "Custom Slippage",
+  "page.ibc-swap.button.terms-of-use.title": "Terms of Use",
 
   "page.activity.title": "Activity",
 

diff --git a/apps/mobile/src/languages/ko.json b/apps/mobile/src/languages/ko.json
@@ -374,12 +374,17 @@
   "page.ibc-swap.components.swap-asset-info.on-chain-name": "체인 {chainName}",
   "page.ibc-swap.components.swap-asset-info.modal.select-destination-chain.title": "받을 체인 선택하기",
   "page.ibc-swap.components.swap-asset-info.modal.search.placeholder": "체인 검색",
+  "page.ibc-swap.components.swap-asset-info.quote-slippage-information-title": "견적과 슬리피지 안내",
+  "page.ibc-swap.components.swap-asset-info.quote-slippage-information-paragraph": "해당 견적은 추산된 가격입니다. 실제로 받는 토큰의 양은 변동될 수 있으며, 슬리피지를 낮추면 가격 변동을 줄일 순 있으나 스왑이 실패할 확률이 높아집니다.",
   "page.ibc-swap.components.swap-fee-info.button.transaction-fee": "트랜잭션 수수료",
   "page.ibc-swap.components.swap-fee-info.button.service-fee": "케플러 수수료",
   "page.ibc-swap.components.swap-fee-info.button.service-fee.paragraph": "런칭 이벤트: 첫달동안 케플러 서비스 수수료 0%로 운영됩니다.",
+  "page.ibc-swap.components.swap-fee-info.keplr-swap-fee-information.title": "케플러 스왑 수수료",
+  "page.ibc-swap.components.swap-fee-info.keplr-swap-fee-information.paragraph": "이 견적에는 {swapFeePercent}의 스왑 수수료가 반영되어 있습니다. 이 수수료는 케플러 팀과 제 3자 유동성 인프라 제공자들에게 지급됩니다.",
   "page.ibc-swap.components.slippage-modal.title": "슬리피지 설정",
   "page.ibc-swap.components.slippage-modal.label.slippage-tolerance": "슬리피지 허용치",
   "page.ibc-swap.components.slippage-modal.label.slippage-custom": "커스텀 설정",
+  "page.ibc-swap.button.terms-of-use.title": "이용약관",
 
   "page.activity.title": "활동내역",
 

diff --git a/apps/mobile/src/screen/ibc-swap/components/swap-asset-info/index.tsx b/apps/mobile/src/screen/ibc-swap/components/swap-asset-info/index.tsx
@@ -3,7 +3,7 @@ import {observer} from 'mobx-react-lite';
 import {Box} from '../../../../components/box';
 import {StyleSheet, Text, TextInput, View} from 'react-native';
 import {useStyle} from '../../../../styles';
-import {FormattedMessage} from 'react-intl';
+import {FormattedMessage, useIntl} from 'react-intl';
 import {XAxis} from '../../../../components/axis';
 import {TouchableWithoutFeedback} from 'react-native-gesture-handler';
 import {Gutter} from '../../../../components/gutter';
@@ -23,6 +23,8 @@ import Svg, {Path} from 'react-native-svg';
 import {IconProps} from '../../../../components/icon/types.ts';
 import {VerticalCollapseTransition} from '../../../../components/transition';
 import {SelectDestinationChainModal} from '../select-destination-chain-modal';
+import {InformationOutlinedIcon} from '../../../../components/icon/information-outlined.tsx';
+import {InformationModal} from '../../../../components/modal/infoModal.tsx';
 
 export const SwapAssetInfo: FunctionComponent<{
   type: 'from' | 'to';
@@ -35,6 +37,7 @@ export const SwapAssetInfo: FunctionComponent<{
   ) => void;
 }> = observer(
   ({type, senderConfig, amountConfig, onDestinationChainSelect}) => {
+    const intl = useIntl();
     const style = useStyle();
     const navigation = useNavigation<StackNavProp>();
     const route = useRoute<RouteProp<RootStackParamList, 'Swap'>>();
@@ -78,6 +81,7 @@ export const SwapAssetInfo: FunctionComponent<{
 
     const [isSelectDestinationModalOpen, setIsSelectDestinationModalOpen] =
       useState(false);
+    const [isInfoModalOpen, setIsInfoModalOpen] = useState(false);
 
     return (
       <Box
@@ -96,6 +100,20 @@ export const SwapAssetInfo: FunctionComponent<{
               )}
             </Text>
 
+            {type === 'to' ? (
+              <TouchableWithoutFeedback
+                style={{paddingLeft: 4}}
+                hitSlop={{top: 4, bottom: 4, left: 4, right: 4}}
+                onPress={() => {
+                  setIsInfoModalOpen(true);
+                }}>
+                <InformationOutlinedIcon
+                  size={20}
+                  color={style.get('color-gray-300').color}
+                />
+              </TouchableWithoutFeedback>
+            ) : null}
+
             <Gutter size={4} />
 
             {(() => {
@@ -491,6 +509,17 @@ export const SwapAssetInfo: FunctionComponent<{
             })
           }
         />
+
+        <InformationModal
+          isOpen={isInfoModalOpen}
+          setIsOpen={setIsInfoModalOpen}
+          title={intl.formatMessage({
+            id: 'page.ibc-swap.components.swap-asset-info.quote-slippage-information-title',
+          })}
+          paragraph={intl.formatMessage({
+            id: 'page.ibc-swap.components.swap-asset-info.quote-slippage-information-paragraph',
+          })}
+        />
       </Box>
     );
   },

diff --git a/apps/mobile/src/screen/ibc-swap/components/swap-fee-info/index.tsx b/apps/mobile/src/screen/ibc-swap/components/swap-fee-info/index.tsx
@@ -20,6 +20,8 @@ import {IBCSwapAmountConfig} from '@keplr-wallet/hooks-internal';
 import {TransactionFeeModal} from '../../../../components/input/fee-control/transaction-fee-modal.tsx';
 import {TouchableWithoutFeedback} from 'react-native-gesture-handler';
 import {SVGLoadingIcon} from '../../../../components/spinner';
+import {InformationOutlinedIcon} from '../../../../components/icon/information-outlined.tsx';
+import {InformationModal} from '../../../../components/modal/infoModal.tsx';
 
 export const SwapFeeInfo: FunctionComponent<{
   senderConfig: ISenderConfig;
@@ -33,6 +35,7 @@ export const SwapFeeInfo: FunctionComponent<{
     const style = useStyle();
 
     const [isModalOpen, setIsModalOpen] = useState(false);
+    const [isInfoModalOpen, setIsInfoModalOpen] = useState(false);
 
     const {uiConfigStore, queriesStore, chainStore, priceStore} = useStore();
 
@@ -327,6 +330,18 @@ export const SwapFeeInfo: FunctionComponent<{
               <FormattedMessage id="page.ibc-swap.components.swap-fee-info.button.service-fee" />
             </Text>
 
+            <TouchableWithoutFeedback
+              style={{paddingLeft: 4}}
+              hitSlop={{top: 4, bottom: 4, left: 4, right: 4}}
+              onPress={() => {
+                setIsInfoModalOpen(true);
+              }}>
+              <InformationOutlinedIcon
+                size={20}
+                color={style.get('color-gray-300').color}
+              />
+            </TouchableWithoutFeedback>
+
             {amountConfig.isFetching ? (
               <React.Fragment>
                 <Gutter size={4} />
@@ -373,6 +388,22 @@ export const SwapFeeInfo: FunctionComponent<{
           gasConfig={gasConfig}
           gasSimulator={gasSimulator}
         />
+
+        <InformationModal
+          isOpen={isInfoModalOpen}
+          setIsOpen={setIsInfoModalOpen}
+          title={intl.formatMessage({
+            id: 'page.ibc-swap.components.swap-fee-info.keplr-swap-fee-information.title',
+          })}
+          paragraph={intl.formatMessage(
+            {
+              id: 'page.ibc-swap.components.swap-fee-info.keplr-swap-fee-information.paragraph',
+            },
+            {
+              swapFeePercent: `${amountConfig.swapFeeBps / 100}%`,
+            },
+          )}
+        />
       </React.Fragment>
     );
   },

diff --git a/apps/mobile/src/screen/ibc-swap/index.tsx b/apps/mobile/src/screen/ibc-swap/index.tsx
@@ -2,8 +2,8 @@ import React, {FunctionComponent, useEffect, useState} from 'react';
 import {observer} from 'mobx-react-lite';
 import {PageWithScrollView} from '../../components/page';
 import {useStyle} from '../../styles';
-import {XAxis} from '../../components/axis';
-import {Text} from 'react-native';
+import {XAxis, YAxis} from '../../components/axis';
+import {Linking, Text} from 'react-native';
 import {FormattedMessage, useIntl} from 'react-intl';
 import {SettingIcon} from '../../components/icon';
 import {IconButton} from '../../components/icon-button';
@@ -20,7 +20,7 @@ import {RootStackParamList, StackNavProp} from '../../navigation.tsx';
 import {SlippageModal} from './components/slippage-modal';
 import {useIBCSwapConfig} from '@keplr-wallet/hooks-internal';
 import {useStore} from '../../stores';
-import {SwapFeeBps} from '../../config.ui.ts';
+import {SwapFeeBps, TermsOfUseUrl} from '../../config.ui.ts';
 import {useGasSimulator, useTxConfigsValidate} from '@keplr-wallet/hooks';
 import {AsyncKVStore} from '../../common';
 import {autorun} from 'mobx';
@@ -913,6 +913,20 @@ export const IBCSwapScreen: FunctionComponent = observer(() => {
         }}
       />
 
+      <Gutter size={12} />
+
+      <YAxis alignX="center">
+        <TouchableWithoutFeedback
+          style={{paddingVertical: 8, paddingHorizontal: 16}}
+          onPress={() => {
+            Linking.openURL(TermsOfUseUrl);
+          }}>
+          <Text style={style.flatten(['text-button1', 'color-gray-300'])}>
+            <FormattedMessage id="page.ibc-swap.button.terms-of-use.title" />
+          </Text>
+        </TouchableWithoutFeedback>
+      </YAxis>
+
       <SlippageModal
         // uiConfigStore.ibcSwapConfig.slippageIsValid에 대해서도 확인한다.
         // 왜냐하면 uiConfigStore.ibcSwapConfig.slippageIsValid의 값은 autorun으로 저장되는데