-
-
Notifications
You must be signed in to change notification settings - Fork 266
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(coinmarket): Add payment method filter (#12049)
* feat(coinmarket): add filter in buy section * feat(coinmarket): add logic to coinmarket filter
- Loading branch information
1 parent
429e4e9
commit d374579
Showing
9 changed files
with
268 additions
and
40 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
112 changes: 112 additions & 0 deletions
112
packages/suite/src/reducers/wallet/useCoinmarketFilterReducer.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,112 @@ | ||
| import { BuyCryptoPaymentMethod, BuyTrade } from 'invity-api'; | ||
| import { Dispatch, useCallback, useEffect, useReducer } from 'react'; | ||
|
|
||
| type PaymentMethodValueProps = BuyCryptoPaymentMethod | ''; | ||
|
|
||
| export interface PaymentMethodListProps { | ||
| value: PaymentMethodValueProps; | ||
| label: string; | ||
| } | ||
|
|
||
| interface InitialStateProps { | ||
| paymentMethod: PaymentMethodValueProps; | ||
| paymentMethods: PaymentMethodListProps[]; | ||
| } | ||
|
|
||
| type ActionType = | ||
| | { | ||
| type: 'FILTER_PAYMENT_METHOD'; | ||
| payload: PaymentMethodValueProps; | ||
| } | ||
| | { | ||
| type: 'FILTER_SET_PAYMENT_METHODS'; | ||
| payload: BuyTrade[]; | ||
| }; | ||
|
|
||
| export interface UseCoinmarketFilterReducerOutputProps { | ||
| state: InitialStateProps; | ||
| dispatch: Dispatch<ActionType>; | ||
| actions: { | ||
| handleFilterQuotes: (quotes: BuyTrade[] | undefined) => BuyTrade[] | undefined; | ||
| }; | ||
| } | ||
|
|
||
| const getPaymentMethods = (quotes: BuyTrade[]): PaymentMethodListProps[] => { | ||
| const newPaymentMethods: PaymentMethodListProps[] = []; | ||
|
|
||
| quotes.forEach(quote => { | ||
| const { paymentMethod } = quote; | ||
| const isNotInArray = !newPaymentMethods.some(item => item.value === paymentMethod); | ||
|
|
||
| if (typeof paymentMethod !== 'undefined' && isNotInArray) { | ||
| const label = quote.paymentMethodName ?? paymentMethod; | ||
|
|
||
| newPaymentMethods.push({ value: paymentMethod, label }); | ||
| } | ||
| }); | ||
|
|
||
| return newPaymentMethods; | ||
| }; | ||
|
|
||
| const reducer = (state: InitialStateProps, action: ActionType) => { | ||
| switch (action.type) { | ||
| case 'FILTER_PAYMENT_METHOD': | ||
| return { | ||
| ...state, | ||
| paymentMethod: action.payload, | ||
| }; | ||
| case 'FILTER_SET_PAYMENT_METHODS': { | ||
| const newPaymentMethods: PaymentMethodListProps[] = getPaymentMethods(action.payload); | ||
|
|
||
| return { | ||
| ...state, | ||
| paymentMethods: newPaymentMethods, | ||
| }; | ||
| } | ||
| default: | ||
| return state; | ||
| } | ||
| }; | ||
|
|
||
| export const useCoinmarketFilterReducer = ( | ||
| quotes: BuyTrade[] | undefined, | ||
| ): UseCoinmarketFilterReducerOutputProps => { | ||
| const initialState: InitialStateProps = { | ||
| paymentMethod: '', | ||
| paymentMethods: quotes ? getPaymentMethods(quotes) : [], | ||
| }; | ||
|
|
||
| const [state, dispatch] = useReducer(reducer, initialState); | ||
|
|
||
| // if payment method is not in payment methods then reset | ||
| useEffect(() => { | ||
| const isMethodInPaymentMethods = state.paymentMethods.find( | ||
| item => item.value === state.paymentMethod, | ||
| ); | ||
|
|
||
| if (!isMethodInPaymentMethods) { | ||
| dispatch({ type: 'FILTER_PAYMENT_METHOD', payload: '' }); | ||
| } | ||
| }, [state.paymentMethod, state.paymentMethods]); | ||
|
|
||
| const handleFilterQuotes = useCallback( | ||
| (quotes: BuyTrade[] | undefined) => { | ||
| if (!quotes) return; | ||
|
|
||
| return quotes.filter(quote => { | ||
| if (state.paymentMethod === '') return true; // all | ||
|
|
||
| return quote.paymentMethod === state.paymentMethod; | ||
| }); | ||
| }, | ||
| [state.paymentMethod], | ||
| ); | ||
|
|
||
| return { | ||
| state, | ||
| dispatch, | ||
| actions: { | ||
| handleFilterQuotes, | ||
| }, | ||
| }; | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
60 changes: 60 additions & 0 deletions
60
packages/suite/src/views/wallet/coinmarket/buy/offers/Offers/List/BuyQuoteFilter.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,60 @@ | ||
| import { Select } from '@trezor/components'; | ||
| import styled from 'styled-components'; | ||
| import { useTranslation } from 'src/hooks/suite'; | ||
| import { | ||
| PaymentMethodListProps, | ||
| UseCoinmarketFilterReducerOutputProps, | ||
| } from 'src/reducers/wallet/useCoinmarketFilterReducer'; | ||
| import { CoinmarketPaymentPlainType } from 'src/views/wallet/coinmarket/common/CoinmarketPaymentPlainType'; | ||
| import { spacingsPx } from '@trezor/theme'; | ||
|
|
||
| const Wrapper = styled.div` | ||
| margin-top: ${spacingsPx.lg}; | ||
| `; | ||
|
|
||
| const Option = styled.div` | ||
| display: flex; | ||
| align-items: center; | ||
| `; | ||
|
|
||
| interface BuyQuoteFilter { | ||
| quotesFilterReducer: UseCoinmarketFilterReducerOutputProps; | ||
| } | ||
|
|
||
| export const BuyQuoteFilter = ({ quotesFilterReducer }: BuyQuoteFilter) => { | ||
| const { state, dispatch } = quotesFilterReducer; | ||
| const { translationString } = useTranslation(); | ||
| const defaultMethod: PaymentMethodListProps = { | ||
| value: '', | ||
| label: translationString('TR_PAYMENT_METHOD_ALL'), | ||
| }; | ||
|
|
||
| return ( | ||
| <Wrapper data-test="@coinmarket/buy/filter"> | ||
| <Select | ||
| onChange={(selected: PaymentMethodListProps) => { | ||
| dispatch({ type: 'FILTER_PAYMENT_METHOD', payload: selected.value }); | ||
| }} | ||
| value={ | ||
| state.paymentMethods.find(item => item.value === state.paymentMethod) ?? | ||
| defaultMethod | ||
| } | ||
| options={[defaultMethod, ...state.paymentMethods]} | ||
| formatOptionLabel={(option: PaymentMethodListProps) => ( | ||
| <Option> | ||
| {option.value !== '' ? ( | ||
| <CoinmarketPaymentPlainType | ||
| method={option.value} | ||
| methodName={option.label} | ||
| /> | ||
| ) : ( | ||
| <div>{option.label}</div> | ||
| )} | ||
| </Option> | ||
| )} | ||
| data-test="@coinmarket/buy/filter-payment-method" | ||
| minValueWidth="100px" | ||
| /> | ||
| </Wrapper> | ||
| ); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
49 changes: 49 additions & 0 deletions
49
packages/suite/src/views/wallet/coinmarket/common/CoinmarketPaymentPlainType.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,49 @@ | ||
| import { ReactNode } from 'react'; | ||
| import styled from 'styled-components'; | ||
| import { typography } from '@trezor/theme'; | ||
| import { BuyCryptoPaymentMethod, SavingsPaymentMethod, SellCryptoPaymentMethod } from 'invity-api'; | ||
| import { Translation } from 'src/components/suite'; | ||
|
|
||
| const Text = styled.div` | ||
| display: flex; | ||
| align-items: center; | ||
| ${typography.body}; | ||
| color: ${({ theme }) => theme.textDefault}; | ||
| `; | ||
|
|
||
| interface CoinmarketPaymentTypeProps { | ||
| children?: ReactNode; | ||
| method?: BuyCryptoPaymentMethod | SellCryptoPaymentMethod | SavingsPaymentMethod; | ||
| methodName?: string; | ||
| } | ||
| type TranslatedPaymentMethod = 'bankTransfer' | 'creditCard'; | ||
|
|
||
| type PaymentMethodId = `TR_PAYMENT_METHOD_${Uppercase<TranslatedPaymentMethod>}`; | ||
|
|
||
| const getPaymentMethod = (method: TranslatedPaymentMethod): PaymentMethodId => | ||
| `TR_PAYMENT_METHOD_${method.toUpperCase() as Uppercase<TranslatedPaymentMethod>}`; | ||
|
|
||
| export const CoinmarketPaymentPlainType = ({ | ||
| children, | ||
| method, | ||
| methodName, | ||
| }: CoinmarketPaymentTypeProps) => ( | ||
| <div> | ||
| <Text> | ||
| {method ? ( | ||
| <> | ||
| {method === 'bankTransfer' || method === 'creditCard' ? ( | ||
| <Translation id={getPaymentMethod(method)} /> | ||
| ) : ( | ||
| <Text>{methodName || method}</Text> | ||
| )} | ||
| </> | ||
| ) : ( | ||
| <Text> | ||
| <Translation id="TR_PAYMENT_METHOD_UNKNOWN" /> | ||
| </Text> | ||
| )} | ||
| </Text> | ||
| {children} | ||
| </div> | ||
| ); |
Oops, something went wrong.