feat(discoverability): banners above market selection table and marke…

…ts page (#868)

public/configs/markets.json

@@ -6519,7 +6519,16 @@
         ], 
         "websiteLink": "https://magamemecoin.com/", 
         "whitepaperLink": null
-    }, 
+    },
+    "TRUMPWIN-USD": {
+        "coinMarketCapsLink": null, 
+        "name": "TRUMPWIN", 
+        "tags": [
+            "Prediction Market"
+        ], 
+        "websiteLink": "https://polymarket.com/event/presidential-election-winner-2024", 
+        "whitepaperLink": null
+    },
     "TRVL-USD": {
         "coinMarketCapsLink": "https://coinmarketcap.com/currencies/trvl/", 
         "name": "TRVL", 

src/components/AlertMessage.tsx

@@ -49,6 +49,12 @@ const AlertContainer = styled.div<StyleProps>`
           --alert-background: var(--color-layer-7);
         `;
       }
+      case AlertType.Notice: {
+        return css`
+          --alert-accent-color: var(--color-accent);
+          --alert-background: var(--color-accent-faded);
+        `;
+      }
       case AlertType.Success: {
         return css`
           --alert-accent-color: var(--color-success);

src/components/AssetIcon.tsx

@@ -556,6 +556,7 @@ const assetIcons = {
   TRIBE: '/currencies/tribe.png',
   TRU: '/currencies/tru.png',
   TRUMP: '/currencies/trump.png',
+  TRUMPWIN: '/currencies/trumpwin.png',
   TRVL: '/currencies/trvl.png',
   TRX: '/currencies/trx.png',
   TT: '/currencies/tt.png',

src/components/BaseButton.tsx

@@ -110,6 +110,7 @@ const buttonSizeVariants = {
 const buttonShapeVariants = {
   [ButtonShape.Circle]: css`
     --button-width: var(--button-height);
+    min-width: var(--button-width);
     --button-radius: 50%;
   `,
   [ButtonShape.Rectangle]: css`

src/constants/alerts.ts

@@ -1,6 +1,7 @@
 export enum AlertType {
   Error = 'Error',
   Info = 'Info',
+  Notice = 'Notice',
   Success = 'Success',
   Warning = 'Warning',
 }

src/constants/localStorage.ts

@@ -28,6 +28,10 @@ export enum LocalStorageKey {
   TradingViewChartConfig = 'dydx.TradingViewChartConfig',
   HasSeenLaunchIncentives = 'dydx.HasSeenLaunchIncentives',
   DefaultToAllMarketsInPositionsOrdersFills = 'dydx.DefaultToAllMarketsInPositionsOrdersFills',
+
+  // Discoverability
+  HasSeenElectionBannerTRUMPWIN = 'dydx.HasSeenElectionBannerTRUMPWIN',
+  HasSeenTradeFormMessageTRUMPWIN = 'dydx.HasSeenTradeFormMessageTRUMPWIN',
 }
 
 export const LOCAL_STORAGE_VERSIONS = {

src/constants/markets.ts

@@ -46,7 +46,7 @@ export const MARKET_FILTER_OPTIONS: Record<
     label: STRING_KEYS.RECENTLY_LISTED,
   },
   [MarketFilters.PREDICTION_MARKET]: {
-    // TODO: (TRA-516): Update string when v4-localization contains stringKey.
+    // TODO: (TRA-528): Update string when v4-localization contains stringKey.
     label: undefined,
     isNew: true,
   },

src/constants/unicode.ts

@@ -1,5 +1,4 @@
 export const UNICODE = {
   MINUS: '\u2212',
   PLUS: '\u002b',
-  ARROW_RIGHT: '\u2192',
 };

src/lib/testFlags.ts

@@ -47,6 +47,10 @@ class TestFlags {
   get referrer() {
     return this.queryParams.utm_source;
   }
+
+  get enablePredictionMarketPerp() {
+    return !!this.queryParams.prediction;
+  }
 }
 
 export const testFlags = new TestFlags();

src/pages/markets/Markets.tsx

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useMemo, useState } from 'react';
 
 import { useNavigate } from 'react-router-dom';
 import styled from 'styled-components';
