fix(#2183): fix change cards

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 (
     <Wrapper width={642}>
       <Header>
+        <ButtonPrevious onClick={goBack}>
+          <Arrow direction='left' />
+        </ButtonPrevious>
         <HeaderTitle>
           <T9n t='pay' />
         </HeaderTitle>

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 (
     <List>
       {
-        map(cards, (card) => (
+        map(sortBy(cards, ['last4']), (card) => (
           <Item key={card.id}>
             <Radio
               label={`${card.brand} •••• ${card.last4}`}
-              checked={card.id === defaultCard?.id}
+              checked={card.id === activeCard}
-              onChange={() => onSetDefaultCard(card.id)}
+              onChange={() => {
+                setActiveCard(card.id)
+                onSetDefaultCard(card.id)
+              }}
             />
           </Item>
         ))