-
Notifications
You must be signed in to change notification settings - Fork 316
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Revert "[TRAH] Sergei / TRAH - 3006 / Trader's hub (appstore package)…
- Loading branch information
1 parent
9c25063
commit 5273ee0
Showing
123 changed files
with
6,185 additions
and
221 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
136 changes: 136 additions & 0 deletions
136
packages/appstore/src/components/add-more-wallets/__test__/add-more-wallets.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,136 @@ | ||
| import React from 'react'; | ||
| import { screen, render } from '@testing-library/react'; | ||
| import { APIProvider } from '@deriv/api'; | ||
| import { StoreProvider, mockStore } from '@deriv/stores'; | ||
| import AddMoreWallets from '../add-more-wallets'; | ||
|
|
||
| jest.mock('../wallet-add-card', () => { | ||
| const AddWalletCard = () => <div>AddWalletCard</div>; | ||
| return AddWalletCard; | ||
| }); | ||
|
|
||
| jest.mock('../carousel-container', () => { | ||
| const CarouselContainer = ({ children }: React.PropsWithChildren) => ( | ||
| <div data-testid='dt_carousel_container'>{children}</div> | ||
| ); | ||
| return CarouselContainer; | ||
| }); | ||
|
|
||
| jest.mock('@deriv/api', () => ({ | ||
| ...jest.requireActual('@deriv/api'), | ||
| useFetch: jest.fn((name: string) => { | ||
| if (name === 'authorize') { | ||
| return { | ||
| data: { | ||
| authorize: { | ||
| account_list: [ | ||
| { account_category: 'wallet', landing_company_name: 'svg', is_virtual: 0, currency: 'USD' }, | ||
| ], | ||
| landing_company_name: 'svg', | ||
| }, | ||
| }, | ||
| }; | ||
| } | ||
|
|
||
| if (name === 'get_account_types') { | ||
| return { | ||
| data: { | ||
| get_account_types: { | ||
| wallet: { | ||
| crypto: { | ||
| currencies: ['BTC', 'ETH'], | ||
| }, | ||
| doughflow: { | ||
| currencies: ['USD', 'EUR'], | ||
| }, | ||
| }, | ||
| }, | ||
| }, | ||
| }; | ||
| } | ||
|
|
||
| return { data: undefined }; | ||
| }), | ||
| })); | ||
|
|
||
| describe('AddMoreWallets', () => { | ||
| const wrapper = (mock: ReturnType<typeof mockStore>) => { | ||
| const Component = ({ children }: React.PropsWithChildren) => { | ||
| return ( | ||
| <APIProvider> | ||
| <StoreProvider store={mock}>{children}</StoreProvider> | ||
| </APIProvider> | ||
| ); | ||
| }; | ||
| return Component; | ||
| }; | ||
|
|
||
| it('should render the component without errors', () => { | ||
| const mock = mockStore({ | ||
| client: { | ||
| loginid: 'CRW909900', | ||
| accounts: { | ||
| CRW909900: { | ||
| token: '12345', | ||
| }, | ||
| }, | ||
| is_crypto: (currency: string) => currency === 'BTC', | ||
| }, | ||
| }); | ||
|
|
||
| const { container } = render(<AddMoreWallets />, { wrapper: wrapper(mock) }); | ||
| expect(container).toBeInTheDocument(); | ||
| }); | ||
|
|
||
| it('should render the title correctly', () => { | ||
| const mock = mockStore({ | ||
| client: { | ||
| loginid: 'CRW909900', | ||
| accounts: { | ||
| CRW909900: { | ||
| token: '12345', | ||
| }, | ||
| }, | ||
| is_crypto: (currency: string) => currency === 'BTC', | ||
| }, | ||
| }); | ||
|
|
||
| render(<AddMoreWallets />, { wrapper: wrapper(mock) }); | ||
| expect(screen.getByText('Add more Wallets')).toBeInTheDocument(); | ||
| }); | ||
|
|
||
| it('should render the carousel', () => { | ||
| const mock = mockStore({ | ||
| client: { | ||
| loginid: 'CRW909900', | ||
| accounts: { | ||
| CRW909900: { | ||
| token: '12345', | ||
| }, | ||
| }, | ||
| is_crypto: (currency: string) => currency === 'BTC', | ||
| }, | ||
| }); | ||
|
|
||
| render(<AddMoreWallets />, { wrapper: wrapper(mock) }); | ||
| expect(screen.getByTestId('dt_carousel_container')).toBeInTheDocument(); | ||
| }); | ||
|
|
||
| it('should render the wallet add card', () => { | ||
| const mock = mockStore({ | ||
| client: { | ||
| loginid: 'CRW909900', | ||
| accounts: { | ||
| CRW909900: { | ||
| token: '12345', | ||
| }, | ||
| }, | ||
| is_crypto: (currency: string) => currency === 'BTC', | ||
| }, | ||
| }); | ||
|
|
||
| render(<AddMoreWallets />, { wrapper: wrapper(mock) }); | ||
| const wallet_cards = screen.getAllByText(/AddWalletCard/i); | ||
| expect(wallet_cards).toHaveLength(4); | ||
| }); | ||
| }); |
118 changes: 118 additions & 0 deletions
118
packages/appstore/src/components/add-more-wallets/__test__/wallet-add-card.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,118 @@ | ||
| import React from 'react'; | ||
| import { APIProvider } from '@deriv/api'; | ||
| import { screen, render } from '@testing-library/react'; | ||
| import { StoreProvider, mockStore } from '@deriv/stores'; | ||
| import AddWalletCard from '../wallet-add-card'; | ||
|
|
||
| const wallet_info = { | ||
| currency: 'BTC', | ||
| gradient_card_class: '', | ||
| landing_company_name: 'svg', | ||
| is_added: false, | ||
| }; | ||
|
|
||
| jest.mock('@deriv/api', () => ({ | ||
| ...jest.requireActual('@deriv/api'), | ||
| useFetch: jest.fn((name: string) => { | ||
| if (name === 'authorize') { | ||
| return { | ||
| data: { | ||
| authorize: { | ||
| account_list: [ | ||
| { account_category: 'wallet', landing_company_name: 'svg', is_virtual: 0, currency: 'USD' }, | ||
| ], | ||
| landing_company_name: 'svg', | ||
| }, | ||
| }, | ||
| }; | ||
| } | ||
|
|
||
| if (name === 'get_account_types') { | ||
| return { | ||
| data: { | ||
| get_account_types: { | ||
| wallet: { | ||
| crypto: { | ||
| currencies: ['BTC'], | ||
| }, | ||
| doughflow: { | ||
| currencies: ['USD'], | ||
| }, | ||
| }, | ||
| }, | ||
| }, | ||
| }; | ||
| } | ||
|
|
||
| if (name === 'website_status') { | ||
| return { | ||
| data: { | ||
| website_status: { | ||
| currencies_config: { | ||
| USD: { type: 'fiat', name: 'US Dollar' }, | ||
| BTC: { type: 'crypto', name: 'Bitcoin' }, | ||
| UST: { type: 'crypto', name: 'USDT' }, | ||
| }, | ||
| }, | ||
| }, | ||
| }; | ||
| } | ||
|
|
||
| return { data: undefined }; | ||
| }), | ||
| })); | ||
|
|
||
| describe('AddWalletCard', () => { | ||
| it('should render currency card', () => { | ||
| const mock = mockStore({}); | ||
|
|
||
| render( | ||
| <StoreProvider store={mock}> | ||
| <APIProvider> | ||
| <AddWalletCard wallet_info={{ ...wallet_info }} /> | ||
| </APIProvider> | ||
| </StoreProvider> | ||
| ); | ||
|
|
||
| const add_btn = screen.getByRole('button', { name: /Add/i }); | ||
| expect(screen.getByText('BTC Wallet')).toBeInTheDocument(); | ||
| expect(screen.getByText('SVG')).toBeInTheDocument(); | ||
| expect(add_btn).toBeInTheDocument(); | ||
| expect(add_btn).toBeEnabled(); | ||
| expect( | ||
| screen.getByText( | ||
| "Deposit and withdraw Bitcoin, the world's most popular cryptocurrency, hosted on the Bitcoin blockchain." | ||
| ) | ||
| ).toBeInTheDocument(); | ||
| }); | ||
|
|
||
| it('should disabled button when it is disabled', () => { | ||
| const mock = mockStore({}); | ||
|
|
||
| render( | ||
| <StoreProvider store={mock}> | ||
| <APIProvider> | ||
| <AddWalletCard wallet_info={{ ...wallet_info, is_added: true }} /> | ||
| </APIProvider> | ||
| </StoreProvider> | ||
| ); | ||
|
|
||
| const added_btn = screen.getByRole('button', { name: /Added/i }); | ||
| expect(added_btn).toBeInTheDocument(); | ||
| expect(added_btn).toBeDisabled(); | ||
| }); | ||
|
|
||
| it('should show USDT instead of UST for UST currency', () => { | ||
| const mock = mockStore({}); | ||
|
|
||
| render( | ||
| <StoreProvider store={mock}> | ||
| <APIProvider> | ||
| <AddWalletCard wallet_info={{ ...wallet_info, currency: 'UST' }} /> | ||
| </APIProvider> | ||
| </StoreProvider> | ||
| ); | ||
| expect(screen.getByText('USDT Wallet')).toBeInTheDocument(); | ||
| expect(screen.queryByText('UST Wallet')).not.toBeInTheDocument(); | ||
| }); | ||
| }); |
91 changes: 91 additions & 0 deletions
91
packages/appstore/src/components/add-more-wallets/add-more-wallets.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,91 @@ | ||
| @mixin align-center { | ||
| display: flex; | ||
| align-items: center; | ||
| } | ||
|
|
||
| .add-wallets { | ||
| display: flex; | ||
| padding-top: 2.4rem; | ||
| flex-direction: column; | ||
| align-items: flex-start; | ||
| gap: 1.6rem; | ||
| width: 100%; | ||
|
|
||
| &__title { | ||
| @include mobile { | ||
| padding-left: 1.6rem; | ||
| } | ||
| } | ||
| &__content { | ||
| background-color: var(--general-main-1); | ||
| border-radius: $BORDER_RADIUS; | ||
| position: relative; | ||
| width: 100%; | ||
| } | ||
| &__card { | ||
| width: 23rem; | ||
| height: 29rem; | ||
| padding: 1.6rem; | ||
| border-radius: 1.6rem; | ||
| border: 0.1rem solid var(--general-active); | ||
| background-color: var(--general-main-1); | ||
| box-shadow: $wallet-box-shadow; | ||
| cursor: pointer; | ||
| &-description, | ||
| &-wrapper { | ||
| display: flex; | ||
| flex-direction: column; | ||
| } | ||
| &-description { | ||
| align-items: flex-start; | ||
| gap: 0.8rem; | ||
| } | ||
| &-wrapper { | ||
| align-items: center; | ||
| gap: 2.4rem; | ||
| @include mobile { | ||
| gap: 1.6rem; | ||
| } | ||
| } | ||
| } | ||
| } | ||
|
|
||
| .carousel { | ||
| overflow: hidden; | ||
| padding: 3.2rem 1.6rem; | ||
| &__wrapper { | ||
| height: 100%; | ||
| @include align-center; | ||
| justify-content: flex-start; | ||
| gap: 2.4rem; | ||
| } | ||
| &__btn { | ||
| background-color: var(--general-main-1); | ||
| z-index: 1; | ||
| color: var(--text-general); | ||
| position: absolute; | ||
| @include align-center; | ||
| justify-content: center; | ||
| top: 45%; | ||
| cursor: pointer; | ||
| width: 4rem; | ||
| height: 4rem; | ||
| border: 1px solid var(--general-background-main); | ||
| border-radius: 50%; | ||
| box-shadow: $btn-shadow; | ||
| &-prev { | ||
| left: 1.6rem; | ||
| } | ||
| &-next { | ||
| right: 1.6rem; | ||
| } | ||
| &-icon { | ||
| width: 50%; | ||
| height: 35%; | ||
| } | ||
| &:disabled { | ||
| opacity: 0.3; | ||
| display: none; | ||
| } | ||
| } | ||
| } |
Oops, something went wrong.