@@ -16,10 +16,14 @@ import { layoutMixins } from '@/styles/layoutMixins';
 
 import { Button } from '@/components/Button';
 import { ContentSectionHeader } from '@/components/ContentSectionHeader';
+import { IconName } from '@/components/Icon';
+import { IconButton } from '@/components/IconButton';
 import { Switch } from '@/components/Switch';
 import { MarketsStats } from '@/views/MarketsStats';
 import { MarketsTable } from '@/views/tables/MarketsTable';
 
+import { testFlags } from '@/lib/testFlags';
+
 const Markets = () => {
   const stringGetter = useStringGetter();
   const navigate = useNavigate();
@@ -28,6 +32,23 @@ const Markets = () => {
 
   useDocumentTitle(stringGetter({ key: STRING_KEYS.MARKETS }));
 
+  const marketsPageBanner = useMemo(() => {
+    // TODO: (TRA-528): Localize text when finallized. Update navigate link to TRUMPWIN-USD (Use Market redux state to ensure existance)
+    if (testFlags.enablePredictionMarketPerp) {
+      return (
+        <$MarketsPageBanner>
+          <span>🇺🇸 Leverage trade the outcome of the U.S. Election</span>
+          <$FlagOverlay />
+          <IconButton
+            iconName={IconName.Arrow}
+            onClick={() => navigate(`${AppRoute.Trade}/TRUMPWIN-USD`)}
+          />
+        </$MarketsPageBanner>
+      );
+    }
+    return null;
+  }, []);
+
   return (
     <$Page>
       <$HeaderSection>
@@ -44,6 +65,7 @@ const Markets = () => {
             )
           }
         />
+        {marketsPageBanner}
         <$Highlights htmlFor="highlights">
           {stringGetter({ key: STRING_KEYS.HIDE })}
 
@@ -79,6 +101,7 @@ const $ContentSectionHeader = styled(ContentSectionHeader)`
     }
   }
 `;
+
 const $HeaderSection = styled.section`
   ${layoutMixins.contentSectionDetached}
 
@@ -91,14 +114,63 @@ const $HeaderSection = styled.section`
     margin-bottom: 1rem;
   }
 `;
+
+const $MarketsPageBanner = styled.div`
+  ${layoutMixins.row}
+  height: 5rem;
+  border-radius: 10px;
+  background-color: var(--color-layer-4);
+  margin-bottom: 1rem;
+  padding: 0 1.5rem;
+  justify-content: space-between;
+  gap: 0.5rem;
+  position: relative;
+  overflow: hidden;
+
+  span {
+    font: var(--font-medium-medium);
+  }
+
+  @media ${breakpoints.desktopSmall} {
+    margin-left: 1rem;
+    margin-right: 1rem;
+  }
+
+  @media ${breakpoints.tablet} {
+    span,
+    button {
+      z-index: 1;
+    }
+  }
+`;
+
+// Note: 573px; is the width of the flag image
+const $FlagOverlay = styled.div`
+  width: 573px;
+  height: 100%;
+  background-image: ${({ theme }) => `
+    linear-gradient(90deg, ${theme.layer4} 0%, ${theme.tooltipBackground} 53%, ${theme.layer4} 99%),
+    url('/AmericanFlag.png')
+  `};
+  background-repeat: no-repeat;
+
+  @media ${breakpoints.mobile} {
+    position: absolute;
+    width: 100%;
+    z-index: 0;
+  }
+`;
+
 const $MarketsTable = styled(MarketsTable)`
   ${layoutMixins.contentSectionAttached}
 `;
+
 const $MarketsStats = styled(MarketsStats)<{
   showHighlights?: boolean;
 }>`
   ${({ showHighlights }) => !showHighlights && 'display: none;'}
 `;
+
 const $Highlights = styled.label`
   align-items: center;
   gap: 1rem;
@@ -118,4 +190,5 @@ const $Highlights = styled.label`
     display: flex;
   }
 `;
+
 export default Markets;

src/views/MarketsDropdown.tsx

@@ -4,10 +4,12 @@ import { useNavigate } from 'react-router-dom';
 import styled, { css, keyframes } from 'styled-components';
 
 import { ButtonSize } from '@/constants/buttons';
+import { LocalStorageKey } from '@/constants/localStorage';
 import { STRING_KEYS } from '@/constants/localization';
 import { MarketFilters, type MarketData } from '@/constants/markets';
 import { AppRoute, MarketsRoute } from '@/constants/routes';
 
+import { useLocalStorage } from '@/hooks/useLocalStorage';
 import { useMarketsData } from '@/hooks/useMarketsData';
 import { useParameterizedSelector } from '@/hooks/useParameterizedSelector';
 import { usePotentialMarkets } from '@/hooks/usePotentialMarkets';
@@ -19,6 +21,8 @@ import { popoverMixins } from '@/styles/popoverMixins';
 import { AssetIcon } from '@/components/AssetIcon';
 import { Button } from '@/components/Button';
 import { DropdownIcon } from '@/components/DropdownIcon';
+import { IconName } from '@/components/Icon';
+import { IconButton } from '@/components/IconButton';
 import { Output, OutputType } from '@/components/Output';
 import { Popover, TriggerType } from '@/components/Popover';
 import { ColumnDef, Table } from '@/components/Table';
@@ -29,6 +33,7 @@ import { getMarketMaxLeverage } from '@/state/perpetualsSelectors';
 
 import { calculateMarketMaxLeverage } from '@/lib/marketsHelpers';
 import { MustBigNumber } from '@/lib/numbers';
+import { testFlags } from '@/lib/testFlags';
 
 import { MarketFilter } from './MarketFilter';
 
@@ -120,7 +125,7 @@ const MarketsDropdownContent = ({ onRowAction }: { onRowAction?: (market: Key) =
 
   const slotBottom = useMemo(() => {
     if (filter === MarketFilters.PREDICTION_MARKET) {
-      // TODO: (TRA-516): Localize string when finallized.
+      // TODO: (TRA-528): Localize string when finallized.
       return (
         <$Disclaimer>
           Prediction Markets will settle at $1 if the event occurs as predicted. Otherwise, they
@@ -132,6 +137,28 @@ const MarketsDropdownContent = ({ onRowAction }: { onRowAction?: (market: Key) =
     return null;
   }, [filter]);
 
+  const [hasSeenElectionBannerTrumpWin, setHasSeenElectionBannerTrupmWin] = useLocalStorage({
+    key: LocalStorageKey.HasSeenElectionBannerTRUMPWIN,
+    defaultValue: false,
+  });
+
+  const slotTop = useMemo(() => {
+    if (!hasSeenElectionBannerTrumpWin && testFlags.enablePredictionMarketPerp) {
+      // TODO: (TRA-528): Update localization string when copy is finallized
+      return (
+        <$MarketDropdownBanner>
+          <span>🇺🇸 Trade the U.S. presidential election →</span>
+          <$IconButton
+            onClick={() => setHasSeenElectionBannerTrupmWin(true)}
+            iconName={IconName.Close}
+          />
+        </$MarketDropdownBanner>
+      );
+    }
+
+    return null;
+  }, [hasSeenElectionBannerTrumpWin]);
+
   return (
     <>
       <$Toolbar>
@@ -142,6 +169,7 @@ const MarketsDropdownContent = ({ onRowAction }: { onRowAction?: (market: Key) =
           onSearchTextChange={setSearchFilter}
         />
       </$Toolbar>
+      {slotTop}
       <$ScrollArea>
         <$Table
           withInnerBorders
@@ -365,11 +393,26 @@ const $Toolbar = styled(Toolbar)`
   border-bottom: solid var(--border-width) var(--color-border);
 `;
 
+const $MarketDropdownBanner = styled.div`
+  ${layoutMixins.row}
+  background-color: var(--color-layer-1);
+  padding: 0.9063rem 1rem;
+  font: var(--font-base-medium);
+  color: var(--color-text-1);
+  border-bottom: solid var(--border-width) var(--color-border);
+  justify-content: space-between;
+`;
+
 const $ScrollArea = styled.div`
   ${layoutMixins.scrollArea}
   height: calc(100% - var(--toolbar-height));
 `;
 
+const $IconButton = styled(IconButton)`
+  --button-border: none;
+  --button-backgroundColor: transparent;
+`;
+
 const $Table = styled(Table)`
   --tableCell-padding: 0.5rem 1rem;