chore: Swap/copy updates (#2790)

Co-authored-by: Michal <[email protected]>
Emurgo · Oct 18, 2023 · 69d83f6 · 69d83f6
1 parent ae3ac43
commit 69d83f6
Show file tree

Hide file tree

Showing 8 changed files with 469 additions and 388 deletions.
diff --git a/...llet-mobile/src/features/Swap/common/SelectPool/SelectPoolFromList/SelectPoolFromList.tsx b/...llet-mobile/src/features/Swap/common/SelectPool/SelectPoolFromList/SelectPoolFromList.tsx
@@ -99,29 +99,29 @@ export const SelectPoolFromList = ({pools = []}: Props) => {
                       <Spacer height={8} />
 
                       <View style={styles.info}>
-                        <Text style={styles.infoLabel}>{`${strings.tvl}, ${ticker}`}</Text>
+                        <Text style={styles.infoLabel}>{strings.tvl}</Text>
 
-                        <Text style={styles.infoValue}>{formattedTvl}</Text>
+                        <Text style={styles.infoValue}>{`${formattedTvl} ${ticker}`}</Text>
                       </View>
                     </View>
 
                     <View>
                       <Spacer height={8} />
 
                       <View style={styles.info}>
-                        <Text style={styles.infoLabel}>{strings.poolFee}, %</Text>
+                        <Text style={styles.infoLabel}>{strings.poolFee}</Text>
 
-                        <Text style={styles.infoValue}>{pool.fee}%</Text>
+                        <Text style={styles.infoValue}>{`${formattedBatcherFeeInPt} ${ticker}`}</Text>
                       </View>
                     </View>
 
                     <View>
                       <Spacer height={8} />
 
                       <View style={styles.info}>
-                        <Text style={styles.infoLabel}>{`${strings.batcherFee}, ${ticker}`}</Text>
+                        <Text style={styles.infoLabel}>{strings.swapLiquidityFee}</Text>
 
-                        <Text style={styles.infoValue}>{formattedBatcherFeeInPt}</Text>
+                        <Text style={styles.infoValue}>{pool.fee} %</Text>
                       </View>
                     </View>
                   </View>

diff --git a/apps/wallet-mobile/src/features/Swap/common/SwapInfoLink/SwapInfoLink.tsx b/apps/wallet-mobile/src/features/Swap/common/SwapInfoLink/SwapInfoLink.tsx
@@ -0,0 +1,27 @@
+import React from 'react'
+import {Linking, StyleSheet, Text, TouchableOpacity} from 'react-native'
+
+import {useStrings} from '../strings'
+
+export const SwapInfoLink = () => {
+  const strings = useStrings()
+  return (
+    // TODO: add real link
+    <TouchableOpacity onPress={() => Linking.openURL('https://yoroi-wallet.com/#/')} style={styles.link}>
+      <Text style={styles.linkText}>{strings.listOrdersSheetLink}</Text>
+    </TouchableOpacity>
+  )
+}
+
+const styles = StyleSheet.create({
+  link: {
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  linkText: {
+    color: '#4B6DDE',
+    fontSize: 16,
+    textDecorationLine: 'underline',
+    lineHeight: 22,
+  },
+})
diff --git a/apps/wallet-mobile/src/features/Swap/common/strings.ts b/apps/wallet-mobile/src/features/Swap/common/strings.ts
@@ -34,7 +34,9 @@ export const useStrings = () => {
     swapMinReceived: intl.formatMessage(messages.swapMinReceived),
     swapMinReceivedTitle: intl.formatMessage(messages.swapMinReceivedTitle),
     swapFeesTitle: intl.formatMessage(messages.swapFeesTitle),
-    swapLiquidityFee: (fee: string) => intl.formatMessage(messages.swapLiquidityFee, {fee}),
+    swapLiquidityFee: intl.formatMessage(messages.swapLiquidityFee),
+    swapLiqProvFee: intl.formatMessage(messages.swapLiqProvFee),
+    swapLiquidityFeeInfo: (fee: string) => intl.formatMessage(messages.swapLiquidityFeeInfo, {fee}),
     swapFees: intl.formatMessage(messages.swapFees),
     poolVerification: (pool: string) => intl.formatMessage(messages.poolVerification, {pool}),
     poolVerificationInfo: (pool: string) => intl.formatMessage(messages.poolVerificationInfo, {pool}),
@@ -81,6 +83,7 @@ export const useStrings = () => {
     listOrdersSheetConfirm: intl.formatMessage(messages.listOrdersSheetConfirm),
     listOrdersSheetBack: intl.formatMessage(messages.listOrdersSheetBack),
     listOrdersTimeCreated: intl.formatMessage(messages.listOrdersTimeCreated),
+    listOrdersTimeCompleted: intl.formatMessage(messages.listOrdersTimeCompleted),
     listOrdersLiquidityPool: intl.formatMessage(messages.listOrdersLiquidityPool),
     listOrdersTotal: intl.formatMessage(messages.listOrdersTotal),
     listOrdersTxId: intl.formatMessage(messages.listOrdersTxId),
@@ -217,7 +220,7 @@ export const messages = defineMessages({
   },
   changePool: {
     id: 'swap.swapScreen.changePool',
-    defaultMessage: '!!!change pool',
+    defaultMessage: '!!!change dex',
   },
   swapMinAda: {
     id: 'swap.swapScreen.swapMinAda',
@@ -238,7 +241,16 @@ export const messages = defineMessages({
   },
   swapLiquidityFee: {
     id: 'swap.swapScreen.swapLiquidityFee',
-    defaultMessage: `!!!Liquidity provider fee ({fee}%)`,
+    defaultMessage: '!!!Liquidity provider fee',
+  },
+  swapLiqProvFee: {
+    id: 'swap.swapScreen.swapLiqProvFee',
+    defaultMessage: '!!!Liq. prov. fee',
+  },
+  swapLiquidityFeeInfo: {
+    id: 'swap.swapScreen.swapLiquidityFeeInfo',
+    defaultMessage:
+      '!!!Liquidity provider fee is a fixed {fee}% operational fee from the whole transaction volume, that is taken to support DEX “liquidity” allowing traders to buy and sell assets on the decentralized Cardano network.',
   },
   swapMinReceived: {
     id: 'swap.swapScreen.swapMinReceived',
@@ -439,6 +451,10 @@ export const messages = defineMessages({
     id: 'swap.listOrders.timeCreated',
     defaultMessage: '!!!Time Created',
   },
+  listOrdersTimeCompleted: {
+    id: 'swap.listOrders.timeCompleted',
+    defaultMessage: '!!!Time Completed',
+  },
   listOrdersTxId: {
     id: 'swap.listOrders.txId',
     defaultMessage: '!!!Transaction ID',

diff --git a/...obile/src/features/Swap/useCases/StartSwapScreen/CreateOrder/EditPool/ShowPoolActions.tsx b/...obile/src/features/Swap/useCases/StartSwapScreen/CreateOrder/EditPool/ShowPoolActions.tsx
@@ -18,6 +18,7 @@ import {useNavigateTo} from '../../../../common/navigation'
 import {PoolIcon} from '../../../../common/PoolIcon/PoolIcon'
 import {useStrings} from '../../../../common/strings'
 import {useSwapTouched} from '../../../../common/SwapFormProvider'
+import {SwapInfoLink} from '../../../../common/SwapInfoLink/SwapInfoLink'
 
 export const ShowPoolActions = () => {
   const navigateTo = useNavigateTo()
@@ -155,8 +156,10 @@ const HiddenInfo = ({
           info: strings.swapMinReceived,
         },
         {
-          label: strings.swapLiquidityFee(liquidityFee),
+          label: strings.swapLiqProvFee,
+          title: strings.swapLiquidityFee,
           value: `${liquidityFeeValue} ${sellTokenName}`,
+          info: strings.swapLiquidityFeeInfo(liquidityFee),
         },
       ].map((item) => (
         <HiddenInfoWrapper
@@ -167,7 +170,7 @@ const HiddenInfo = ({
           onPress={() => {
             setBottomSheetSate({
               isOpen: true,
-              title: item.label,
+              title: item.title ?? item.label,
               content: item.info,
             })
           }}
@@ -181,7 +184,11 @@ const HiddenInfo = ({
           setBottomSheetSate({isOpen: false, title: '', content: ''})
         }}
       >
-        <Text style={styles.text}>{bottomSheetState.content}</Text>
+        <View style={styles.modalContent}>
+          <Text style={styles.text}>{bottomSheetState.content}</Text>
+
+          <SwapInfoLink />
+        </View>
       </BottomSheetModal>
     </View>
   )
@@ -197,6 +204,11 @@ const styles = StyleSheet.create({
     fontWeight: '400',
     color: '#242838',
   },
+  modalContent: {
+    flex: 1,
+    justifyContent: 'space-between',
+    paddingBottom: 24,
+  },
   change: {color: COLORS.SHELLEY_BLUE, fontWeight: '600', textTransform: 'uppercase'},
   bold: {
     color: COLORS.BLACK,

diff --git a/apps/wallet-mobile/src/features/Swap/useCases/StartSwapScreen/ListOrders/CompletedOrders.tsx b/apps/wallet-mobile/src/features/Swap/useCases/StartSwapScreen/ListOrders/CompletedOrders.tsx
@@ -56,7 +56,11 @@ const findCompletedOrderTx = (transactions: TransactionInfo[]): MappedRawOrder[]
       const result: TxMetadataInfo = {}
       receivedTransactions.forEach((receivedTx) => {
         receivedTx.inputs.forEach((input) => {
-          if (Boolean(input.id) && input?.id?.slice(0, -1) === sentTx?.id && receivedTx.metadata?.['674'] !== null) {
+          if (
+            Boolean(input.id) &&
+            input?.id?.slice(0, -1) === sentTx?.id &&
+            receivedTx.metadata?.['674'] !== undefined
+          ) {
             result['id'] = sentTx?.id
             result['date'] = receivedTx?.lastUpdatedAt
             const metadata = parseOrderTxMetadata(sentTx?.metadata?.['674'])
@@ -163,7 +167,11 @@ export const ExpandableOrder = ({order}: {order: MappedRawOrder}) => {
         tokenPrice={marketPrice}
         sellLabel={sellLabel}
         tokenAmount={`${sellQuantity} ${sellLabel}`}
-        txTimeCreated={intl.formatDate(new Date(order.date), {dateStyle: 'short', timeStyle: 'short'})}
+        txTimeCreated={intl.formatDate(new Date(order.date), {
+          dateStyle: 'short',
+          timeStyle: 'medium',
+          hour12: false,
+        })}
       />
     </ExpandableInfoCard>
   )
@@ -256,14 +264,15 @@ const MainInfo = ({
   txTimeCreated: string
 }) => {
   const strings = useStrings()
+  const orderInfo = [
+    {label: strings.listOrdersSheetAssetPrice, value: `${tokenPrice} ${sellLabel}`},
+    {label: strings.listOrdersSheetAssetAmount, value: tokenAmount},
+    {label: strings.listOrdersTimeCompleted, value: txTimeCreated},
+  ]
   return (
     <View>
-      {[
-        {label: strings.listOrdersSheetAssetPrice, value: `${tokenPrice} ${sellLabel}`},
-        {label: strings.listOrdersSheetAssetAmount, value: tokenAmount},
-        {label: strings.listOrdersTimeCreated, value: txTimeCreated},
-      ].map((item, index) => (
-        <MainInfoWrapper key={index} label={item.label} value={item.value} isLast={index === 2} />
+      {orderInfo.map((item, index) => (
+        <MainInfoWrapper key={index} label={item.label} value={item.value} isLast={index === orderInfo.length - 1} />
       ))}
     </View>
   )

diff --git a/apps/wallet-mobile/src/features/Swap/useCases/StartSwapScreen/ListOrders/OpenOrders.tsx b/apps/wallet-mobile/src/features/Swap/useCases/StartSwapScreen/ListOrders/OpenOrders.tsx
@@ -38,6 +38,7 @@ import {Counter} from '../../../common/Counter/Counter'
 import {LiquidityPool} from '../../../common/LiquidityPool/LiquidityPool'
 import {PoolIcon} from '../../../common/PoolIcon/PoolIcon'
 import {useStrings} from '../../../common/strings'
+import {SwapInfoLink} from '../../../common/SwapInfoLink/SwapInfoLink'
 import {getCancellationOrderFee} from './helpers'
 import {mapOpenOrders, MappedOpenOrder} from './mapOrders'
 
@@ -269,7 +270,6 @@ export const OpenOrders = () => {
                     txId={order.txId}
                     total={`${order.total} ${order.assetFromLabel}`}
                     txLink={order.txLink}
-                    date={intl.formatDate(new Date(order.date), {dateStyle: 'short', timeStyle: 'short'})}
                     liquidityPoolIcon={liquidityPoolIcon}
                     liquidityPoolName={order.provider ?? ''}
                     poolUrl={order.poolUrl ?? ''}
@@ -299,6 +299,11 @@ export const OpenOrders = () => {
                 <MainInfo
                   tokenAmount={`${order.tokenAmount} ${order.assetToLabel}`}
                   tokenPrice={`${order.tokenPrice} ${order.assetFromLabel}`}
+                  date={intl.formatDate(new Date(order.date), {
+                    dateStyle: 'short',
+                    timeStyle: 'medium',
+                    hour12: false,
+                  })}
                 />
               </ExpandableInfoCard>
             )
@@ -361,15 +366,13 @@ const HiddenInfo = ({
   liquidityPoolIcon,
   liquidityPoolName,
   poolUrl,
-  date,
   txId,
   txLink,
 }: {
   total: string
   liquidityPoolIcon: React.ReactNode
   liquidityPoolName: string
   poolUrl: string
-  date: string
   txId: string
   txLink: string
 }) => {
@@ -392,10 +395,7 @@ const HiddenInfo = ({
             />
           ),
         },
-        {
-          label: strings.listOrdersTimeCreated,
-          value: date,
-        },
+
         {
           label: strings.listOrdersTxId,
           value: <TxLink txId={shortenedTxId} txLink={txLink} />,
@@ -407,15 +407,20 @@ const HiddenInfo = ({
   )
 }
 
-const MainInfo = ({tokenPrice, tokenAmount}: {tokenPrice: string; tokenAmount: string}) => {
+const MainInfo = ({tokenPrice, tokenAmount, date}: {tokenPrice: string; tokenAmount: string; date: string}) => {
   const strings = useStrings()
+  const orderInfo = [
+    {label: strings.listOrdersSheetAssetPrice, value: tokenPrice},
+    {label: strings.listOrdersSheetAssetAmount, value: tokenAmount},
+    {
+      label: strings.listOrdersTimeCreated,
+      value: date,
+    },
+  ]
   return (
     <View>
-      {[
-        {label: strings.listOrdersSheetAssetPrice, value: tokenPrice},
-        {label: strings.listOrdersSheetAssetAmount, value: tokenAmount},
-      ].map((item, index) => (
-        <MainInfoWrapper key={index} label={item.label} value={item.value} isLast={index === 1} />
+      {orderInfo.map((item, index) => (
+        <MainInfoWrapper key={index} label={item.label} value={item.value} isLast={index === orderInfo.length - 1} />
       ))}
     </View>
   )
@@ -499,7 +504,7 @@ const ModalContent = ({
 
       <Spacer height={10} />
 
-      <ModalContentLink />
+      <SwapInfoLink />
 
       <Spacer fill />
 
@@ -565,16 +570,6 @@ const ModalContentRow = ({label, value}: {label: string; value: string}) => {
   )
 }
 
-const ModalContentLink = () => {
-  const strings = useStrings()
-  return (
-    // TODO: add real link
-    <TouchableOpacity onPress={() => Linking.openURL('https://google.com')} style={styles.link}>
-      <Text style={styles.linkText}>{strings.listOrdersSheetLink}</Text>
-    </TouchableOpacity>
-  )
-}
-
 const ModalContentButtons = ({onBack, onConfirm}: {onBack: () => void; onConfirm: () => void}) => {
   const strings = useStrings()
   return (
@@ -644,17 +639,6 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     alignItems: 'center',
   },
-  link: {
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  linkText: {
-    color: '#4B6DDE',
-    fontFamily: 'Rubik-Medium',
-    fontSize: 16,
-    fontWeight: '500',
-    lineHeight: 22,
-  },
   buttons: {
     flexDirection: 'row',
     justifyContent: 'space-between',

diff --git a/apps/wallet-mobile/src/i18n/locales/en-US.json b/apps/wallet-mobile/src/i18n/locales/en-US.json
@@ -158,12 +158,14 @@
   "swap.swapScreen.defaultSlippage": "Default Slippage Tolerance",
   "swap.swapScreen.slippageInfo": "Slippage tolerance is set as a percentage of the total swap value. Your transactions will not be executed if the price moves by more than this amount.",
   "swap.swapScreen.autoPool": "(auto)",
-  "swap.swapScreen.changePool": "change pool",
+  "swap.swapScreen.changePool": "change dex",
   "swap.swapScreen.swapMinAda": "Min-ADA is the minimum ADA amount required to be contained when holding or sending Cardano native assets.",
   "swap.swapScreen.swapMinAdaTitle": "Min ADA",
-  "swap.swapScreen.swapFees": "Swap fees include the following:\n • Matchmaker Fee\n • Frontend Fee",
+  "swap.swapScreen.swapFees": "Swap fees include the following:\n • DEX Fee\n • Frontend Fee",
   "swap.swapScreen.swapFeesTitle": "Fees",
-  "swap.swapScreen.swapLiquidityFee": "Liquidity provider fee ({fee}%)",
+  "swap.swapScreen.swapLiqProvFee": "Liq. prov. fee",
+  "swap.swapScreen.swapLiquidityFee": "Liquidity provider fee",
+  "swap.swapScreen.swapLiquidityFeeInfo": "Liquidity provider fee is a fixed {fee}% operational fee from the whole transaction volume, that is taken to support DEX “liquidity” allowing traders to buy and sell assets on the decentralized Cardano network.",
   "swap.swapScreen.swapMinReceived": "Minimum amount of assets you can get because of the slippage tolerance.",
   "swap.swapScreen.swapMinReceivedTitle": "Min Received",
   "swap.swapScreen.enterSlippage": "Enter a value from 0% to 100%. You can also enter up to 1 decimal",
@@ -184,7 +186,8 @@
   "swap.listOrders.sheet.back": "Back",
   "swap.listOrders.total": "Total",
   "swap.listOrders.liquidityPool": "Liquidity Pool",
-  "swap.listOrders.timeCreated": "Time Created",
+  "swap.listOrders.timeCreated": "Time created",
+  "swap.listOrders.timeCompleted": "Time completed",
   "swap.listOrders.txId": "Transaction ID",
   "swap.swapScreen.limitPriceWarningTitle": "Limit price",
   "swap.swapScreen.limitPriceWarningDescription": "Are you sure you want to proceed this order with the limit price that is 10% or more higher than the market price?",