Skip to content

Commit 7440de4

Browse files
JoseRFelixJoseRFelix
authored
Add Baby Token Banner (#4072)
1 parent edb905f commit 7440de4

File tree

23 files changed

+217
-3
lines changed

23 files changed

+217
-3
lines changed

‎packages/types/src/feature-flags-types.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@ export type AvailableFlags =
2424
| "bridgeDepositAddress"
2525
| "nomicWithdrawAmount"
2626
| "swapToolTopGainers"
27+
| "babyTokenBanner"
2728
| "moonpay"
2829
| "layerswapcoinbase"
2930
| "kado"

‎packages/web/components/trade-tool/baby-banner.tsx

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
import Image from "next/image";
2+
import Link from "next/link";
3+
import { FunctionComponent } from "react";
4+
5+
import { Icon } from "~/components/assets";
6+
import { IconButton } from "~/components/ui/button";
7+
import { useTranslation } from "~/hooks";
8+
9+
interface BabyBannerProps {
10+
onClose: () => void;
11+
}
12+
13+
export const BabyBanner: FunctionComponent<BabyBannerProps> = ({ onClose }) => {
14+
const { t } = useTranslation();
15+
16+
return (
17+
<div className="flex flex-col rounded-3xl border-2 border-[rgba(9,5,36,0.4)] bg-osmoverse-900 p-5 gap-4">
18+
<div className="flex justify-between items-start w-full pr-8 relative">
19+
<div className="flex flex-col gap-2">
20+
<div className="flex items-center gap-[3px]">
21+
<span className="subtitle1 text-white-full">
22+
{t("babyBanner.trade")}
23+
</span>
24+
<div className="flex items-center">
25+
<Image
26+
src="/tokens/generated/baby.svg"
27+
alt="BABY token"
28+
width={24}
29+
height={24}
30+
/>
31+
</div>
32+
<span className="subtitle1 text-rust-600">BABY</span>
33+
<span className="subtitle1 text-white-full">
34+
{t("babyBanner.with")}
35+
</span>
36+
</div>
37+
<div className="flex items-center gap-1">
38+
<span className="subtitle1 text-white-full">
39+
{t("babyBanner.anyTokenOnAnyNetworkOn")}{" "}
40+
<Image
41+
src="/images/polaris-logo.svg"
42+
alt="Polaris"
43+
width={70}
44+
height={16}
45+
className="inline-block align-middle ml-1"
46+
/>
47+
</span>
48+
</div>
49+
</div>
50+
<IconButton
51+
aria-label="Close"
52+
data-testid="close"
53+
className="absolute -right-2 -top-2 z-50 !h-10 !w-10 cursor-pointer !bg-transparent !py-0 text-wosmongton-400 hover:text-osmoverse-300"
54+
icon={<Icon id="close" width={16} height={16} />}
55+
onClick={onClose}
56+
/>
57+
</div>
58+
<div className="flex justify-between items-end w-full sm:flex-col sm:gap-2 sm:items-start">
59+
<span className="text-osmoverse-300 body2">
60+
{t("babyBanner.limitedTimeOnly")}
61+
</span>
62+
<Link
63+
target="_blank"
64+
href="https://beta.polaris.app/tokens/BABY?toToken=ubbn&toChain=cosmos:bbn-1"
65+
className="flex items-center justify-center h-8 px-3 py-1 bg-wosmongton-100 rounded-full transition-colors duration-150 hover:bg-wosmongton-200"
66+
>
67+
<span className="text-osmoverse-1000 body2 gap-1 flex items-center">
68+
{t("babyBanner.skipWaitlist")}{" "}
69+
<Icon id="arrow-up-right" width={16} height={16} />
70+
</span>
71+
</Link>
72+
</div>
73+
</div>
74+
);
75+
};

‎packages/web/components/trade-tool/index.tsx

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,7 @@ export const TradeTool: FunctionComponent<TradeToolProps> = observer(
5858
}, [tab]);
5959

