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 (