feat: promo tip for degen mode (#1684)

rainbow-me · Sep 5, 2024 · 59f4dc3 · 59f4dc3
1 parent c4dda6f
commit 59f4dc3
Show file tree

Hide file tree

Showing 3 changed files with 86 additions and 5 deletions.
diff --git a/src/core/state/quickPromo/index.ts b/src/core/state/quickPromo/index.ts
@@ -6,6 +6,7 @@ export enum promoTypes {
   command_k = 'command_k',
   wallet_switcher = 'wallet_switcher',
   network_settings = 'network_settings',
+  degen_mode = 'degen_mode',
 }
 export type PromoTypes = keyof typeof promoTypes;
 
@@ -20,6 +21,7 @@ export const quickPromoStore = createStore<QuickPromoStore>(
       command_k: false,
       wallet_switcher: false,
       network_settings: false,
+      degen_mode: false,
     },
     setSeenPromo: (key: PromoTypes) => {
       const seenPromos = get().seenPromos;

diff --git a/src/entries/popup/pages/swap/index.tsx b/src/entries/popup/pages/swap/index.tsx
@@ -7,11 +7,13 @@ import config from '~/core/firebase/remoteConfig';
 import { i18n } from '~/core/languages';
 import { shortcuts } from '~/core/references/shortcuts';
 import { useCurrentAddressStore, useGasStore } from '~/core/state';
+import { useFeatureFlagsStore } from '~/core/state/currentSettings/featureFlags';
 import {
   computeUniqueIdForHiddenAsset,
   useHiddenAssetStore,
 } from '~/core/state/hiddenAssets/hiddenAssets';
 import { usePopupInstanceStore } from '~/core/state/popupInstances';
+import { promoTypes, useQuickPromoStore } from '~/core/state/quickPromo';
 import { useSelectedTokenStore } from '~/core/state/selectedToken';
 import { ParsedSearchAsset, ParsedUserAsset } from '~/core/types/assets';
 import { ChainId } from '~/core/types/chains';
@@ -219,6 +221,80 @@ const MissingPriceExplanation = ({
   );
 };
 
+const DegenModePromo = ({ onClick }: { onClick: () => void }) => {
+  const { featureFlags } = useFeatureFlagsStore();
+  const { seenPromos, setSeenPromo } = useQuickPromoStore();
+  const isDegenModeEnabled = useDegenMode((s) => s.isDegenModeEnabled);
+
+  if (!featureFlags.degen_mode && !config.degen_mode) return null;
+  if (seenPromos.degen_mode || isDegenModeEnabled) return null;
+
+  return (
+    <ButtonOverflow>
+      <Box
+        testId={'swap-promo-degen-mode'}
+        paddingHorizontal="20px"
+        onClick={() => {
+          setSeenPromo(promoTypes.degen_mode);
+          onClick();
+        }}
+      >
+        <Box
+          paddingVertical="10px"
+          paddingHorizontal="12px"
+          borderRadius="round"
+          borderWidth="1px"
+          borderColor="buttonStroke"
+          background="surfacePrimaryElevatedSecondary"
+        >
+          <Inline space="8px" alignVertical="center" alignHorizontal="center">
+            <Inline space="4px" alignVertical="center">
+              <Symbol
+                symbol="bolt.fill"
+                size={16}
+                color={'yellow'}
+                weight="bold"
+              />
+              <Text color="label" size="14pt" weight="bold">
+                {i18n.t('swap.promo.degen_mode.title')}
+              </Text>
+            </Inline>
+          </Inline>
+        </Box>
+      </Box>
+    </ButtonOverflow>
+  );
+};
+
+const SwapAlerts = ({
+  timeEstimate,
+  priceImpact,
+  quote,
+  onClick,
+}: {
+  timeEstimate?: SwapTimeEstimate | null;
+  priceImpact?: SwapPriceImpact;
+  quote: Quote | CrosschainQuote | QuoteError | undefined;
+  onClick: () => void;
+}) => {
+  const showWarning = useMemo(() => {
+    return (
+      priceImpact?.type !== SwapPriceImpactType.none || timeEstimate?.isLongWait
+    );
+  }, [priceImpact?.type, timeEstimate?.isLongWait]);
+
+  const quoteError = (quote as QuoteError)?.error;
+
+  if (showWarning) {
+    return (
+      <SwapWarning timeEstimate={timeEstimate} priceImpact={priceImpact} />
+    );
+  } else if (quote && !quoteError) {
+    return <DegenModePromo onClick={onClick} />;
+  }
+  return null;
+};
+
 function SwapButton({
   quote,
   assetToSell,
@@ -813,14 +889,12 @@ export function Swap({ bridge = false }: { bridge?: boolean }) {
                 />
               </AccentColorProvider>
 
-              <SwapWarning
+              <SwapAlerts
                 timeEstimate={timeEstimate}
                 priceImpact={priceImpact}
+                quote={quote}
+                onClick={openSettings}
               />
-              {/* <MissingPriceExplanation
-                assetToBuy={assetToBuy}
-                assetToSell={assetToSell}
-              /> */}
             </Stack>
           </Row>
           <Row height="content">

diff --git a/static/json/languages/en_US.json b/static/json/languages/en_US.json
@@ -733,6 +733,11 @@
         "description": "If you decide to continue, be sure that you are satisfied receiving the quoted amount."
       }
     },
+    "promo": {
+      "degen_mode": {
+        "title": "Try Degen Mode to skip the review"
+      }
+    },
     "aggregators": {
       "rainbow": "Auto"
     },