6060
return (
61-
<>
61+
<div className="flex flex-col gap-3">
6262
<div className="relative flex flex-col gap-3 rounded-3xl bg-osmoverse-900 px-5 pt-5 pb-3 sm:px-4 sm:pt-4 sm:pb-2">
6363
<div className="flex w-full items-center justify-between md:gap-2">
6464
<SwapToolTabs activeTab={tab} setTab={setTab} />
@@ -130,10 +130,11 @@ export const TradeTool: FunctionComponent<TradeToolProps> = observer(
130130
}
131131
}, [page, swapToolProps, tab, previousTrade, setPreviousTrade])}
132132
</div>
133+
133134
{wallet?.isWalletConnected && (
134135
<Link
135136
href="/transactions?tab=orders&fromPage=swap"
136-
className="my-3 flex items-center justify-between rounded-2xl border border-solid border-osmoverse-800/50 bg-osmoverse-1000 py-2 px-4 hover:bg-osmoverse-850"
137+
className="flex items-center justify-between rounded-2xl border border-solid border-osmoverse-800/50 bg-osmoverse-1000 py-2 px-4 hover:bg-osmoverse-850"
137138
>
138139
<div className="flex items-center gap-3">
139140
<div className="flex h-10 w-10 items-center justify-center">
@@ -160,7 +161,7 @@ export const TradeTool: FunctionComponent<TradeToolProps> = observer(
160161
</div>
161162
</Link>
162163
)}
163-
</>
164+
</div>
164165
);
165166
}
166167
);

‎packages/web/hooks/use-feature-flags.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,7 @@ const defaultFlags: Record<AvailableFlags, boolean> = {
3030
bridgeDepositAddress: false,
3131
nomicWithdrawAmount: false,
3232
swapToolTopGainers: false,
33+
babyTokenBanner: false,
3334
moonpay: true,
3435
layerswapcoinbase: true,
3536
kado: true,

‎packages/web/localizations/de.json

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1315,5 +1315,12 @@
13151315
"conversionFees": "Umtauschgebühren",
13161316
"free": "Frei",
13171317
"unavailable": "Derzeit nicht verfügbar. Versuchen Sie es später erneut."
1318+
},
1319+
"babyBanner": {
1320+
"limitedTimeOnly": "Nur für begrenzte Zeit",
1321+
"skipWaitlist": "Überspringen Sie die Warteliste",
1322+
"anyTokenOnAnyNetworkOn": "jedes Token in jedem Netzwerk auf",
1323+
"trade": "Handel",
1324+
"with": "mit"
13181325
}
13191326
}

‎packages/web/localizations/en.json

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1315,5 +1315,12 @@
13151315
"conversionFees": "Conversion fees",
13161316
"free": "Free",
13171317
"unavailable": "Currently unavailable. Try again later."
1318+
},
1319+
"babyBanner": {
1320+
"limitedTimeOnly": "Limited time only",
1321+
"skipWaitlist": "Skip the waitlist",
1322+
"anyTokenOnAnyNetworkOn": "any token on any network on",
1323+
"trade": "Trade",
1324+
"with": "with"
13181325
}
13191326
}

‎packages/web/localizations/es.json

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1315,5 +1315,12 @@
13151315
"conversionFees": "Tarifas de conversión",
13161316
"free": "Gratis",
13171317
"unavailable": "Actualmente no disponible. Inténtalo de nuevo más tarde."
1318+
},
1319+
"babyBanner": {
1320+
"limitedTimeOnly": "Solo por tiempo limitado",
1321+
"skipWaitlist": "Saltar la lista de espera",
1322+
"anyTokenOnAnyNetworkOn": "cualquier token en cualquier red en",
1323+
"trade": "Comercio",
1324+
"with": "con"
13181325
}
13191326
}

‎packages/web/localizations/fa.json

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1315,5 +1315,12 @@
13151315
"conversionFees": "هزینه های تبدیل",
13161316
"free": "رایگان",
13171317
"unavailable": "در حال حاضر در دسترس نیست. بعداً دوباره امتحان کنید."
1318+
},
1319+
"babyBanner": {
1320+
"limitedTimeOnly": "فقط زمان محدود",
1321+
"skipWaitlist": "از لیست انتظار رد شوید",
1322+
"anyTokenOnAnyNetworkOn": "هر توکنی در هر شبکه ای در",
1323+
"trade": "تجارت",
1324+
"with": "با"
13181325
}
13191326
}

‎packages/web/localizations/fr.json

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1315,5 +1315,12 @@
13151315
"conversionFees": "Frais de conversion",
13161316
"free": "Gratuit",
13171317
"unavailable": "Actuellement indisponible. Réessayez plus tard."
1318+
},
1319+
"babyBanner": {
1320+
"limitedTimeOnly": "Durée limitée seulement",
1321+
"skipWaitlist": "Évitez la liste d'attente",
1322+
"anyTokenOnAnyNetworkOn": "n'importe quel jeton sur n'importe quel réseau sur",
1323+
"trade": "Commerce",
1324+
"with": "avec"
13181325
}
13191326
}

