diff --git a/apps/wallet-mobile/src/TxHistory/TxHistoryNavigator.tsx b/apps/wallet-mobile/src/TxHistory/TxHistoryNavigator.tsx index 4f09984a49..7ff178aef2 100644 --- a/apps/wallet-mobile/src/TxHistory/TxHistoryNavigator.tsx +++ b/apps/wallet-mobile/src/TxHistory/TxHistoryNavigator.tsx @@ -27,7 +27,7 @@ import {BackButton, defaultStackNavigationOptions, TxHistoryRoutes, useWalletNav import {ReceiveScreen} from '../Receive/ReceiveScreen' import {useSelectedWallet} from '../SelectedWallet' import {COLORS} from '../theme' -import {useWalletName} from '../yoroi-wallets/hooks' +import {useStakingKey, useWalletName} from '../yoroi-wallets/hooks' import {ModalInfo} from './ModalInfo' import {TxDetails} from './TxDetails' import {TxHistory} from './TxHistory' @@ -41,11 +41,13 @@ export const TxHistoryNavigator = () => { const [modalInfoState, setModalInfoState] = React.useState(false) const showModalInfo = () => setModalInfoState(true) const hideModalInfo = () => setModalInfoState(false) + const stakingKey = useStakingKey(wallet) const swapStorage = makeSwapStorage() const swapAPI = makeSwapApi({ network: 0, - stakingKey: wallet.rewardAddressHex, + stakingKey, + primaryTokenId: wallet.primaryTokenInfo.id, }) const swapManager = makeSwapManager(swapStorage, swapAPI) diff --git a/apps/wallet-mobile/src/components/Icon/Icon.stories.tsx b/apps/wallet-mobile/src/components/Icon/Icon.stories.tsx index 2762816069..9cf58f2ef0 100644 --- a/apps/wallet-mobile/src/components/Icon/Icon.stories.tsx +++ b/apps/wallet-mobile/src/components/Icon/Icon.stories.tsx @@ -214,6 +214,14 @@ storiesOf('Icon', module).add('Gallery', () => { } title="Swap" /> } title="Portfolio" /> + + } title="MinSwap" /> + + } title="SundaeSwap" /> + + } title="MuesliSwap" /> + + } title="WingRiders" /> ) diff --git a/apps/wallet-mobile/src/components/Icon/MinSwap.tsx b/apps/wallet-mobile/src/components/Icon/MinSwap.tsx new file mode 100644 index 0000000000..b6469e3443 --- /dev/null +++ b/apps/wallet-mobile/src/components/Icon/MinSwap.tsx @@ -0,0 +1,25 @@ +import React from 'react' +import Svg, {Defs, Image, Path, Pattern, Use} from 'react-native-svg' + +type Props = { + size?: number +} + +export const MinSwap = ({size = 36}: Props) => ( + + + + + + + + + + + +) diff --git a/apps/wallet-mobile/src/components/Icon/MuesliSwap.tsx b/apps/wallet-mobile/src/components/Icon/MuesliSwap.tsx new file mode 100644 index 0000000000..dae3bb7846 --- /dev/null +++ b/apps/wallet-mobile/src/components/Icon/MuesliSwap.tsx @@ -0,0 +1,252 @@ +import React from 'react' +import Svg, {G, Path} from 'react-native-svg' + +type Props = { + size?: number +} + +export const MuesliSwap = ({size = 36}: Props) => ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +) diff --git a/apps/wallet-mobile/src/components/Icon/SundaeSwap.tsx b/apps/wallet-mobile/src/components/Icon/SundaeSwap.tsx new file mode 100644 index 0000000000..c218ef9328 --- /dev/null +++ b/apps/wallet-mobile/src/components/Icon/SundaeSwap.tsx @@ -0,0 +1,25 @@ +import React from 'react' +import Svg, {Defs, Image, Path, Pattern, Use} from 'react-native-svg' + +type Props = { + size?: number +} + +export const SundaeSwap = ({size = 36}: Props) => ( + + + + + + + + + + + +) diff --git a/apps/wallet-mobile/src/components/Icon/WingRiders.tsx b/apps/wallet-mobile/src/components/Icon/WingRiders.tsx new file mode 100644 index 0000000000..2f5c43c478 --- /dev/null +++ b/apps/wallet-mobile/src/components/Icon/WingRiders.tsx @@ -0,0 +1,14 @@ +import React from 'react' +import Svg, {Path} from 'react-native-svg' + +type Props = { + size?: number +} +export const WingRiders = ({size = 36}: Props) => ( + + + +) diff --git a/apps/wallet-mobile/src/components/Icon/index.ts b/apps/wallet-mobile/src/components/Icon/index.ts index 054281f606..5de4930600 100644 --- a/apps/wallet-mobile/src/components/Icon/index.ts +++ b/apps/wallet-mobile/src/components/Icon/index.ts @@ -45,6 +45,8 @@ import {Magnify} from './Magnify' import {Megaphone} from './Megaphone' import {Menu} from './Menu' import {Message} from './Message' +import {MinSwap} from './MinSwap' +import {MuesliSwap} from './MuesliSwap' import {MultipleWallets} from './MultipleWallets' import {NftAsset} from './NftAsset' import {NoNfts} from './NoNfts' @@ -70,6 +72,7 @@ import {StakingKeyDeregistered} from './StakingKeyDeregistered' import {StakingKeyRegistered} from './StakingKeyRegistered' import {StarFilled} from './StarFilled' import {StarOutlined} from './StarOutlined' +import {SundaeSwap} from './SundaeSwap' import {Support} from './Support' import {Swap} from './Swap' import {Switch} from './Switch' @@ -90,6 +93,7 @@ import {Wallet} from './Wallet' import {WalletAccount} from './WalletAccount' import {Wallets} from './Wallets' import {WalletStack} from './WalletStack' +import {WingRiders} from './WingRiders' import {YoroiNightly} from './YoroiNightly' import {YoroiWallet} from './YoroiWallet' @@ -188,4 +192,8 @@ export const Icon = { Switch, Edit, Portfolio, + MinSwap, + SundaeSwap, + MuesliSwap, + WingRiders, } diff --git a/apps/wallet-mobile/src/features/Swap/common/PoolIcon/PoolIcon.tsx b/apps/wallet-mobile/src/features/Swap/common/PoolIcon/PoolIcon.tsx new file mode 100644 index 0000000000..b70b2e21a4 --- /dev/null +++ b/apps/wallet-mobile/src/features/Swap/common/PoolIcon/PoolIcon.tsx @@ -0,0 +1,19 @@ +import {Pool} from '@yoroi/openswap' +import React, {FunctionComponent} from 'react' + +import {Icon} from '../../../../components' + +export const PoolIcon = ({providerId, size}: {providerId: Pool['provider']; size: number}) => { + const IconVariant = icons[providerId] + return +} + +const icons: Record> = { + muesliswap_v1: Icon.MuesliSwap, + muesliswap_v2: Icon.MuesliSwap, + muesliswap_v3: Icon.MuesliSwap, + muesliswap_v4: Icon.MuesliSwap, + minswap: Icon.MinSwap, + sundaeswap: Icon.SundaeSwap, + wingriders: Icon.WingRiders, +} diff --git a/apps/wallet-mobile/src/features/Swap/common/SelectPool/SelectPoolFromList/SelectPoolFromList.tsx b/apps/wallet-mobile/src/features/Swap/common/SelectPool/SelectPoolFromList/SelectPoolFromList.tsx index b659b045bd..50324f6d75 100644 --- a/apps/wallet-mobile/src/features/Swap/common/SelectPool/SelectPoolFromList/SelectPoolFromList.tsx +++ b/apps/wallet-mobile/src/features/Swap/common/SelectPool/SelectPoolFromList/SelectPoolFromList.tsx @@ -4,10 +4,11 @@ import React, {useState} from 'react' import {StyleSheet, Text, TouchableOpacity, View} from 'react-native' import LinearGradient from 'react-native-linear-gradient' -import {Icon, Spacer} from '../../../../../components' +import {Spacer} from '../../../../../components' import {useMetrics} from '../../../../../metrics/metricsManager' import {COLORS} from '../../../../../theme' import {useNavigateTo} from '../../navigation' +import {PoolIcon} from '../../PoolIcon/PoolIcon' import {useStrings} from '../../strings' type Props = { @@ -42,9 +43,8 @@ export const SelectPoolFromList = ({data = []}: Props) => { > handleCardSelect(pool)} style={[styles.card]}> - {/* TODO add icons for each pool and change it depending on name */} - + {protocolCapitalize(pool.provider)} 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 index 92d2bd7e5d..7680f48e98 100644 --- a/apps/wallet-mobile/src/features/Swap/useCases/StartSwapScreen/ListOrders/CompletedOrders.tsx +++ b/apps/wallet-mobile/src/features/Swap/useCases/StartSwapScreen/ListOrders/CompletedOrders.tsx @@ -1,4 +1,3 @@ -import {useOrderByStatusCompleted} from '@yoroi/swap' import React from 'react' import {Linking, ScrollView, StyleSheet, TouchableOpacity, View} from 'react-native' @@ -14,7 +13,8 @@ import { MainInfoWrapper, } from '../../../common/SelectPool/ExpendableCard/ExpandableInfoCard' import {useStrings} from '../../../common/strings' -import {mapOrders, OrderProps} from './mapOrders' +import {OrderProps} from './mapOrders' +import {getMockOrders} from './mocks' export const CompletedOrders = () => { const strings = useStrings() @@ -26,13 +26,7 @@ export const CompletedOrders = () => { }) const [hiddenInfoOpenId, setHiddenInfoOpenId] = React.useState(null) - const data = useOrderByStatusCompleted({ - onError: (err) => { - console.log(err) - }, - }) - - const orders = mapOrders(data).filter( + const orders = getMockOrders().filter( ({assetFromLabel, assetToLabel}) => assetFromLabel.toLocaleLowerCase().includes(search.toLocaleLowerCase()) || assetToLabel.toLocaleLowerCase().includes(search.toLocaleLowerCase()), 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 index 3edf5d1219..b0c4346f95 100644 --- a/apps/wallet-mobile/src/features/Swap/useCases/StartSwapScreen/ListOrders/OpenOrders.tsx +++ b/apps/wallet-mobile/src/features/Swap/useCases/StartSwapScreen/ListOrders/OpenOrders.tsx @@ -1,11 +1,17 @@ import {useOrderByStatusOpen} from '@yoroi/swap' +import {uniq} from 'lodash' import React from 'react' +import {useIntl} from 'react-intl' import {Linking, ScrollView, StyleSheet, TouchableOpacity, View} from 'react-native' -import {BottomSheetModal, Button, Icon, Spacer, Text, TextInput} from '../../../../../components' +import {BottomSheetModal, Button, Spacer, Text, TextInput, TokenIcon} from '../../../../../components' +import {useLanguage} from '../../../../../i18n' import {useSearch} from '../../../../../Search/SearchContext' +import {useSelectedWallet} from '../../../../../SelectedWallet' import {COLORS} from '../../../../../theme' +import {useTokenInfos, useTransactionInfos} from '../../../../../yoroi-wallets/hooks' import {Counter} from '../../../common/Counter/Counter' +import {PoolIcon} from '../../../common/PoolIcon/PoolIcon' import { BottomSheetState, ExpandableInfoCard, @@ -14,7 +20,7 @@ import { MainInfoWrapper, } from '../../../common/SelectPool/ExpendableCard/ExpandableInfoCard' import {useStrings} from '../../../common/strings' -import {mapOrders, OrderProps} from './mapOrders' +import {mapOrders} from './mapOrders' export const OpenOrders = () => { const [bottomSheetState, setBottomSheetState] = React.useState({ @@ -22,51 +28,90 @@ export const OpenOrders = () => { title: '', content: '', }) + const wallet = useSelectedWallet() const [hiddenInfoOpenId, setHiddenInfoOpenId] = React.useState(null) const [confirmationModal, setConfirmationModal] = React.useState(false) const strings = useStrings() const [spendingPassword, setSpendingPassword] = React.useState('') - const {search} = useSearch() + const transactionsInfos = useTransactionInfos(wallet) + const {numberLocale} = useLanguage() + const intl = useIntl() - const data = useOrderByStatusOpen({ + const orders = useOrderByStatusOpen({ onError: (err) => { console.log(err) }, }) + const tokenIds = uniq(orders.flatMap((o) => [o.from.tokenId, o.to.tokenId])) - const orders = mapOrders(data).filter( - ({assetFromLabel, assetToLabel}) => - assetFromLabel.toLocaleLowerCase().includes(search.toLocaleLowerCase()) || - assetToLabel.toLocaleLowerCase().includes(search.toLocaleLowerCase()), - ) + const tokenInfos = useTokenInfos({wallet, tokenIds: tokenIds}) + + const normalizedOrders = mapOrders(orders, tokenInfos, numberLocale, Object.values(transactionsInfos)) + + const searchLower = search.toLocaleLowerCase() + + const filteredOrders = normalizedOrders.filter((order) => { + return ( + order.assetFromLabel.toLocaleLowerCase().includes(searchLower) || + order.assetToLabel.toLocaleLowerCase().includes(searchLower) + ) + }) return ( <> - {orders.map((order) => { - const id = `${order.assetFromLabel}-${order.assetToLabel}-${order.date}` + {filteredOrders.map((order) => { + const fromIcon = + const toIcon = + const liquidityPoolIcon = return ( } - hiddenInfo={} - mainInfo={} + label={ +