forked from binary-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.
[WALL] Jim/WALL-4121/Split modals and move modal titles to the header (…
…binary-com#15251) * chore: move title to the header section * chore: retrieve markettype from prop * chore: remove unnecessary prop and make it optional in the host component
- Loading branch information
Showing
8 changed files
with
274 additions
and
169 deletions.
There are no files selected for viewing
57 changes: 57 additions & 0 deletions
57
packages/wallets/src/features/cfd/modals/CreatePasswordModal/CreatePasswordModal.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,57 @@ | ||
import React, { ComponentProps, FC } from 'react'; | ||
import { ModalStepWrapper, ModalWrapper, WalletButton } from '../../../../components'; | ||
import useDevice from '../../../../hooks/useDevice'; | ||
import { PlatformDetails } from '../../constants'; | ||
import { CreatePassword } from '../../screens'; | ||
|
||
const CreatePasswordModal: FC<ComponentProps<typeof CreatePassword>> = ({ | ||
isLoading, | ||
onPasswordChange, | ||
onPrimaryClick, | ||
password, | ||
platform, | ||
}) => { | ||
const { isMobile } = useDevice(); | ||
if (isMobile) { | ||
return ( | ||
<ModalStepWrapper | ||
renderFooter={() => { | ||
return ( | ||
<WalletButton | ||
disabled={!password || isLoading} | ||
isFullWidth | ||
isLoading={isLoading} | ||
onClick={onPrimaryClick} | ||
size={isMobile ? 'lg' : 'md'} | ||
> | ||
{`Create ${PlatformDetails[platform].title} password`} | ||
</WalletButton> | ||
); | ||
}} | ||
title={''} | ||
> | ||
<CreatePassword | ||
isLoading={isLoading} | ||
onPasswordChange={onPasswordChange} | ||
onPrimaryClick={onPrimaryClick} | ||
password={password} | ||
platform={platform} | ||
/> | ||
</ModalStepWrapper> | ||
); | ||
} | ||
|
||
return ( | ||
<ModalWrapper> | ||
<CreatePassword | ||
isLoading={isLoading} | ||
onPasswordChange={onPasswordChange} | ||
onPrimaryClick={onPrimaryClick} | ||
password={password} | ||
platform={platform} | ||
/> | ||
</ModalWrapper> | ||
); | ||
}; | ||
|
||
export default CreatePasswordModal; |
1 change: 1 addition & 0 deletions
1
packages/wallets/src/features/cfd/modals/CreatePasswordModal/index.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 @@ | ||
export { default as CreatePasswordModal } from './CreatePasswordModal'; |
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
87 changes: 87 additions & 0 deletions
87
packages/wallets/src/features/cfd/modals/EnterPasswordModal/EnterPasswordModal.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,87 @@ | ||
import React, { ComponentProps, FC } from 'react'; | ||
import { ModalStepWrapper, ModalWrapper, WalletButton, WalletButtonGroup } from '../../../../components'; | ||
import useDevice from '../../../../hooks/useDevice'; | ||
import { PlatformDetails } from '../../constants'; | ||
import { EnterPassword } from '../../screens'; | ||
|
||
const EnterPasswordModal: FC<ComponentProps<typeof EnterPassword>> = ({ | ||
isForgotPasswordLoading, | ||
isLoading, | ||
marketType, | ||
onPasswordChange, | ||
onPrimaryClick, | ||
onSecondaryClick, | ||
password, | ||
passwordError, | ||
platform, | ||
setPassword, | ||
}) => { | ||
const { isMobile } = useDevice(); | ||
|
||
const title = `Enter your ${PlatformDetails[platform].title} password`; | ||
|
||
if (isMobile) { | ||
return ( | ||
<ModalStepWrapper | ||
renderFooter={() => { | ||
return ( | ||
<WalletButtonGroup isFullWidth> | ||
<WalletButton | ||
isFullWidth | ||
isLoading={isForgotPasswordLoading} | ||
onClick={onSecondaryClick} | ||
size={isMobile ? 'lg' : 'md'} | ||
variant='outlined' | ||
> | ||
Forgot password? | ||
</WalletButton> | ||
<WalletButton | ||
disabled={!password || isLoading} | ||
isFullWidth | ||
isLoading={isLoading} | ||
onClick={onPrimaryClick} | ||
size={isMobile ? 'lg' : 'md'} | ||
> | ||
Add account | ||
</WalletButton> | ||
</WalletButtonGroup> | ||
); | ||
}} | ||
title={title} | ||
> | ||
<EnterPassword | ||
isForgotPasswordLoading={isForgotPasswordLoading} | ||
isLoading={isLoading} | ||
marketType={marketType} | ||
onPasswordChange={onPasswordChange} | ||
onPrimaryClick={onPrimaryClick} | ||
onSecondaryClick={onSecondaryClick} | ||
password={password} | ||
passwordError={passwordError} | ||
platform={platform} | ||
setPassword={setPassword} | ||
/> | ||
</ModalStepWrapper> | ||
); | ||
} | ||
|
||
return ( | ||
<ModalWrapper> | ||
<EnterPassword | ||
isForgotPasswordLoading={isForgotPasswordLoading} | ||
isLoading={isLoading} | ||
marketType={marketType} | ||
modalTitle={title} | ||
onPasswordChange={onPasswordChange} | ||
onPrimaryClick={onPrimaryClick} | ||
onSecondaryClick={onSecondaryClick} | ||
password={password} | ||
passwordError={passwordError} | ||
platform={platform} | ||
setPassword={setPassword} | ||
/> | ||
</ModalWrapper> | ||
); | ||
}; | ||
|
||
export default EnterPasswordModal; |
1 change: 1 addition & 0 deletions
1
packages/wallets/src/features/cfd/modals/EnterPasswordModal/index.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 @@ | ||
export { default as EnterPasswordModal } from './EnterPasswordModal'; |
Oops, something went wrong.