‎packages/web/localizations/gu.json

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1315,5 +1315,12 @@
13151315
"conversionFees": "રૂપાંતર ફી",
13161316
"free": "મફત",
13171317
"unavailable": "હાલમાં અનુપલબ્ધ. પછીથી ફરી પ્રયાસ કરો."
1318+
},
1319+
"babyBanner": {
1320+
"limitedTimeOnly": "મર્યાદિત સમય માટે જ",
1321+
"skipWaitlist": "રાહ જોવાની સૂચિ છોડી દો",
1322+
"anyTokenOnAnyNetworkOn": "કોઈપણ નેટવર્ક પર કોઈપણ ટોકન",
1323+
"trade": "વેપાર",
1324+
"with": "સાથે"
13181325
}
13191326
}

‎packages/web/localizations/hi.json

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1315,5 +1315,12 @@
13151315
"conversionFees": "रूपांतरण शुल्क",
13161316
"free": "मुक्त",
13171317
"unavailable": "वर्तमान में अनुपलब्ध। बाद में पुनः प्रयास करें।"
1318+
},
1319+
"babyBanner": {
1320+
"limitedTimeOnly": "केवल सीमित समय के लिए",
1321+
"skipWaitlist": "प्रतीक्षा सूची छोड़ें",
1322+
"anyTokenOnAnyNetworkOn": "किसी भी नेटवर्क पर कोई भी टोकन",
1323+
"trade": "व्यापार",
1324+
"with": "साथ"
13181325
}
13191326
}

‎packages/web/localizations/ja.json

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1315,5 +1315,12 @@
13151315
"conversionFees": "変換手数料",
13161316
"free": "無料",
13171317
"unavailable": "現在ご利用いただけません。しばらくしてからもう一度お試しください。"
1318+
},
1319+
"babyBanner": {
1320+
"limitedTimeOnly": "期間限定",
1321+
"skipWaitlist": "順番待ちリストをスキップ",
1322+
"anyTokenOnAnyNetworkOn": "あらゆるネットワーク上のあらゆるトークン",
1323+
"trade": "貿易",
1324+
"with": "と"
13181325
}
13191326
}

‎packages/web/localizations/ko.json

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1315,5 +1315,12 @@
13151315
"conversionFees": "환전 수수료",
13161316
"free": "무료",
13171317
"unavailable": "현재 사용할 수 없습니다. 나중에 다시 시도하세요."
1318+
},
1319+
"babyBanner": {
1320+
"limitedTimeOnly": "기간 한정",
1321+
"skipWaitlist": "대기자 명단 건너뛰기",
1322+
"anyTokenOnAnyNetworkOn": "모든 네트워크의 모든 토큰",
1323+
"trade": "거래",
1324+
"with": "~와 함께"
13181325
}
13191326
}

‎packages/web/localizations/pl.json

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1315,5 +1315,12 @@
13151315
"conversionFees": "Opłaty za konwersję",
13161316
"free": "Bezpłatny",
13171317
"unavailable": "Obecnie niedostępne. Spróbuj ponownie później."
1318+
},
1319+
"babyBanner": {
1320+
"limitedTimeOnly": "Tylko przez ograniczony czas",
1321+
"skipWaitlist": "Omiń listę oczekujących",
1322+
"anyTokenOnAnyNetworkOn": "dowolny token w dowolnej sieci",
1323+
"trade": "Handel",
1324+
"with": "z"
13181325
}
13191326
}

‎packages/web/localizations/pt-br.json

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1315,5 +1315,12 @@
13151315
"conversionFees": "Taxas de conversão",
13161316
"free": "Livre",
13171317
"unavailable": "Atualmente indisponível. Tente novamente mais tarde."
1318+
},
1319+
"babyBanner": {
1320+
"limitedTimeOnly": "Somente por tempo limitado",
1321+
"skipWaitlist": "Pule a lista de espera",
1322+
"anyTokenOnAnyNetworkOn": "qualquer token em qualquer rede em",
1323+
"trade": "Troca",
1324+
"with": "com"
13181325
}
13191326
}

‎packages/web/localizations/ro.json

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1315,5 +1315,12 @@
13151315
"conversionFees": "Taxe de conversie",
13161316
"free": "Gratuit",
13171317
"unavailable": "Momentan indisponibil. Încercați din nou mai târziu."
1318+
},
1319+
"babyBanner": {
1320+
"limitedTimeOnly": "Doar timp limitat",
1321+
"skipWaitlist": "Sari peste lista de asteptare",
1322+
"anyTokenOnAnyNetworkOn": "orice simbol din orice rețea activată",
1323+
"trade": "Comerț",
1324+
"with": "cu"
13181325
}
13191326
}

