Refactor XpDropClaimBanner (#668)

* Refactor XpDropClaimBanner

* Rename XpDropClaimBanner -> XpDropBanner

Author: vyorkin

src/ui/features/xp-drop/components/XpDropBanner/XpDropBanner.tsx

@@ -0,0 +1,63 @@
+import React from 'react';
+import DropIcon from 'jsx:src/ui/assets/drop.svg';
+import { HStack } from 'src/ui/ui-kit/HStack';
+import { GradientBorder } from 'src/ui/components/GradientBorder';
+import { UIText } from 'src/ui/ui-kit/UIText';
+import { Button } from 'src/ui/ui-kit/Button';
+import { UnstyledLink } from 'src/ui/ui-kit/UnstyledLink';
+import { emitter } from 'src/ui/shared/events';
+import { useLocation } from 'react-router-dom';
+import { useWalletsMetaByChunks } from 'src/ui/shared/requests/useWalletsMetaByChunks';
+import { FEATURE_LOYALTY_FLOW } from 'src/env/config';
+
+const bannerGradient = 'linear-gradient(90deg, #a024ef 0%, #fdbb6c 100%)';
+
+export function XpDropBanner({ address }: { address: string }) {
+  const { pathname } = useLocation();
+  const { data: walletsMeta } = useWalletsMetaByChunks({
+    addresses: [address],
+    suspense: false,
+  });
+
+  const walletMeta = walletsMeta?.[0];
+  const isVisible =
+    FEATURE_LOYALTY_FLOW === 'on' && Boolean(walletMeta?.membership.retro);
+
+  return isVisible ? (
+    <div style={{ paddingInline: 16 }}>
+      <GradientBorder
+        borderColor={bannerGradient}
+        borderWidth={2}
+        borderRadius={16}
+        backgroundColor="var(--white)"
+      >
+        <HStack gap={8} justifyContent="space-between" style={{ padding: 8 }}>
+          <HStack gap={8} alignItems="center" justifyContent="center">
+            <DropIcon style={{ marginLeft: 8 }} />
+            <UIText kind="small/accent">Claim Your XP & Level</UIText>
+          </HStack>
+          <Button
+            kind="ghost"
+            size={36}
+            as={UnstyledLink}
+            to="/xp-drop/onboarding"
+            onClick={() => {
+              emitter.emit('buttonClicked', {
+                buttonScope: 'Loaylty',
+                buttonName: 'Claim XP',
+                pathname,
+              });
+            }}
+            style={{
+              minWidth: 109,
+              background: bannerGradient,
+              color: 'var(--always-white)',
+            }}
+          >
+            Claim
+          </Button>
+        </HStack>
+      </GradientBorder>
+    </div>
+  ) : null;
+}

src/ui/features/xp-drop/components/XpDropBanner/index.ts

@@ -0,0 +1 @@
+export { XpDropBanner } from './XpDropBanner';

src/ui/features/xp-drop/components/XpDropClaimBanner/XpDropClaimBanner.tsx

@@ -61,13 +61,12 @@ import { useEvent } from 'src/ui/shared/useEvent';
 import { useWalletPortfolio } from 'src/modules/zerion-api/hooks/useWalletPortfolio';
 import { useHttpClientSource } from 'src/modules/zerion-api/hooks/useHttpClientSource';
 import { SidepanelOptionsButton } from 'src/shared/sidepanel/SidepanelOptionsButton';
-import { XpDropClaimBanner } from 'src/ui/features/xp-drop/components/XpDropClaimBanner';
+import { XpDropBanner } from 'src/ui/features/xp-drop/components/XpDropBanner';
 import { UnstyledAnchor } from 'src/ui/ui-kit/UnstyledAnchor';
 import { useWalletParams } from 'src/ui/shared/requests/useWalletParams';
 import { FEATURE_LOYALTY_FLOW } from 'src/env/config';
 import { useRemoteConfigValue } from 'src/modules/remote-config/useRemoteConfigValue';
 import type { ExternallyOwnedAccount } from 'src/shared/types/ExternallyOwnedAccount';
-import { useWalletsMetaByChunks } from 'src/ui/shared/requests/useWalletsMetaByChunks';
 import { emitter } from 'src/ui/shared/events';
 import { HistoryList } from '../History/History';
 import { SettingsLinkIcon } from '../Settings/SettingsLinkIcon';
@@ -364,27 +363,6 @@ function ReadonlyMode() {
   );
 }
 
-function XpBannerComponent({ address }: { address: string }) {
-  const { data: walletsMeta } = useWalletsMetaByChunks({
-    addresses: [address],
-    suspense: false,
-  });
-
-  const walletMeta = walletsMeta?.[0];
-  const claimXpBannerVisible =
-    FEATURE_LOYALTY_FLOW === 'on' && Boolean(walletMeta?.membership.retro);
-
-  if (claimXpBannerVisible) {
-    return (
-      <div style={{ paddingInline: 16 }}>
-        <XpDropClaimBanner />
-      </div>
-    );
-  } else {
-    return null;
-  }
-}
-
 function OverviewComponent() {
   useBodyStyle(
     useMemo(() => ({ ['--background' as string]: 'var(--z-index-0)' }), [])
@@ -758,7 +736,7 @@ function OverviewComponent() {
                   >
                     <VStack gap={20}>
                       {!isReadonlyGroup && loyaltyEnabled ? (
-                        <XpBannerComponent address={params.address} />
+                        <XpDropBanner address={params.address} />
                       ) : null}
                       <Positions
                         dappChain={dappChain || null}