forked from deriv-com/deriv-app
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[Wallet] Farhan//WALL-2286/Wallet Added Success Modal (deriv-com#11162)
* feat: wallet added success modal * chore: change max-width for desktop modal * fix: remeove unnecessary props * fix: code smell * chore: use wallet actions screen for success modal, add test cases * chore: separate component * fix: text size * fix: display balance
- Loading branch information
1 parent
aa2b605
commit 03e7bce
Showing
34 changed files
with
479 additions
and
341 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
71 changes: 71 additions & 0 deletions
71
packages/wallets/src/components/WalletAddedSuccess/WalletAddedSuccess.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,71 @@ | ||
| import React, { useCallback, useMemo } from 'react'; | ||
| import useDevice from '../../hooks/useDevice'; | ||
| import { THooks } from '../../types'; | ||
| import { ModalStepWrapper, ModalWrapper, WalletButton, WalletButtonGroup } from '../Base'; | ||
| import { WalletCard } from '../WalletCard'; | ||
| import { WalletSuccess } from '../WalletSuccess'; | ||
|
|
||
| type TWalletAddedSuccessProps = { | ||
| currency: THooks.CreateWallet['currency']; | ||
| displayBalance: THooks.CreateWallet['display_balance']; | ||
| landingCompany: THooks.CreateWallet['landing_company_shortcode']; | ||
| onPrimaryButtonClick: () => void; | ||
| onSecondaryButtonClick: () => void; | ||
| }; | ||
|
|
||
| const WalletAddedSuccess: React.FC<TWalletAddedSuccessProps> = ({ | ||
| currency, | ||
| displayBalance, | ||
| landingCompany, | ||
| onPrimaryButtonClick, | ||
| onSecondaryButtonClick, | ||
| }) => { | ||
| const { isMobile } = useDevice(); | ||
| const description = 'Make a deposit into your new Wallet.'; | ||
| const title = useMemo( | ||
| () => `Your ${currency} wallet (${landingCompany?.toUpperCase()}) is ready`, | ||
| [currency, landingCompany] | ||
| ); | ||
| const renderFooter = useCallback( | ||
| () => ( | ||
| <div className='wallets-add-more__success-footer'> | ||
| <WalletButtonGroup isFlex> | ||
| <WalletButton onClick={onSecondaryButtonClick} text='Maybe later' variant='outlined' /> | ||
| <WalletButton onClick={onPrimaryButtonClick} text='Deposit' /> | ||
| </WalletButtonGroup> | ||
| </div> | ||
| ), | ||
| [onPrimaryButtonClick, onSecondaryButtonClick] | ||
| ); | ||
| const renderIcon = useCallback( | ||
| () => ( | ||
| <WalletCard | ||
| balance={displayBalance} | ||
| currency={currency || 'USD'} | ||
| landingCompanyName={landingCompany} | ||
| width='24rem' | ||
| /> | ||
| ), | ||
| [currency, displayBalance, landingCompany] | ||
| ); | ||
|
|
||
| if (isMobile) | ||
| return ( | ||
| <ModalStepWrapper renderFooter={renderFooter} title=''> | ||
| <WalletSuccess description={description} renderIcon={renderIcon} title={title} /> | ||
| </ModalStepWrapper> | ||
| ); | ||
|
|
||
| return ( | ||
| <ModalWrapper hideCloseButton> | ||
| <WalletSuccess | ||
| description={description} | ||
| renderButtons={renderFooter} | ||
| renderIcon={renderIcon} | ||
| title={title} | ||
| /> | ||
| </ModalWrapper> | ||
| ); | ||
| }; | ||
|
|
||
| export default WalletAddedSuccess; |
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 @@ | ||
| export { default as WalletAddedSuccess } from './WalletAddedSuccess'; |
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
32 changes: 15 additions & 17 deletions
32
packages/wallets/src/components/WalletCard/WalletCard.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
13 changes: 5 additions & 8 deletions
13
packages/wallets/src/components/WalletError/WalletError.scss
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 |
|---|---|---|
| @@ -1,16 +1,13 @@ | ||
| .wallets-error { | ||
| width: 47.6rem; | ||
| padding: 3rem; | ||
| padding: 2.4rem; | ||
| border-radius: 0.4rem; | ||
| background: #fff; | ||
| display: flex; | ||
| flex-direction: column; | ||
| justify-content: center; | ||
| align-items: center; | ||
| gap: 2.4rem; | ||
| flex-shrink: 0; | ||
|
|
||
| @include mobile { | ||
| width: 90vw; | ||
| display: flex; | ||
| align-items: center; | ||
| width: 100%; | ||
| height: 100%; | ||
| } | ||
| } |
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
16 changes: 16 additions & 0 deletions
16
packages/wallets/src/components/WalletSuccess/WalletSuccess.scss
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,16 @@ | ||
| .wallets-success { | ||
| display: flex; | ||
| flex-direction: column; | ||
| justify-content: center; | ||
| align-items: center; | ||
| padding: 2.4rem; | ||
| width: 39.2rem; | ||
| border-radius: 1rem; | ||
| text-align: center; | ||
| background: var(--system-light-8-primary-background, #fff); | ||
|
|
||
| @include mobile { | ||
| width: 100%; | ||
| height: calc(100% - 8.5rem); | ||
| } | ||
| } |
26 changes: 26 additions & 0 deletions
26
packages/wallets/src/components/WalletSuccess/WalletSuccess.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,26 @@ | ||
| import React, { ComponentProps, ReactNode } from 'react'; | ||
| import WalletsActionScreen from '../WalletsActionScreen/WalletsActionScreen'; | ||
| import './WalletSuccess.scss'; | ||
|
|
||
| type TSuccessProps = { | ||
| description: string; | ||
| renderButtons?: ComponentProps<typeof WalletsActionScreen>['renderButtons']; | ||
| renderIcon: () => ReactNode; | ||
| title: string; | ||
| }; | ||
|
|
||
| const WalletSuccess: React.FC<TSuccessProps> = ({ description, renderButtons, renderIcon, title }) => { | ||
| return ( | ||
| <div className='wallets-success'> | ||
| <WalletsActionScreen | ||
| desciptionSize='sm' | ||
| description={description} | ||
| icon={renderIcon()} | ||
| renderButtons={renderButtons} | ||
| title={title} | ||
| /> | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| export default WalletSuccess; |
35 changes: 35 additions & 0 deletions
35
packages/wallets/src/components/WalletSuccess/__tests__/WalletSuccess.spec.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,35 @@ | ||
| import React from 'react'; | ||
| import { render, screen } from '@testing-library/react'; | ||
| import WalletSuccess from '../WalletSuccess'; | ||
|
|
||
| describe('<WalletSuccess />', () => { | ||
| it('should render with the info provided', () => { | ||
| render( | ||
| <WalletSuccess | ||
| description='Your new wallet account created' | ||
| renderIcon={() => <i data-testid='dt-success-icon'>Icon</i>} | ||
| title='Account created' | ||
| /> | ||
| ); | ||
|
|
||
| expect(screen.getByText('Your new wallet account created')).toBeInTheDocument(); | ||
| expect(screen.getByText('Account created')).toBeInTheDocument(); | ||
| expect(screen.getByTestId('dt-success-icon')).toBeInTheDocument(); | ||
| }); | ||
|
|
||
| it('should render with the buttons', () => { | ||
| const mockRenderButtons = jest.fn(() => <button data-testid='dt-button'>Button</button>); | ||
|
|
||
| render( | ||
| <WalletSuccess | ||
| description='Your new wallet account created' | ||
| renderButtons={mockRenderButtons} | ||
| renderIcon={() => <i data-testid='dt-success-icon'>Icon</i>} | ||
| title='Account created' | ||
| /> | ||
| ); | ||
|
|
||
| expect(mockRenderButtons).toHaveBeenCalled(); | ||
| expect(screen.getByTestId('dt-button')).toBeInTheDocument(); | ||
| }); | ||
| }); |
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 @@ | ||
| export { default as WalletSuccess } from './WalletSuccess'; |
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
Oops, something went wrong.