‎packages/web/localizations/ru.json

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1315,5 +1315,12 @@
13151315
"conversionFees": "Комиссия за конвертацию",
13161316
"free": "Бесплатно",
13171317
"unavailable": "В настоящее время недоступно. Попробуйте еще раз позже."
1318+
},
1319+
"babyBanner": {
1320+
"limitedTimeOnly": "Только ограниченное время",
1321+
"skipWaitlist": "Пропустить лист ожидания",
1322+
"anyTokenOnAnyNetworkOn": "любой токен в любой сети на",
1323+
"trade": "Торговля",
1324+
"with": "с"
13181325
}
13191326
}

‎packages/web/localizations/tr.json

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1315,5 +1315,12 @@
13151315
"conversionFees": "Dönüşüm ücretleri",
13161316
"free": "Özgür",
13171317
"unavailable": "Şu anda mevcut değil. Daha sonra tekrar deneyin."
1318+
},
1319+
"babyBanner": {
1320+
"limitedTimeOnly": "Sadece sınırlı bir süre için",
1321+
"skipWaitlist": "Bekleme listesini atlayın",
1322+
"anyTokenOnAnyNetworkOn": "herhangi bir ağdaki herhangi bir belirteç",
1323+
"trade": "Ticaret",
1324+
"with": "ile"
13181325
}
13191326
}

‎packages/web/localizations/zh-cn.json

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1315,5 +1315,12 @@
13151315
"conversionFees": "转换费",
13161316
"free": "自由的",
13171317
"unavailable": "目前不可用。请稍后重试。"
1318+
},
1319+
"babyBanner": {
1320+
"limitedTimeOnly": "仅限时",
1321+
"skipWaitlist": "跳过候补名单",
1322+
"anyTokenOnAnyNetworkOn": "任何网络上的任何令牌",
1323+
"trade": "贸易",
1324+
"with": "和"
13181325
}
13191326
}

‎packages/web/localizations/zh-hk.json

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1315,5 +1315,12 @@
13151315
"conversionFees": "轉換費",
13161316
"free": "自由的",
13171317
"unavailable": "目前不可用。稍後再試。"
1318+
},
1319+
"babyBanner": {
1320+
"limitedTimeOnly": "僅限時",
1321+
"skipWaitlist": "跳過候補名單",
1322+
"anyTokenOnAnyNetworkOn": "任何網路上的任何令牌",
1323+
"trade": "貿易",
1324+
"with": "和"
13181325
}
13191326
}

‎packages/web/localizations/zh-tw.json

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1315,5 +1315,12 @@
13151315
"conversionFees": "轉換費",
13161316
"free": "自由的",
13171317
"unavailable": "目前不可用。稍後再試。"
1318+
},
1319+
"babyBanner": {
1320+
"limitedTimeOnly": "僅限時",
1321+
"skipWaitlist": "跳過候補名單",
1322+
"anyTokenOnAnyNetworkOn": "任何網路上的任何令牌",
1323+
"trade": "貿易",
1324+
"with": "和"
13181325
}
13191326
}

‎packages/web/pages/index.tsx

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ import {
1212
import { ClientOnly } from "~/components/client-only";
1313
import { ErrorBoundary } from "~/components/error/error-boundary";
1414
import { TradeTool } from "~/components/trade-tool";
15+
import { BabyBanner } from "~/components/trade-tool/baby-banner";
1516
import { EventName } from "~/config";
1617
import {
1718
useAmplitudeAnalytics,
@@ -33,6 +34,7 @@ const Home = () => {
3334

3435
const [previousTrade, setPreviousTrade] =
3536
useLocalStorage<PreviousTrade>(SwapPreviousTradeKey);
37+
const [showBanner, setShowBanner] = useLocalStorage("babyTokenBanner", true);
3638

3739
useAmplitudeAnalytics({
3840
onLoadEvent: [EventName.Swap.pageViewed, { isOnHome: true }],
@@ -61,6 +63,9 @@ const Home = () => {
6163
setPreviousTrade={setPreviousTrade}
6264
/>
6365
</ClientOnly>
66+
{featureFlags.babyTokenBanner && showBanner && (
67+
<BabyBanner onClose={() => setShowBanner(false)} />
68+
)}
6469
{featureFlags.swapToolTopGainers && <TopGainers />}
6570
</div>
6671
</div>

0 commit comments

Comments
 (0)