diff --git a/src/ui/features/xp-drop/XpDropClaimFlow/XpDropClaim.tsx b/src/ui/features/xp-drop/XpDropClaimFlow/XpDropClaim/XpDropClaim.tsx similarity index 86% rename from src/ui/features/xp-drop/XpDropClaimFlow/XpDropClaim.tsx rename to src/ui/features/xp-drop/XpDropClaimFlow/XpDropClaim/XpDropClaim.tsx index 8986985d4..306cb4948 100644 --- a/src/ui/features/xp-drop/XpDropClaimFlow/XpDropClaim.tsx +++ b/src/ui/features/xp-drop/XpDropClaimFlow/XpDropClaim/XpDropClaim.tsx @@ -4,7 +4,6 @@ import { normalizeAddress } from 'src/shared/normalizeAddress'; import type { BareWallet } from 'src/shared/types/BareWallet'; import type { DeviceAccount } from 'src/shared/types/Device'; import type { ExternallyOwnedAccount } from 'src/shared/types/ExternallyOwnedAccount'; -import { isReadonlyContainer } from 'src/shared/types/validators'; import { useBackgroundKind } from 'src/ui/components/Background'; import ArrowRightIcon from 'jsx:src/ui/assets/arrow-right.svg'; import DownIcon from 'jsx:src/ui/assets/chevron-down.svg'; @@ -265,6 +264,50 @@ function XpLevel({ claimedXp, level }: { claimedXp: number; level: number }) { ); } +export function Congratulations({ + selectedWallet, + retro, + totalXp, + onWalletSelect, +}: { + selectedWallet: ExternallyOwnedAccount; + retro: RetrodropInfo; + totalXp: number; + onWalletSelect: () => void; +}) { + return ( + <> + + + + + + + + + + + + + + + + + + + ); +} + export function XpDropClaim() { useBackgroundKind({ kind: 'white' }); const navigate = useNavigate(); @@ -287,19 +330,16 @@ export function XpDropClaim() { }); const { data: walletGroups, ...walletGroupsQuery } = useWalletGroups(); - const { ownedWalletGroups, ownedWalletAddresses } = useMemo(() => { - const ownedWalletGroups = - walletGroups?.filter( - (group) => !isReadonlyContainer(group.walletContainer) - ) ?? []; - const ownedWalletAddresses = ownedWalletGroups - .flatMap((group) => group.walletContainer.wallets) - .map((wallet) => wallet.address); - return { ownedWalletGroups, ownedWalletAddresses }; - }, [walletGroups]); + const walletAddresses = useMemo( + () => + walletGroups + ?.flatMap((group) => group.walletContainer.wallets) + .map((wallet) => wallet.address), + [walletGroups] + ); const { data: walletsMeta, ...walletsMetaQuery } = useWalletsMetaByChunks({ - addresses: ownedWalletAddresses, + addresses: walletAddresses ?? [], }); const [selectedWallet, setSelectedWallet] = useState(currentWallet); @@ -375,7 +415,7 @@ export function XpDropClaim() { const eligibleAddressesSet = new Set(eligibleAddresses); - const eligibleWalletGroups = ownedWalletGroups + const eligibleWalletGroups = walletGroups ?.map((group) => ({ id: group.id, walletContainer: { @@ -391,7 +431,7 @@ export function XpDropClaim() { .filter((group) => group.walletContainer.wallets.length > 0); return { eligibleWalletGroups, eligibleAddresses }; - }, [ownedWalletGroups, walletsMeta, claimedInfo]); + }, [walletGroups, walletsMeta, claimedInfo]); const retro = personalSignMutation.isSuccess ? claimedInfo?.meta?.membership.retro @@ -428,17 +468,17 @@ export function XpDropClaim() { const totalXp = retro.zerion.total + retro.global.total; - return ( + return personalSignMutation.isSuccess ? ( + walletSelectDialogRef.current?.showModal()} + /> + ) : ( <> - + @@ -450,7 +490,7 @@ export function XpDropClaim() { /> - {eligibleAddresses.length > 1 && !personalSignMutation.isSuccess ? ( + {eligibleAddresses.length > 1 ? ( )} - {personalSignMutation.isSuccess ? ( - - ) : ( - <> - - - - - - )} + + + + { - if (!personalSignMutation.isSuccess) { - emitter.emit('buttonClicked', { - buttonScope: 'Loaylty', - buttonName: 'Claim XP', - pathname, - }); - personalSignAndClaim(); - } else { - walletSelectDialogRef.current?.showModal(); - } + emitter.emit('buttonClicked', { + buttonScope: 'Loaylty', + buttonName: 'Claim XP', + pathname, + }); + personalSignAndClaim(); }} buttonKind="primary" holdToSign={false} @@ -530,11 +557,6 @@ export function XpDropClaim() { - ) : personalSignMutation.isSuccess ? ( - - Next Wallet - - ) : ( `Claim ${formatXp(totalXp)} XP` )} diff --git a/src/ui/features/xp-drop/XpDropClaimFlow/XpDropClaim/index.ts b/src/ui/features/xp-drop/XpDropClaimFlow/XpDropClaim/index.ts new file mode 100644 index 000000000..49a85e3c8 --- /dev/null +++ b/src/ui/features/xp-drop/XpDropClaimFlow/XpDropClaim/index.ts @@ -0,0 +1 @@ +export { XpDropClaim } from './XpDropClaim'; diff --git a/src/ui/features/xp-drop/XpDropClaimFlow/styles.module.css b/src/ui/features/xp-drop/XpDropClaimFlow/XpDropClaim/styles.module.css similarity index 100% rename from src/ui/features/xp-drop/XpDropClaimFlow/styles.module.css rename to src/ui/features/xp-drop/XpDropClaimFlow/XpDropClaim/styles.module.css diff --git a/src/ui/features/xp-drop/XpDropClaimFlow/XpDropClaimFlow.tsx b/src/ui/features/xp-drop/XpDropClaimFlow/XpDropClaimFlow.tsx index 3df084da1..d00a9247b 100644 --- a/src/ui/features/xp-drop/XpDropClaimFlow/XpDropClaimFlow.tsx +++ b/src/ui/features/xp-drop/XpDropClaimFlow/XpDropClaimFlow.tsx @@ -1,7 +1,7 @@ import React from 'react'; import { Route, Routes } from 'react-router-dom'; -import { XpDropClaim } from './XpDropClaim'; import { XpDropClaimSuccess } from './XpDropClaimSuccess'; +import { XpDropClaim } from './XpDropClaim'; export function XpDropClaimFlow() { return (