-
Notifications
You must be signed in to change notification settings - Fork 5.2k
feat(solana): update add account from opt in solana #31387
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Changes from all commits
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,11 +1,12 @@ | ||
import React, { useContext } from 'react'; | ||
import React, { useContext, useState } from 'react'; | ||
import { useSelector } from 'react-redux'; | ||
|
||
import { | ||
Display, | ||
FlexDirection, | ||
} from '../../../helpers/constants/design-system'; | ||
import { ModalOverlay, ModalContent, Modal } from '../../component-library'; | ||
import { CreateSolanaAccountModal } from '../../multichain/create-solana-account-modal'; | ||
|
||
import { | ||
MetaMetricsEventCategory, | ||
|
@@ -48,12 +49,14 @@ type RenderNotificationProps = { | |
notification: NotificationType; | ||
onClose: () => void; | ||
onNotificationViewed: (id: number) => void; | ||
onCreateSolanaAccount: () => void; | ||
}; | ||
|
||
const renderNotification = ({ | ||
notification, | ||
onClose, | ||
onNotificationViewed, | ||
onCreateSolanaAccount, | ||
}: RenderNotificationProps) => { | ||
const { id, title, image, modal } = notification; | ||
|
||
|
@@ -76,7 +79,7 @@ const renderNotification = ({ | |
{modal?.body && <modal.body.component title={title} />} | ||
{modal?.footer && ( | ||
<modal.footer.component | ||
onAction={handleNotificationClose} | ||
onAction={onCreateSolanaAccount} | ||
onCancel={handleNotificationClose} | ||
/> | ||
)} | ||
|
@@ -87,6 +90,8 @@ const renderNotification = ({ | |
export default function WhatsNewModal({ onClose }: WhatsNewModalProps) { | ||
const t = useContext(I18nContext); | ||
const trackEvent = useContext(MetaMetricsContext); | ||
const [showCreateSolanaAccountModal, setShowCreateSolanaAccountModal] = | ||
useState(false); | ||
|
||
const notifications = useSelector(getSortedAnnouncementsToShow); | ||
|
||
|
@@ -106,26 +111,41 @@ export default function WhatsNewModal({ onClose }: WhatsNewModalProps) { | |
onClose(); | ||
}; | ||
|
||
const handleCreateSolanaAccount = () => { | ||
setShowCreateSolanaAccountModal(true); | ||
}; | ||
|
||
return ( | ||
<Modal | ||
onClose={handleModalClose} | ||
data-testid="whats-new-modal" | ||
isOpen={notifications.length > 0} | ||
isClosedOnOutsideClick | ||
isClosedOnEscapeKey | ||
autoFocus={false} | ||
> | ||
<ModalOverlay /> | ||
|
||
{notifications.map(({ id }) => { | ||
const notification = getTranslatedUINotifications(t)[id]; | ||
|
||
return renderNotification({ | ||
notification, | ||
onClose, | ||
onNotificationViewed: handleNotificationViewed, | ||
}); | ||
})} | ||
</Modal> | ||
<> | ||
<Modal | ||
onClose={() => null} | ||
data-testid="whats-new-modal" | ||
isOpen={notifications.length > 0 && !showCreateSolanaAccountModal} | ||
isClosedOnOutsideClick | ||
isClosedOnEscapeKey | ||
autoFocus={false} | ||
> | ||
<ModalOverlay /> | ||
|
||
{notifications.map(({ id }) => { | ||
const notification = getTranslatedUINotifications(t)[id]; | ||
|
||
return renderNotification({ | ||
notification, | ||
onClose, | ||
onNotificationViewed: handleNotificationViewed, | ||
onCreateSolanaAccount: handleCreateSolanaAccount, | ||
}); | ||
})} | ||
</Modal> | ||
{showCreateSolanaAccountModal && ( | ||
<CreateSolanaAccountModal | ||
onClose={() => { | ||
setShowCreateSolanaAccountModal(false); | ||
handleModalClose(); | ||
}} | ||
/> | ||
)} | ||
</> | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Why is this in parallel with the normal notifications Modal? There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Well it technically is a part of the flow from the notification modal, but I didn't want to use the notification modal itself, as it's a bit limited in terms of the structure (header, content and footer) and it was easier to add it next to it and just hide notification when user decides to add new account. |
||
); | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,107 @@ | ||
import React from 'react'; | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Doesnt this already exist as There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Actually this one is using |
||
import { useSelector } from 'react-redux'; | ||
import { | ||
Box, | ||
Modal, | ||
ModalOverlay, | ||
ModalContent, | ||
ModalHeader, | ||
} from '../../component-library'; | ||
import { | ||
Display, | ||
FlexDirection, | ||
} from '../../../helpers/constants/design-system'; | ||
import { useI18nContext } from '../../../hooks/useI18nContext'; | ||
import { getMetaMaskKeyrings } from '../../../selectors'; | ||
import { CreateSnapAccount } from '../create-snap-account'; | ||
import { SrpList } from '../multi-srp/srp-list'; | ||
import { WalletClientType } from '../../../hooks/accounts/useMultichainWalletSnapClient'; | ||
import { MultichainNetworks } from '../../../../shared/constants/multichain/networks'; | ||
|
||
type CreateSolanaAccountModalProps = { | ||
onClose: () => void; | ||
}; | ||
|
||
export const CreateSolanaAccountModal = ({ | ||
onClose, | ||
}: CreateSolanaAccountModalProps) => { | ||
const t = useI18nContext(); | ||
const [primaryKeyring] = useSelector(getMetaMaskKeyrings); | ||
const [showSrpSelection, setShowSrpSelection] = React.useState(false); | ||
const [showCreateAccount, setShowCreateAccount] = React.useState(true); | ||
const [selectedKeyringId, setSelectedKeyringId] = React.useState( | ||
primaryKeyring.metadata.id, | ||
); | ||
|
||
if (showCreateAccount) { | ||
return ( | ||
<Modal isOpen onClose={onClose}> | ||
<ModalOverlay /> | ||
<ModalContent | ||
className="create-solana-account-modal" | ||
data-testid="create-solana-account-modal" | ||
modalDialogProps={{ | ||
className: 'create-solana-account-modal__dialog', | ||
padding: 0, | ||
display: Display.Flex, | ||
flexDirection: FlexDirection.Column, | ||
}} | ||
> | ||
<ModalHeader padding={4} onClose={onClose}> | ||
{t('createSolanaAccount')} | ||
</ModalHeader> | ||
<Box paddingLeft={4} paddingRight={4} paddingBottom={4}> | ||
<CreateSnapAccount | ||
onActionComplete={async (confirmed: boolean) => { | ||
if (confirmed) { | ||
onClose(); | ||
} else { | ||
setShowCreateAccount(false); | ||
} | ||
}} | ||
selectedKeyringId={selectedKeyringId} | ||
onSelectSrp={() => { | ||
setShowSrpSelection(true); | ||
setShowCreateAccount(false); | ||
}} | ||
clientType={WalletClientType.Solana} | ||
chainId={MultichainNetworks.SOLANA} | ||
/> | ||
</Box> | ||
</ModalContent> | ||
</Modal> | ||
); | ||
} | ||
|
||
if (showSrpSelection) { | ||
return ( | ||
<Modal isOpen onClose={onClose}> | ||
<ModalOverlay /> | ||
<ModalContent | ||
className="create-solana-account-modal" | ||
data-testid="create-solana-account-modal" | ||
modalDialogProps={{ | ||
className: 'create-solana-account-modal__dialog', | ||
padding: 0, | ||
display: Display.Flex, | ||
flexDirection: FlexDirection.Column, | ||
}} | ||
> | ||
<ModalHeader padding={4} onClose={onClose}> | ||
{t('selectSRP')} | ||
</ModalHeader> | ||
<Box paddingLeft={4} paddingRight={4} paddingBottom={4}> | ||
<SrpList | ||
onActionComplete={(keyringId: string) => { | ||
setSelectedKeyringId(keyringId); | ||
setShowCreateAccount(true); | ||
}} | ||
/> | ||
</Box> | ||
</ModalContent> | ||
</Modal> | ||
); | ||
} | ||
|
||
return null; | ||
}; |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1 @@ | ||
export { CreateSolanaAccountModal } from './create-solana-account-modal'; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Why is this
null
? Do we not want to allow the user to close this via thex
?There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
We do, but it's done with:
I changed it to null, because it was also triggered by some other flow, where we didn't want to close it yet.