diff --git a/src/features/BuyMatchPopup/components/CardStep/index.tsx b/src/features/BuyMatchPopup/components/CardStep/index.tsx index 82849b07..6cc91f37 100644 --- a/src/features/BuyMatchPopup/components/CardStep/index.tsx +++ b/src/features/BuyMatchPopup/components/CardStep/index.tsx @@ -7,6 +7,7 @@ import { CloseButton, HeaderActions, } from 'features/PopupComponents' +import { Arrow } from 'features/HeaderFilters/components/DateFilter/styled' import { T9n } from 'features/T9n' import { CardsList } from '../CardsList' @@ -17,6 +18,7 @@ import { Header, HeaderTitle, Button, + ButtonPrevious, } from '../../styled' export const CardStep = () => { @@ -28,6 +30,9 @@ export const CardStep = () => { return (
+ + + diff --git a/src/features/BuyMatchPopup/components/CardsList/index.tsx b/src/features/BuyMatchPopup/components/CardsList/index.tsx index e2f4e252..9b0abeca 100644 --- a/src/features/BuyMatchPopup/components/CardsList/index.tsx +++ b/src/features/BuyMatchPopup/components/CardsList/index.tsx @@ -1,4 +1,8 @@ +import { useState } from 'react' + import map from 'lodash/map' +import sortBy from 'lodash/sortBy' + import styled, { css } from 'styled-components/macro' import { isMobileDevice } from 'config/userAgent' @@ -64,15 +68,20 @@ export const CardsList = () => { onSetDefaultCard, } = useCardsStore() + const [activeCard, setActiveCard] = useState(defaultCard?.id) + return ( { - map(cards, (card) => ( + map(sortBy(cards, ['last4']), (card) => ( onSetDefaultCard(card.id)} + checked={card.id === activeCard} + onChange={() => { + setActiveCard(card.id) + onSetDefaultCard(card.id) + }} /> ))