From 3d8f1f2da208387887b196ec058efcfed34cee3a Mon Sep 17 00:00:00 2001 From: Matt Upham <30577966+mattupham@users.noreply.github.com> Date: Thu, 26 Sep 2024 12:48:34 -0700 Subject: [PATCH 01/16] feat(global): add alloyed assets popup --- .../alert/page-navigation-toast.tsx | 25 +++++++++++++++ packages/web/components/alert/toast.tsx | 31 +++++++++++++++++++ packages/web/components/alert/types.ts | 9 +++--- packages/web/components/layouts/main.tsx | 20 +++++++++++- 4 files changed, 80 insertions(+), 5 deletions(-) create mode 100644 packages/web/components/alert/page-navigation-toast.tsx diff --git a/packages/web/components/alert/page-navigation-toast.tsx b/packages/web/components/alert/page-navigation-toast.tsx new file mode 100644 index 0000000000..c999272bb5 --- /dev/null +++ b/packages/web/components/alert/page-navigation-toast.tsx @@ -0,0 +1,25 @@ +import React from "react"; +import { toast } from "react-toastify"; + +import { Icon } from "~/components/assets"; + +export function showPageNavigationToast(pageName: string) { + toast( +
+ +
+
New Page
+

You are now on: {pageName}

+
+
, + { + position: "bottom-right", + autoClose: 3000, + hideProgressBar: true, + closeOnClick: true, + pauseOnHover: true, + draggable: false, + className: "bg-osmoverse-700", + } + ); +} diff --git a/packages/web/components/alert/toast.tsx b/packages/web/components/alert/toast.tsx index b47ca4798e..bde7e65952 100644 --- a/packages/web/components/alert/toast.tsx +++ b/packages/web/components/alert/toast.tsx @@ -66,6 +66,9 @@ export function displayToast( case ToastType.ONE_CLICK_TRADING: showToast(, toastOptions); break; + case ToastType.ALLOYED_ASSETS: + showToast(, toastOptions); + break; } } @@ -201,3 +204,31 @@ const OneClickTradingToast: FunctionComponent = ({ ); + +const AlloyedAssetsToast: FunctionComponent = ({ + titleTranslationKey, + captionTranslationKey, + captionElement, +}) => ( +
+
+ Alloyed Assets Icon +
+
+
{t(titleTranslationKey)}
+ {captionElement} + {captionTranslationKey && ( +

+ {typeof captionTranslationKey === "string" + ? t(captionTranslationKey) + : t(...captionTranslationKey)} +

+ )} +
+
+); diff --git a/packages/web/components/alert/types.ts b/packages/web/components/alert/types.ts index 087335d8f3..647f068b7a 100644 --- a/packages/web/components/alert/types.ts +++ b/packages/web/components/alert/types.ts @@ -12,8 +12,9 @@ export interface Alert { } export const enum ToastType { - SUCCESS, - ERROR, - LOADING, - ONE_CLICK_TRADING, + SUCCESS = "SUCCESS", + ERROR = "ERROR", + LOADING = "LOADING", + ONE_CLICK_TRADING = "ONE_CLICK_TRADING", + ALLOYED_ASSETS = "ALLOYED_ASSETS", // Add this line } diff --git a/packages/web/components/layouts/main.tsx b/packages/web/components/layouts/main.tsx index 62e74298c9..b9b234798f 100644 --- a/packages/web/components/layouts/main.tsx +++ b/packages/web/components/layouts/main.tsx @@ -1,8 +1,14 @@ import classNames from "classnames"; import { observer } from "mobx-react-lite"; import { useRouter } from "next/router"; -import React, { type FunctionComponent, type PropsWithChildren } from "react"; +import React, { + type FunctionComponent, + type PropsWithChildren, + useEffect, +} from "react"; +import { displayToast } from "~/components/alert/toast"; +import { ToastType } from "~/components/alert/types"; import { IconButton } from "~/components/buttons/icon-button"; import { MainLayoutMenu, MainMenu } from "~/components/main-menu"; import { NavBar } from "~/components/navbar"; @@ -34,6 +40,18 @@ export const MainLayout = observer( ({ selectionTest }) => selectionTest?.test(router.pathname) ?? false ); + useEffect(() => { + displayToast( + { + titleTranslationKey: "transactionSuccessful", + }, + ToastType.ALLOYED_ASSETS, + { + position: "bottom-right", // Add this option to position the toast + } + ); + }, [router]); + return ( {showFixedLogo && ( From 827ff3a84cdcc32706d9f1be5ac0251c4eba4bec Mon Sep 17 00:00:00 2001 From: Matt Upham <30577966+mattupham@users.noreply.github.com> Date: Mon, 30 Sep 2024 09:06:42 -0700 Subject: [PATCH 02/16] feat(Alloyed-assets-popup-modal): add popup modal with icons --- packages/web/components/alert/toast.tsx | 71 ++++++++++++++++-------- packages/web/components/layouts/main.tsx | 3 +- packages/web/public/icons/sprite.svg | 51 +++++++++++++++++ 3 files changed, 101 insertions(+), 24 deletions(-) diff --git a/packages/web/components/alert/toast.tsx b/packages/web/components/alert/toast.tsx index bde7e65952..1b370ac953 100644 --- a/packages/web/components/alert/toast.tsx +++ b/packages/web/components/alert/toast.tsx @@ -9,6 +9,8 @@ import { import { Alert, ToastType } from "~/components/alert"; import { Icon } from "~/components/assets"; +import { Button } from "~/components/buttons"; +import { Checkbox } from "~/components/ui/checkbox"; import { t } from "~/hooks"; export type ToastOptions = Partial & { @@ -22,7 +24,8 @@ export function displayToast( ) { toastOptions = { position: "top-right", - autoClose: type === ToastType.LOADING ? 2000 : 7000, + // autoClose: type === ToastType.LOADING ? 2000 : 7000, + autoClose: 9999999999999999999999, hideProgressBar: true, closeOnClick: false, pauseOnHover: true, @@ -205,30 +208,52 @@ const OneClickTradingToast: FunctionComponent = ({ ); -const AlloyedAssetsToast: FunctionComponent = ({ +export const AlloyedAssetsToast: FunctionComponent = ({ titleTranslationKey, captionTranslationKey, captionElement, -}) => ( -
-
- Alloyed Assets Icon -
-
-
{t(titleTranslationKey)}
- {captionElement} - {captionTranslationKey && ( -

- {typeof captionTranslationKey === "string" - ? t(captionTranslationKey) - : t(...captionTranslationKey)} +}) => { + console.log("titleTranslationKey:", titleTranslationKey); + console.log("captionTranslationKey:", captionTranslationKey); + console.log("captionElement:", captionElement); + + return ( +

+
+
+ + + +
+ +
+ + + +
+
+
+
Variants Detected
+

+ Say goodbye to all those confusing asset variants. Say hello to a more + seamless experience on Osmosis.

- )} +
+ + Remind me later +
+
+
+ + +
+
+
-
-); + ); +}; diff --git a/packages/web/components/layouts/main.tsx b/packages/web/components/layouts/main.tsx index b9b234798f..713d62dc26 100644 --- a/packages/web/components/layouts/main.tsx +++ b/packages/web/components/layouts/main.tsx @@ -41,6 +41,7 @@ export const MainLayout = observer( ); useEffect(() => { + // TODO - check if user has alloyed assets displayToast( { titleTranslationKey: "transactionSuccessful", @@ -50,7 +51,7 @@ export const MainLayout = observer( position: "bottom-right", // Add this option to position the toast } ); - }, [router]); + }, []); return ( diff --git a/packages/web/public/icons/sprite.svg b/packages/web/public/icons/sprite.svg index 1758138b8d..688984c409 100644 --- a/packages/web/public/icons/sprite.svg +++ b/packages/web/public/icons/sprite.svg @@ -1599,5 +1599,56 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + From d6a455c633a91f446f263d8ab5915c79d9966a14 Mon Sep 17 00:00:00 2001 From: Matt Upham <30577966+mattupham@users.noreply.github.com> Date: Wed, 2 Oct 2024 16:39:02 -0700 Subject: [PATCH 03/16] feat(variants-detected): finalize styles --- packages/web/components/alert/toast.tsx | 55 ++++++++++++++++++----- packages/web/public/icons/sprite.svg | 58 ++++++++++++++++++++++++- 2 files changed, 99 insertions(+), 14 deletions(-) diff --git a/packages/web/components/alert/toast.tsx b/packages/web/components/alert/toast.tsx index 1b370ac953..ed3f3095a8 100644 --- a/packages/web/components/alert/toast.tsx +++ b/packages/web/components/alert/toast.tsx @@ -217,40 +217,71 @@ export const AlloyedAssetsToast: FunctionComponent = ({ console.log("captionTranslationKey:", captionTranslationKey); console.log("captionElement:", captionElement); + const onDismiss = () => { + console.log("Dismiss clicked"); + }; + + const onConvert = () => { + console.log("Convert clicked"); + }; + return ( -
+
- - - + + +
- +
-
+
Variants Detected

Say goodbye to all those confusing asset variants. Say hello to a more seamless experience on Osmosis.

-
+
Remind me later
- - + +
diff --git a/packages/web/public/icons/sprite.svg b/packages/web/public/icons/sprite.svg index 688984c409..2cba044d6a 100644 --- a/packages/web/public/icons/sprite.svg +++ b/packages/web/public/icons/sprite.svg @@ -1613,7 +1613,7 @@ - + @@ -1624,7 +1624,7 @@ - + @@ -1650,5 +1650,59 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + From cfd9dcb68e6faaa5ddd54a11ea9e0526e06b0efc Mon Sep 17 00:00:00 2001 From: Matt Upham <30577966+mattupham@users.noreply.github.com> Date: Wed, 2 Oct 2024 16:48:20 -0700 Subject: [PATCH 04/16] feat(variants-detected): i18n --- packages/web/components/alert/toast.tsx | 23 +++++++------------ .../web/components/alert/tx-event-toast.ts | 5 ++-- packages/web/localizations/de.json | 7 +++++- packages/web/localizations/en.json | 9 +++++++- packages/web/localizations/es.json | 7 +++++- packages/web/localizations/fa.json | 7 +++++- packages/web/localizations/fr.json | 7 +++++- packages/web/localizations/gu.json | 7 +++++- packages/web/localizations/hi.json | 7 +++++- packages/web/localizations/ja.json | 7 +++++- packages/web/localizations/ko.json | 7 +++++- packages/web/localizations/pl.json | 7 +++++- packages/web/localizations/pt-br.json | 7 +++++- packages/web/localizations/ro.json | 7 +++++- packages/web/localizations/ru.json | 7 +++++- packages/web/localizations/tr.json | 7 +++++- packages/web/localizations/zh-cn.json | 7 +++++- packages/web/localizations/zh-hk.json | 7 +++++- packages/web/localizations/zh-tw.json | 7 +++++- packages/web/public/icons/sprite.svg | 18 +++++---------- 20 files changed, 120 insertions(+), 47 deletions(-) diff --git a/packages/web/components/alert/toast.tsx b/packages/web/components/alert/toast.tsx index ed3f3095a8..5bf66947f5 100644 --- a/packages/web/components/alert/toast.tsx +++ b/packages/web/components/alert/toast.tsx @@ -208,15 +208,7 @@ const OneClickTradingToast: FunctionComponent = ({
); -export const AlloyedAssetsToast: FunctionComponent = ({ - titleTranslationKey, - captionTranslationKey, - captionElement, -}) => { - console.log("titleTranslationKey:", titleTranslationKey); - console.log("captionTranslationKey:", captionTranslationKey); - console.log("captionElement:", captionElement); - +export const AlloyedAssetsToast = () => { const onDismiss = () => { console.log("Dismiss clicked"); }; @@ -261,14 +253,15 @@ export const AlloyedAssetsToast: FunctionComponent = ({
-
Variants Detected
+
{t("alloyedAssets.title")}

- Say goodbye to all those confusing asset variants. Say hello to a more - seamless experience on Osmosis. + {t("alloyedAssets.caption")}

- Remind me later + + {t("alloyedAssets.remindMeLater")} +
@@ -277,10 +270,10 @@ export const AlloyedAssetsToast: FunctionComponent = ({ onClick={onDismiss} className="!border !border-osmoverse-alpha-700 !text-wosmongton-200" > - Dismiss + {t("alloyedAssets.dismiss")}
diff --git a/packages/web/components/alert/tx-event-toast.ts b/packages/web/components/alert/tx-event-toast.ts index ec719b640b..e2d82e2d85 100644 --- a/packages/web/components/alert/tx-event-toast.ts +++ b/packages/web/components/alert/tx-event-toast.ts @@ -28,9 +28,8 @@ export function toastOnBroadcastFailed( displayToast( { - titleTranslationKey: "transactionFailed", - captionTranslationKey: - prettifyTxError(caption, getChain(chainId).currencies) ?? caption, + titleTranslationKey: "alloyedAssets.title", + captionTranslationKey: "alloyedAssets.caption", }, ToastType.ERROR ); diff --git a/packages/web/localizations/de.json b/packages/web/localizations/de.json index 32d787b425..41ef0a6b22 100644 --- a/packages/web/localizations/de.json +++ b/packages/web/localizations/de.json @@ -1235,5 +1235,10 @@ }, "tradeFee": "Handelsgebühr", "receiveAtLeast": "Erhalten Sie mindestens", - "payAtMost": "Bezahlen Sie höchstens" + "payAtMost": "Bezahlen Sie höchstens", + "alloyedAssets": { + "remindMeLater": "Später erinnern", + "dismiss": "Zurückweisen", + "convert": "Konvertieren" + } } diff --git a/packages/web/localizations/en.json b/packages/web/localizations/en.json index 14ab8d21cd..947fea2b7d 100644 --- a/packages/web/localizations/en.json +++ b/packages/web/localizations/en.json @@ -1235,5 +1235,12 @@ }, "tradeFee": "Trade fee", "receiveAtLeast": "Receive at least", - "payAtMost": "Sell at most" + "payAtMost": "Sell at most", + "alloyedAssets": { + "title": "Variants Detected", + "caption": "Say goodbye to all those confusing asset variants. Say hello to a more seamless experience on Osmosis.", + "remindMeLater": "Remind me later", + "dismiss": "Dismiss", + "convert": "Convert" + } } diff --git a/packages/web/localizations/es.json b/packages/web/localizations/es.json index 9802a4c2b7..762e732c10 100644 --- a/packages/web/localizations/es.json +++ b/packages/web/localizations/es.json @@ -1235,5 +1235,10 @@ }, "tradeFee": "Tarifa de comercio", "receiveAtLeast": "Recibir al menos", - "payAtMost": "Pagar como máximo" + "payAtMost": "Pagar como máximo", + "alloyedAssets": { + "remindMeLater": "Recuérdamelo más tarde", + "dismiss": "Despedir", + "convert": "Convertir" + } } diff --git a/packages/web/localizations/fa.json b/packages/web/localizations/fa.json index 365ffea45e..94a42e9d29 100644 --- a/packages/web/localizations/fa.json +++ b/packages/web/localizations/fa.json @@ -1235,5 +1235,10 @@ }, "tradeFee": "کارمزد تجارت", "receiveAtLeast": "حداقل دریافت کنید", - "payAtMost": "حداکثر پرداخت کنید" + "payAtMost": "حداکثر پرداخت کنید", + "alloyedAssets": { + "remindMeLater": "بعدا به من یادآوری کن", + "dismiss": "رد کردن", + "convert": "تبدیل کنید" + } } diff --git a/packages/web/localizations/fr.json b/packages/web/localizations/fr.json index 71e3760eda..e41c75b52d 100644 --- a/packages/web/localizations/fr.json +++ b/packages/web/localizations/fr.json @@ -1235,5 +1235,10 @@ }, "tradeFee": "Frais de transaction", "receiveAtLeast": "Recevez au moins", - "payAtMost": "Payer au maximum" + "payAtMost": "Payer au maximum", + "alloyedAssets": { + "remindMeLater": "Rappelle-moi plus tard", + "dismiss": "Rejeter", + "convert": "Convertir" + } } diff --git a/packages/web/localizations/gu.json b/packages/web/localizations/gu.json index bd06fafcd2..0de145f2c2 100644 --- a/packages/web/localizations/gu.json +++ b/packages/web/localizations/gu.json @@ -1235,5 +1235,10 @@ }, "tradeFee": "વેપાર ફી", "receiveAtLeast": "ઓછામાં ઓછું પ્રાપ્ત કરો", - "payAtMost": "વધુમાં વધુ ચૂકવણી કરો" + "payAtMost": "વધુમાં વધુ ચૂકવણી કરો", + "alloyedAssets": { + "remindMeLater": "મને પછીથી યાદ કરાવો", + "dismiss": "કાઢી નાખો", + "convert": "કન્વર્ટ કરો" + } } diff --git a/packages/web/localizations/hi.json b/packages/web/localizations/hi.json index 6861129826..4dfa7e5176 100644 --- a/packages/web/localizations/hi.json +++ b/packages/web/localizations/hi.json @@ -1235,5 +1235,10 @@ }, "tradeFee": "व्यापार शुल्क", "receiveAtLeast": "कम से कम प्राप्त करें", - "payAtMost": "अधिकतम भुगतान करें" + "payAtMost": "अधिकतम भुगतान करें", + "alloyedAssets": { + "remindMeLater": "बाद में याद दिलाना", + "dismiss": "नकार देना", + "convert": "बदलना" + } } diff --git a/packages/web/localizations/ja.json b/packages/web/localizations/ja.json index 33f33aabf2..8c0d224c01 100644 --- a/packages/web/localizations/ja.json +++ b/packages/web/localizations/ja.json @@ -1235,5 +1235,10 @@ }, "tradeFee": "取引手数料", "receiveAtLeast": "少なくとも受け取る", - "payAtMost": "最大で支払う" + "payAtMost": "最大で支払う", + "alloyedAssets": { + "remindMeLater": "後で通知する", + "dismiss": "却下する", + "convert": "変換する" + } } diff --git a/packages/web/localizations/ko.json b/packages/web/localizations/ko.json index 2535346f0e..9d08c7ddaa 100644 --- a/packages/web/localizations/ko.json +++ b/packages/web/localizations/ko.json @@ -1235,5 +1235,10 @@ }, "tradeFee": "거래 수수료", "receiveAtLeast": "최소한 받다", - "payAtMost": "최대 지불" + "payAtMost": "최대 지불", + "alloyedAssets": { + "remindMeLater": "나중에 다시 알려주세요", + "dismiss": "해고하다", + "convert": "전환하다" + } } diff --git a/packages/web/localizations/pl.json b/packages/web/localizations/pl.json index db87dd8de0..2ddd187516 100644 --- a/packages/web/localizations/pl.json +++ b/packages/web/localizations/pl.json @@ -1235,5 +1235,10 @@ }, "tradeFee": "Opłata za handel", "receiveAtLeast": "Otrzymaj co najmniej", - "payAtMost": "Zapłać maksymalnie" + "payAtMost": "Zapłać maksymalnie", + "alloyedAssets": { + "remindMeLater": "Przypomnij mi później", + "dismiss": "Odrzucać", + "convert": "Konwertować" + } } diff --git a/packages/web/localizations/pt-br.json b/packages/web/localizations/pt-br.json index 567ed05e30..3eec656ed7 100644 --- a/packages/web/localizations/pt-br.json +++ b/packages/web/localizations/pt-br.json @@ -1235,5 +1235,10 @@ }, "tradeFee": "Taxa de negociação", "receiveAtLeast": "Receba pelo menos", - "payAtMost": "Pague no máximo" + "payAtMost": "Pague no máximo", + "alloyedAssets": { + "remindMeLater": "Lembre-me mais tarde", + "dismiss": "Liberar", + "convert": "Converter" + } } diff --git a/packages/web/localizations/ro.json b/packages/web/localizations/ro.json index 45e5284ebe..5ac8dfe681 100644 --- a/packages/web/localizations/ro.json +++ b/packages/web/localizations/ro.json @@ -1235,5 +1235,10 @@ }, "tradeFee": "Comision comercială", "receiveAtLeast": "Primește cel puțin", - "payAtMost": "Plătește cel mult" + "payAtMost": "Plătește cel mult", + "alloyedAssets": { + "remindMeLater": "Amintește-mi mai târziu", + "dismiss": "Respingeți", + "convert": "Convertit" + } } diff --git a/packages/web/localizations/ru.json b/packages/web/localizations/ru.json index 6025673e23..06385c376d 100644 --- a/packages/web/localizations/ru.json +++ b/packages/web/localizations/ru.json @@ -1235,5 +1235,10 @@ }, "tradeFee": "Торговый сбор", "receiveAtLeast": "Получите по крайней мере", - "payAtMost": "Платить максимум" + "payAtMost": "Платить максимум", + "alloyedAssets": { + "remindMeLater": "Напомнить мне позже", + "dismiss": "Увольнять", + "convert": "Конвертировать" + } } diff --git a/packages/web/localizations/tr.json b/packages/web/localizations/tr.json index 78a5c41bac..babe4f3088 100644 --- a/packages/web/localizations/tr.json +++ b/packages/web/localizations/tr.json @@ -1235,5 +1235,10 @@ }, "tradeFee": "Ticaret ücreti", "receiveAtLeast": "En azından al", - "payAtMost": "En fazla öde" + "payAtMost": "En fazla öde", + "alloyedAssets": { + "remindMeLater": "Daha sonra hatırlat bana", + "dismiss": "Azletmek", + "convert": "Dönüştürmek" + } } diff --git a/packages/web/localizations/zh-cn.json b/packages/web/localizations/zh-cn.json index 91ead71235..ab81dcda6b 100644 --- a/packages/web/localizations/zh-cn.json +++ b/packages/web/localizations/zh-cn.json @@ -1235,5 +1235,10 @@ }, "tradeFee": "交易费", "receiveAtLeast": "至少收到", - "payAtMost": "最多支付" + "payAtMost": "最多支付", + "alloyedAssets": { + "remindMeLater": "稍后提醒我", + "dismiss": "解雇", + "convert": "转变" + } } diff --git a/packages/web/localizations/zh-hk.json b/packages/web/localizations/zh-hk.json index 5f319aa7c3..c8614f3c64 100644 --- a/packages/web/localizations/zh-hk.json +++ b/packages/web/localizations/zh-hk.json @@ -1235,5 +1235,10 @@ }, "tradeFee": "交易費", "receiveAtLeast": "至少收到", - "payAtMost": "最多付錢" + "payAtMost": "最多付錢", + "alloyedAssets": { + "remindMeLater": "稍後提醒我", + "dismiss": "解僱", + "convert": "轉變" + } } diff --git a/packages/web/localizations/zh-tw.json b/packages/web/localizations/zh-tw.json index 74744e7c56..59dfe869ed 100644 --- a/packages/web/localizations/zh-tw.json +++ b/packages/web/localizations/zh-tw.json @@ -1235,5 +1235,10 @@ }, "tradeFee": "交易費", "receiveAtLeast": "至少收到", - "payAtMost": "最多付錢" + "payAtMost": "最多付錢", + "alloyedAssets": { + "remindMeLater": "稍後提醒我", + "dismiss": "解僱", + "convert": "轉變" + } } diff --git a/packages/web/public/icons/sprite.svg b/packages/web/public/icons/sprite.svg index 2cba044d6a..71a0f6bdac 100644 --- a/packages/web/public/icons/sprite.svg +++ b/packages/web/public/icons/sprite.svg @@ -164,6 +164,10 @@ + + + + - - - @@ -1617,7 +1618,7 @@ - + @@ -1695,14 +1696,7 @@ - - - - - - - - + From 59ee4e347266334c6310760d10e459805fd8cded Mon Sep 17 00:00:00 2001 From: Matt Upham <30577966+mattupham@users.noreply.github.com> Date: Fri, 4 Oct 2024 13:57:31 -0700 Subject: [PATCH 05/16] feat(getHasAssetVariants): add query to fetch and calculate if user has asset variants --- .../queries/complex/portfolio/allocation.ts | 35 +++++++++++++ packages/trpc/src/portfolio.ts | 16 +++++- packages/web/components/alert/toast.tsx | 18 +++++-- .../web/components/alert/tx-event-toast.ts | 5 +- packages/web/components/layouts/main.tsx | 52 +++++++++++++------ 5 files changed, 102 insertions(+), 24 deletions(-) diff --git a/packages/server/src/queries/complex/portfolio/allocation.ts b/packages/server/src/queries/complex/portfolio/allocation.ts index 5d2bd4cf12..c006626b63 100644 --- a/packages/server/src/queries/complex/portfolio/allocation.ts +++ b/packages/server/src/queries/complex/portfolio/allocation.ts @@ -173,3 +173,38 @@ export async function getAllocation({ totalCap, }; } + +export async function getHasAssetVariants({ + address, + assetLists, +}: { + address: string; + assetLists: AssetList[]; +}): Promise<{ hasAssetVariants: boolean }> { + const data = await queryAllocation({ + address, + }); + + // Extract all denom from account_coins_result in user-balances + const allAssets = + data?.categories?.["user-balances"]?.account_coins_result?.map( + (result) => result.coin.denom + ) ?? []; + + console.log("allAssets", allAssets); + + const assetListAssets = assetLists.flatMap((list) => list.assets); + + const hasAssetVariants = allAssets.some((coinMinimalDenom) => { + const matchingAsset = assetListAssets.find( + (assetListAsset) => coinMinimalDenom === assetListAsset.coinMinimalDenom + ); + + return ( + matchingAsset && + matchingAsset.coinMinimalDenom !== matchingAsset.variantGroupKey + ); + }); + + return { hasAssetVariants }; +} diff --git a/packages/trpc/src/portfolio.ts b/packages/trpc/src/portfolio.ts index 868baede4d..dc7ffbb9fb 100644 --- a/packages/trpc/src/portfolio.ts +++ b/packages/trpc/src/portfolio.ts @@ -1,5 +1,5 @@ import { getPortfolioOverTime } from "@osmosis-labs/server"; -import { getAllocation } from "@osmosis-labs/server"; +import { getAllocation, getHasAssetVariants } from "@osmosis-labs/server"; import { ChartPortfolioOverTimeResponse } from "@osmosis-labs/server/src/queries/complex/portfolio/portfolio"; import { z } from "zod"; @@ -37,4 +37,18 @@ export const portfolioRouter = createTRPCRouter({ }); return res; }), + + getHasAssetVariants: publicProcedure + .input( + z.object({ + address: z.string(), + }) + ) + .query(async ({ input: { address }, ctx }) => { + const res = await getHasAssetVariants({ + address, + assetLists: ctx.assetLists, + }); + return res; + }), }); diff --git a/packages/web/components/alert/toast.tsx b/packages/web/components/alert/toast.tsx index 5bf66947f5..a1d8d27f02 100644 --- a/packages/web/components/alert/toast.tsx +++ b/packages/web/components/alert/toast.tsx @@ -208,7 +208,11 @@ const OneClickTradingToast: FunctionComponent = ({
); -export const AlloyedAssetsToast = () => { +export const AlloyedAssetsToast: FunctionComponent = ({ + titleTranslationKey, + captionTranslationKey, + // captionElement, +}) => { const onDismiss = () => { console.log("Dismiss clicked"); }; @@ -253,10 +257,14 @@ export const AlloyedAssetsToast = () => {
-
{t("alloyedAssets.title")}
-

- {t("alloyedAssets.caption")} -

+
{t(titleTranslationKey)}
+ {captionTranslationKey && ( +

+ {typeof captionTranslationKey === "string" + ? t(captionTranslationKey) + : t(...captionTranslationKey)} +

+ )}
diff --git a/packages/web/components/alert/tx-event-toast.ts b/packages/web/components/alert/tx-event-toast.ts index e2d82e2d85..ec719b640b 100644 --- a/packages/web/components/alert/tx-event-toast.ts +++ b/packages/web/components/alert/tx-event-toast.ts @@ -28,8 +28,9 @@ export function toastOnBroadcastFailed( displayToast( { - titleTranslationKey: "alloyedAssets.title", - captionTranslationKey: "alloyedAssets.caption", + titleTranslationKey: "transactionFailed", + captionTranslationKey: + prettifyTxError(caption, getChain(chainId).currencies) ?? caption, }, ToastType.ERROR ); diff --git a/packages/web/components/layouts/main.tsx b/packages/web/components/layouts/main.tsx index 713d62dc26..b1ef9b79bd 100644 --- a/packages/web/components/layouts/main.tsx +++ b/packages/web/components/layouts/main.tsx @@ -1,11 +1,7 @@ import classNames from "classnames"; import { observer } from "mobx-react-lite"; import { useRouter } from "next/router"; -import React, { - type FunctionComponent, - type PropsWithChildren, - useEffect, -} from "react"; +import React, { type FunctionComponent, type PropsWithChildren } from "react"; import { displayToast } from "~/components/alert/toast"; import { ToastType } from "~/components/alert/types"; @@ -15,6 +11,8 @@ import { NavBar } from "~/components/navbar"; import { NavbarOsmoPrice } from "~/components/navbar-osmo-price"; import { NavbarOsmosisUpdate } from "~/components/navbar-osmosis-update"; import { useCurrentLanguage, useFeatureFlags, useWindowSize } from "~/hooks"; +import { useStore } from "~/stores"; +import { api } from "~/utils/trpc"; export const MainLayout = observer( ({ @@ -40,18 +38,40 @@ export const MainLayout = observer( ({ selectionTest }) => selectionTest?.test(router.pathname) ?? false ); - useEffect(() => { - // TODO - check if user has alloyed assets - displayToast( - { - titleTranslationKey: "transactionSuccessful", + const { accountStore } = useStore(); + + const wallet = accountStore.getWallet(accountStore.osmosisChainId); + + console.log("featureFlags.alloyedAssets", featureFlags.alloyedAssets); + + api.local.portfolio.getHasAssetVariants.useQuery( + { + address: wallet?.address ?? "", + }, + { + enabled: + featureFlags.alloyedAssets && + Boolean(wallet?.isWalletConnected && wallet?.address), + onSuccess: (data) => { + const hasAssetsToConvert = data?.hasAssetVariants ?? false; + + const shouldDisplayToast = hasAssetsToConvert && !isMobile; + + if (shouldDisplayToast) { + displayToast( + { + titleTranslationKey: "alloyedAssets.title", + captionTranslationKey: "alloyedAssets.caption", + }, + ToastType.ALLOYED_ASSETS, + { + position: "bottom-right", + } + ); + } }, - ToastType.ALLOYED_ASSETS, - { - position: "bottom-right", // Add this option to position the toast - } - ); - }, []); + } + ); return ( From 59a79ff67f22fae20a5a57951ed5a16e39a03d97 Mon Sep 17 00:00:00 2001 From: Matt Upham <30577966+mattupham@users.noreply.github.com> Date: Mon, 7 Oct 2024 13:29:16 -0700 Subject: [PATCH 06/16] feat(alloyed-assets-variants-detected): update toast options for toastId, autoclose, and close button, update local storage logic --- packages/web/components/alert/toast.tsx | 64 +++++- packages/web/components/alert/types.ts | 2 +- packages/web/components/layouts/main.tsx | 211 +----------------- packages/web/hooks/index.ts | 2 + packages/web/hooks/use-has-asset-variants.tsx | 54 +++++ 5 files changed, 116 insertions(+), 217 deletions(-) create mode 100644 packages/web/hooks/use-has-asset-variants.tsx diff --git a/packages/web/components/alert/toast.tsx b/packages/web/components/alert/toast.tsx index a1d8d27f02..009b89cc55 100644 --- a/packages/web/components/alert/toast.tsx +++ b/packages/web/components/alert/toast.tsx @@ -1,11 +1,12 @@ import Image from "next/image"; -import React, { FunctionComponent } from "react"; +import React, { FunctionComponent, useState } from "react"; import { Id, toast, ToastContent, ToastOptions as ReactToastifyOptions, } from "react-toastify"; +import { useLocalStorage } from "react-use"; import { Alert, ToastType } from "~/components/alert"; import { Icon } from "~/components/assets"; @@ -24,8 +25,7 @@ export function displayToast( ) { toastOptions = { position: "top-right", - // autoClose: type === ToastType.LOADING ? 2000 : 7000, - autoClose: 9999999999999999999999, + autoClose: type === ToastType.LOADING ? 2000 : 7000, hideProgressBar: true, closeOnClick: false, pauseOnHover: true, @@ -70,7 +70,17 @@ export function displayToast( showToast(, toastOptions); break; case ToastType.ALLOYED_ASSETS: - showToast(, toastOptions); + showToast( + ({ closeToast }) => ( + + ), + { + ...toastOptions, + toastId: ToastType.ALLOYED_ASSETS, // prevents duplicate toasts by using an explicit toast id + autoClose: false, // prevents Alloyed Assets toast from closing automatically - https://fkhadra.github.io/react-toastify/autoClose/ + closeButton: false, + } + ); break; } } @@ -208,17 +218,44 @@ const OneClickTradingToast: FunctionComponent = ({
); -export const AlloyedAssetsToast: FunctionComponent = ({ - titleTranslationKey, - captionTranslationKey, - // captionElement, -}) => { +export const AlloyedAssetsToastDoNotShowKey = + "do-not-show-alloyed-assets-toast"; + +export const AlloyedAssetsToast: FunctionComponent< + Alert & { closeToast: () => void } +> = ({ titleTranslationKey, captionTranslationKey, closeToast }) => { + const [, setDoNotShowAgain] = useLocalStorage( + AlloyedAssetsToastDoNotShowKey, + false + ); + + const [isChecked, setIsChecked] = useState(false); + const onDismiss = () => { - console.log("Dismiss clicked"); + if (isChecked) { + setDoNotShowAgain(true); + } else { + setDoNotShowAgain(false); + } + + closeToast(); }; const onConvert = () => { - console.log("Convert clicked"); + // TODO: link to modal in other PR + // open modal + // Convert All + // remind me later ✅ + // in modal, convert all invokes setDoNotShowAgain(true) + // remind me later ❌ + // in modal, convert all invokes setDoNotShowAgain(true) + // Convert Selected + // remind me later ✅ + // in modal, convert all invokes setDoNotShowAgain(true) + // remind me later ❌ (still has remaining alloyed assets) + // in modal, convert all invokes setDoNotShowAgain(false) + + closeToast(); }; return ( @@ -266,7 +303,10 @@ export const AlloyedAssetsToast: FunctionComponent = ({

)}
- + setIsChecked(!isChecked)} + />{" "} {t("alloyedAssets.remindMeLater")} diff --git a/packages/web/components/alert/types.ts b/packages/web/components/alert/types.ts index 647f068b7a..ec828c4c05 100644 --- a/packages/web/components/alert/types.ts +++ b/packages/web/components/alert/types.ts @@ -16,5 +16,5 @@ export const enum ToastType { ERROR = "ERROR", LOADING = "LOADING", ONE_CLICK_TRADING = "ONE_CLICK_TRADING", - ALLOYED_ASSETS = "ALLOYED_ASSETS", // Add this line + ALLOYED_ASSETS = "ALLOYED_ASSETS", } diff --git a/packages/web/components/layouts/main.tsx b/packages/web/components/layouts/main.tsx index b1ef9b79bd..96e2e02dd6 100644 --- a/packages/web/components/layouts/main.tsx +++ b/packages/web/components/layouts/main.tsx @@ -3,16 +3,17 @@ import { observer } from "mobx-react-lite"; import { useRouter } from "next/router"; import React, { type FunctionComponent, type PropsWithChildren } from "react"; -import { displayToast } from "~/components/alert/toast"; -import { ToastType } from "~/components/alert/types"; import { IconButton } from "~/components/buttons/icon-button"; import { MainLayoutMenu, MainMenu } from "~/components/main-menu"; import { NavBar } from "~/components/navbar"; import { NavbarOsmoPrice } from "~/components/navbar-osmo-price"; import { NavbarOsmosisUpdate } from "~/components/navbar-osmosis-update"; -import { useCurrentLanguage, useFeatureFlags, useWindowSize } from "~/hooks"; -import { useStore } from "~/stores"; -import { api } from "~/utils/trpc"; +import { + useCurrentLanguage, + useFeatureFlags, + useHasAssetVariants, + useWindowSize, +} from "~/hooks"; export const MainLayout = observer( ({ @@ -38,40 +39,7 @@ export const MainLayout = observer( ({ selectionTest }) => selectionTest?.test(router.pathname) ?? false ); - const { accountStore } = useStore(); - - const wallet = accountStore.getWallet(accountStore.osmosisChainId); - - console.log("featureFlags.alloyedAssets", featureFlags.alloyedAssets); - - api.local.portfolio.getHasAssetVariants.useQuery( - { - address: wallet?.address ?? "", - }, - { - enabled: - featureFlags.alloyedAssets && - Boolean(wallet?.isWalletConnected && wallet?.address), - onSuccess: (data) => { - const hasAssetsToConvert = data?.hasAssetVariants ?? false; - - const shouldDisplayToast = hasAssetsToConvert && !isMobile; - - if (shouldDisplayToast) { - displayToast( - { - titleTranslationKey: "alloyedAssets.title", - captionTranslationKey: "alloyedAssets.caption", - }, - ToastType.ALLOYED_ASSETS, - { - position: "bottom-right", - } - ); - } - }, - } - ); + useHasAssetVariants(); return ( @@ -526,168 +494,3 @@ const OsmosisFullLogo: FunctionComponent<{ } /> ); - -// new logo -{ - /* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */ -} diff --git a/packages/web/hooks/index.ts b/packages/web/hooks/index.ts index 02e0315801..4a0d3759f8 100644 --- a/packages/web/hooks/index.ts +++ b/packages/web/hooks/index.ts @@ -10,6 +10,8 @@ export * from "./use-deterministic"; export * from "./use-dimension"; export * from "./use-disclosure"; export * from "./use-feature-flags"; +export * from "./use-has-asset-variants"; +export * from "./use-has-asset-variants"; export * from "./use-nav-bar"; export * from "./use-previous-when"; export * from "./use-wallet-select"; diff --git a/packages/web/hooks/use-has-asset-variants.tsx b/packages/web/hooks/use-has-asset-variants.tsx new file mode 100644 index 0000000000..f3b8c202f3 --- /dev/null +++ b/packages/web/hooks/use-has-asset-variants.tsx @@ -0,0 +1,54 @@ +import { useLocalStorage } from "react-use"; + +import { + AlloyedAssetsToastDoNotShowKey, + displayToast, +} from "~/components/alert/toast"; +import { ToastType } from "~/components/alert/types"; +import { useFeatureFlags, useWindowSize } from "~/hooks"; +import { useStore } from "~/stores"; +import { api } from "~/utils/trpc"; + +export const useHasAssetVariants = () => { + const { accountStore } = useStore(); + const wallet = accountStore.getWallet(accountStore.osmosisChainId); + + const { isMobile } = useWindowSize(); + const { alloyedAssets } = useFeatureFlags(); + + const [doNotShowAgain] = useLocalStorage( + AlloyedAssetsToastDoNotShowKey, + false + ); + + const enabled = + alloyedAssets && + !doNotShowAgain && + Boolean(wallet?.isWalletConnected && wallet?.address); + + api.local.portfolio.getHasAssetVariants.useQuery( + { + address: wallet?.address ?? "", + }, + { + enabled, + onSuccess: (data) => { + const hasAssetsToConvert = data?.hasAssetVariants ?? false; + const shouldDisplayToast = hasAssetsToConvert && !isMobile; + + if (shouldDisplayToast) { + displayToast( + { + titleTranslationKey: "alloyedAssets.title", + captionTranslationKey: "alloyedAssets.caption", + }, + ToastType.ALLOYED_ASSETS, + { + position: "bottom-right", + } + ); + } + }, + } + ); +}; From 99f560fa24f35075337b7182d5b5b826b464e8f9 Mon Sep 17 00:00:00 2001 From: Matt Upham <30577966+mattupham@users.noreply.github.com> Date: Mon, 7 Oct 2024 13:57:02 -0700 Subject: [PATCH 07/16] test(Allocation): Add tests for Has Asset Variants --- .../portfolio/__tests__/allocation.spec.ts | 197 ++++++++++++++++++ .../queries/complex/portfolio/allocation.ts | 37 ++-- 2 files changed, 219 insertions(+), 15 deletions(-) diff --git a/packages/server/src/queries/complex/portfolio/__tests__/allocation.spec.ts b/packages/server/src/queries/complex/portfolio/__tests__/allocation.spec.ts index 1bc9641511..4777538ef3 100644 --- a/packages/server/src/queries/complex/portfolio/__tests__/allocation.spec.ts +++ b/packages/server/src/queries/complex/portfolio/__tests__/allocation.spec.ts @@ -1,6 +1,9 @@ +import { Asset } from "@osmosis-labs/types"; + import { AssetLists as assetLists } from "../../../../queries/__tests__/mock-asset-lists"; import { AllocationResponse } from "../../../sidecar/allocation"; import { calculatePercentAndFiatValues, getAll } from "../allocation"; +import { checkHasAssetVariants } from "../allocation"; // Adjust the import path as necessary const MOCK_DATA: AllocationResponse = { categories: { @@ -185,3 +188,197 @@ describe("Allocation Functions", () => { }); }); }); + +const ASSET_OSMO: Asset = { + chainName: "osmosis", + sourceDenom: "uosmo", + coinMinimalDenom: "uosmo", + symbol: "OSMO", + decimals: 6, + logoURIs: { + png: "https://raw.githubusercontent.com/cosmos/chain-registry/master/osmosis/images/osmo.png", + svg: "https://raw.githubusercontent.com/cosmos/chain-registry/master/osmosis/images/osmo.svg", + }, + coingeckoId: "osmosis", + price: { + poolId: "1464", + denom: + "ibc/498A0751C798A0D9A389AA3691123DADA57DAA4FE165D5C75894505B876BA6E4", + }, + categories: ["defi"], + transferMethods: [], + counterparty: [], + variantGroupKey: "uosmo", + name: "Osmosis", + isAlloyed: false, + verified: true, + unstable: false, + disabled: false, + preview: false, + relative_image_url: "/tokens/generated/osmo.svg", +}; + +const ASSET_SAIL: Asset = { + chainName: "osmosis", + sourceDenom: + "factory/osmo1rckme96ptawr4zwexxj5g5gej9s2dmud8r2t9j0k0prn5mch5g4snzzwjv/sail", + coinMinimalDenom: + "factory/osmo1rckme96ptawr4zwexxj5g5gej9s2dmud8r2t9j0k0prn5mch5g4snzzwjv/sail", + symbol: "SAIL", + decimals: 6, + logoURIs: { + png: "https://raw.githubusercontent.com/cosmos/chain-registry/master/osmosis/images/sail.png", + }, + coingeckoId: "sail-dao", + price: { + poolId: "1745", + denom: "uosmo", + }, + categories: ["sail_initiative"], + transferMethods: [], + counterparty: [], + variantGroupKey: + "factory/osmo1rckme96ptawr4zwexxj5g5gej9s2dmud8r2t9j0k0prn5mch5g4snzzwjv/sail", + name: "Sail", + isAlloyed: false, + verified: true, + unstable: false, + disabled: false, + preview: false, + listingDate: "2024-03-14T22:20:00.000Z", + relative_image_url: "/tokens/generated/sail.png", +}; + +const ASSET_ETH_AXL: Asset = { + chainName: "axelar", + sourceDenom: "weth-wei", + coinMinimalDenom: + "ibc/EA1D43981D5C9A1C4AAEA9C23BB1D4FA126BA9BC7020A25E0AE4AA841EA25DC5", + symbol: "ETH.axl", + decimals: 18, + logoURIs: { + png: "https://raw.githubusercontent.com/cosmos/chain-registry/master/osmosis/images/eth.axl.png", + svg: "https://raw.githubusercontent.com/cosmos/chain-registry/master/osmosis/images/eth.axl.svg", + }, + price: { + poolId: "1431", + denom: + "ibc/2F21E6D4271DE3F561F20A02CD541DAF7405B1E9CB3B9B07E3C2AC7D8A4338A5", + }, + categories: [], + transferMethods: [ + { + name: "Satellite", + type: "external_interface", + depositUrl: + "https://satellite.money/?source=ethereum&destination=osmosis&asset_denom=weth-wei", + withdrawUrl: + "https://satellite.money/?source=osmosis&destination=ethereum&asset_denom=weth-wei", + }, + { + name: "Osmosis IBC Transfer", + type: "ibc", + counterparty: { + chainName: "axelar", + chainId: "axelar-dojo-1", + sourceDenom: "weth-wei", + port: "transfer", + channelId: "channel-3", + }, + chain: { + port: "transfer", + channelId: "channel-208", + path: "transfer/channel-208/weth-wei", + }, + }, + ], + counterparty: [ + { + chainName: "axelar", + sourceDenom: "weth-wei", + chainType: "cosmos", + chainId: "axelar-dojo-1", + symbol: "WETH", + decimals: 18, + logoURIs: { + png: "https://raw.githubusercontent.com/cosmos/chain-registry/master/axelar/images/weth.png", + }, + }, + { + chainName: "ethereum", + sourceDenom: "0xc02aaa39b223fe8d0a0e5c4f27ead9083c756cc2", + chainType: "evm", + chainId: 1, + address: "0xc02aaa39b223fe8d0a0e5c4f27ead9083c756cc2", + symbol: "WETH", + decimals: 18, + logoURIs: { + svg: "https://raw.githubusercontent.com/cosmos/chain-registry/master/_non-cosmos/ethereum/images/weth.svg", + }, + }, + { + chainName: "ethereum", + sourceDenom: "wei", + chainType: "evm", + chainId: 1, + address: "0xEeeeeEeeeEeEeeEeEeEeeEEEeeeeEeeeeeeeEEeE", + symbol: "ETH", + decimals: 18, + logoURIs: { + png: "https://raw.githubusercontent.com/cosmos/chain-registry/master/_non-cosmos/ethereum/images/eth-white.png", + svg: "https://raw.githubusercontent.com/cosmos/chain-registry/master/_non-cosmos/ethereum/images/eth-white.svg", + }, + }, + ], + variantGroupKey: + "factory/osmo1k6c8jln7ejuqwtqmay3yvzrg3kueaczl96pk067ldg8u835w0yhsw27twm/alloyed/allETH", + name: "Ethereum (Axelar)", + isAlloyed: false, + verified: true, + unstable: false, + disabled: false, + preview: false, + sortWith: { + chainName: "axelar", + sourceDenom: "uaxl", + }, + relative_image_url: "/tokens/generated/eth.axl.svg", +}; + +describe("Has Asset Variants", () => { + it("should return true when there are asset variants", () => { + const userCoinMinimalDenoms = [ + "ibc/498A0751C798A0D9A389AA3691123DADA57DAA4FE165D5C75894505B876BA6E4", // OSMO + "factory/osmo1rckme96ptawr4zwexxj5g5gej9s2dmud8r2t9j0k0prn5mch5g4snzzwjv/sail", // SAIL + "ibc/EA1D43981D5C9A1C4AAEA9C23BB1D4FA126BA9BC7020A25E0AE4AA841EA25DC5", // ETH.axl <- this is the variant + ]; + const assetListAssets: Asset[] = [ + ASSET_OSMO, // OSMO + ASSET_SAIL, // SAIL + ASSET_ETH_AXL, // <- this is the variant + ]; + + const result = checkHasAssetVariants( + userCoinMinimalDenoms, + assetListAssets + ); + expect(result).toBe(true); + }); + + it("should return false when there are no asset variants", () => { + const userCoinMinimalDenoms = [ + "ibc/498A0751C798A0D9A389AA3691123DADA57DAA4FE165D5C75894505B876BA6E4", // OSMO + "factory/osmo1rckme96ptawr4zwexxj5g5gej9s2dmud8r2t9j0k0prn5mch5g4snzzwjv/sail", // SAIL + ]; + const assetListAssets: Asset[] = [ + ASSET_OSMO, // OSMO + ASSET_SAIL, // SAIL + ]; + + const result = checkHasAssetVariants( + userCoinMinimalDenoms, + assetListAssets + ); + expect(result).toBe(false); + }); +}); diff --git a/packages/server/src/queries/complex/portfolio/allocation.ts b/packages/server/src/queries/complex/portfolio/allocation.ts index c006626b63..677fcb0def 100644 --- a/packages/server/src/queries/complex/portfolio/allocation.ts +++ b/packages/server/src/queries/complex/portfolio/allocation.ts @@ -1,6 +1,6 @@ import { CoinPretty, PricePretty } from "@keplr-wallet/unit"; import { Dec, RatePretty } from "@keplr-wallet/unit"; -import { AssetList } from "@osmosis-labs/types"; +import { Asset, AssetList } from "@osmosis-labs/types"; import { sort } from "@osmosis-labs/utils"; import { DEFAULT_VS_CURRENCY } from "../../../queries/complex/assets/config"; @@ -174,6 +174,22 @@ export async function getAllocation({ }; } +export function checkHasAssetVariants( + userCoinMinimalDenoms: string[], + assetListAssets: Asset[] +): boolean { + return userCoinMinimalDenoms.some((coinMinimalDenom) => { + const matchingAsset = assetListAssets.find( + (assetListAsset) => coinMinimalDenom === assetListAsset.coinMinimalDenom + ); + + return ( + matchingAsset && + matchingAsset.coinMinimalDenom !== matchingAsset.variantGroupKey + ); + }); +} + export async function getHasAssetVariants({ address, assetLists, @@ -185,26 +201,17 @@ export async function getHasAssetVariants({ address, }); - // Extract all denom from account_coins_result in user-balances - const allAssets = + const userCoinMinimalDenoms = data?.categories?.["user-balances"]?.account_coins_result?.map( (result) => result.coin.denom ) ?? []; - console.log("allAssets", allAssets); - const assetListAssets = assetLists.flatMap((list) => list.assets); - const hasAssetVariants = allAssets.some((coinMinimalDenom) => { - const matchingAsset = assetListAssets.find( - (assetListAsset) => coinMinimalDenom === assetListAsset.coinMinimalDenom - ); - - return ( - matchingAsset && - matchingAsset.coinMinimalDenom !== matchingAsset.variantGroupKey - ); - }); + const hasAssetVariants = checkHasAssetVariants( + userCoinMinimalDenoms, + assetListAssets + ); return { hasAssetVariants }; } From 551174132d75617b9d5002088c8037320ecc8a58 Mon Sep 17 00:00:00 2001 From: Matt Upham <30577966+mattupham@users.noreply.github.com> Date: Mon, 7 Oct 2024 13:59:36 -0700 Subject: [PATCH 08/16] test(Allocation): Add test for if user has no assets --- .../complex/portfolio/__tests__/allocation.spec.ts | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/packages/server/src/queries/complex/portfolio/__tests__/allocation.spec.ts b/packages/server/src/queries/complex/portfolio/__tests__/allocation.spec.ts index 4777538ef3..d1018b9e71 100644 --- a/packages/server/src/queries/complex/portfolio/__tests__/allocation.spec.ts +++ b/packages/server/src/queries/complex/portfolio/__tests__/allocation.spec.ts @@ -381,4 +381,18 @@ describe("Has Asset Variants", () => { ); expect(result).toBe(false); }); + + it("should return false when user has no assets", () => { + const userCoinMinimalDenoms: string[] = []; + const assetListAssets: Asset[] = [ + ASSET_OSMO, // OSMO + ASSET_SAIL, // SAIL + ]; + + const result = checkHasAssetVariants( + userCoinMinimalDenoms, + assetListAssets + ); + expect(result).toBe(false); + }); }); From 8e0796a11758ac505f6c7675ac454e34e45562a9 Mon Sep 17 00:00:00 2001 From: Matt Upham <30577966+mattupham@users.noreply.github.com> Date: Mon, 7 Oct 2024 14:01:50 -0700 Subject: [PATCH 09/16] build(i18n): add translations --- packages/web/localizations/de.json | 2 ++ packages/web/localizations/es.json | 2 ++ packages/web/localizations/fa.json | 2 ++ packages/web/localizations/fr.json | 2 ++ packages/web/localizations/gu.json | 2 ++ packages/web/localizations/hi.json | 2 ++ packages/web/localizations/ja.json | 2 ++ packages/web/localizations/ko.json | 2 ++ packages/web/localizations/pl.json | 2 ++ packages/web/localizations/pt-br.json | 2 ++ packages/web/localizations/ro.json | 2 ++ packages/web/localizations/ru.json | 2 ++ packages/web/localizations/tr.json | 2 ++ packages/web/localizations/zh-cn.json | 2 ++ packages/web/localizations/zh-hk.json | 2 ++ packages/web/localizations/zh-tw.json | 2 ++ 16 files changed, 32 insertions(+) diff --git a/packages/web/localizations/de.json b/packages/web/localizations/de.json index 41ef0a6b22..b4980ea64a 100644 --- a/packages/web/localizations/de.json +++ b/packages/web/localizations/de.json @@ -1237,6 +1237,8 @@ "receiveAtLeast": "Erhalten Sie mindestens", "payAtMost": "Bezahlen Sie höchstens", "alloyedAssets": { + "title": "Erkannte Varianten", + "caption": "Verabschieden Sie sich von all den verwirrenden Asset-Varianten. Begrüßen Sie ein nahtloseres Erlebnis mit Osmosis.", "remindMeLater": "Später erinnern", "dismiss": "Zurückweisen", "convert": "Konvertieren" diff --git a/packages/web/localizations/es.json b/packages/web/localizations/es.json index 762e732c10..0b2f8aa1fa 100644 --- a/packages/web/localizations/es.json +++ b/packages/web/localizations/es.json @@ -1237,6 +1237,8 @@ "receiveAtLeast": "Recibir al menos", "payAtMost": "Pagar como máximo", "alloyedAssets": { + "title": "Variantes detectadas", + "caption": "Dile adiós a todas esas variantes de activos confusas. Saluda a una experiencia más fluida en Osmosis.", "remindMeLater": "Recuérdamelo más tarde", "dismiss": "Despedir", "convert": "Convertir" diff --git a/packages/web/localizations/fa.json b/packages/web/localizations/fa.json index 94a42e9d29..391ddc6b53 100644 --- a/packages/web/localizations/fa.json +++ b/packages/web/localizations/fa.json @@ -1237,6 +1237,8 @@ "receiveAtLeast": "حداقل دریافت کنید", "payAtMost": "حداکثر پرداخت کنید", "alloyedAssets": { + "title": "انواع مختلف شناسایی شد", + "caption": "با همه آن گونه های دارایی گیج کننده خداحافظی کنید. به تجربه یکپارچه تر در اسموز سلام کنید.", "remindMeLater": "بعدا به من یادآوری کن", "dismiss": "رد کردن", "convert": "تبدیل کنید" diff --git a/packages/web/localizations/fr.json b/packages/web/localizations/fr.json index e41c75b52d..b913821958 100644 --- a/packages/web/localizations/fr.json +++ b/packages/web/localizations/fr.json @@ -1237,6 +1237,8 @@ "receiveAtLeast": "Recevez au moins", "payAtMost": "Payer au maximum", "alloyedAssets": { + "title": "Variantes détectées", + "caption": "Dites adieu à toutes ces variantes d'actifs déroutantes. Dites bonjour à une expérience plus fluide sur Osmosis.", "remindMeLater": "Rappelle-moi plus tard", "dismiss": "Rejeter", "convert": "Convertir" diff --git a/packages/web/localizations/gu.json b/packages/web/localizations/gu.json index 0de145f2c2..373a2fff0d 100644 --- a/packages/web/localizations/gu.json +++ b/packages/web/localizations/gu.json @@ -1237,6 +1237,8 @@ "receiveAtLeast": "ઓછામાં ઓછું પ્રાપ્ત કરો", "payAtMost": "વધુમાં વધુ ચૂકવણી કરો", "alloyedAssets": { + "title": "વેરિઅન્ટ્સ મળી આવ્યા", + "caption": "તે બધા મૂંઝવણભર્યા એસેટ વેરિઅન્ટ્સને ગુડબાય કહો. ઓસ્મોસિસ પર વધુ સીમલેસ અનુભવ માટે હેલો કહો.", "remindMeLater": "મને પછીથી યાદ કરાવો", "dismiss": "કાઢી નાખો", "convert": "કન્વર્ટ કરો" diff --git a/packages/web/localizations/hi.json b/packages/web/localizations/hi.json index 4dfa7e5176..2e266be10e 100644 --- a/packages/web/localizations/hi.json +++ b/packages/web/localizations/hi.json @@ -1237,6 +1237,8 @@ "receiveAtLeast": "कम से कम प्राप्त करें", "payAtMost": "अधिकतम भुगतान करें", "alloyedAssets": { + "title": "पता लगाए गए वेरिएंट", + "caption": "उन सभी भ्रामक परिसंपत्ति प्रकारों को अलविदा कहें। ओस्मोसिस पर अधिक सहज अनुभव का स्वागत करें।", "remindMeLater": "बाद में याद दिलाना", "dismiss": "नकार देना", "convert": "बदलना" diff --git a/packages/web/localizations/ja.json b/packages/web/localizations/ja.json index 8c0d224c01..1dd3f607a1 100644 --- a/packages/web/localizations/ja.json +++ b/packages/web/localizations/ja.json @@ -1237,6 +1237,8 @@ "receiveAtLeast": "少なくとも受け取る", "payAtMost": "最大で支払う", "alloyedAssets": { + "title": "検出された変異体", + "caption": "混乱を招くアセットバリアントとはお別れです。Osmosis のよりシームレスなエクスペリエンスをお楽しみください。", "remindMeLater": "後で通知する", "dismiss": "却下する", "convert": "変換する" diff --git a/packages/web/localizations/ko.json b/packages/web/localizations/ko.json index 9d08c7ddaa..aaa145faf9 100644 --- a/packages/web/localizations/ko.json +++ b/packages/web/localizations/ko.json @@ -1237,6 +1237,8 @@ "receiveAtLeast": "최소한 받다", "payAtMost": "최대 지불", "alloyedAssets": { + "title": "변종 감지됨", + "caption": "혼란스러운 자산 변형에 작별 인사를 전하세요. Osmosis에서 더욱 매끄러운 경험을 만나보세요.", "remindMeLater": "나중에 다시 알려주세요", "dismiss": "해고하다", "convert": "전환하다" diff --git a/packages/web/localizations/pl.json b/packages/web/localizations/pl.json index 2ddd187516..f2b236ef11 100644 --- a/packages/web/localizations/pl.json +++ b/packages/web/localizations/pl.json @@ -1237,6 +1237,8 @@ "receiveAtLeast": "Otrzymaj co najmniej", "payAtMost": "Zapłać maksymalnie", "alloyedAssets": { + "title": "Wykryto warianty", + "caption": "Pożegnaj się ze wszystkimi tymi mylącymi wariantami aktywów. Przywitaj się z bardziej płynnym doświadczeniem w Osmosis.", "remindMeLater": "Przypomnij mi później", "dismiss": "Odrzucać", "convert": "Konwertować" diff --git a/packages/web/localizations/pt-br.json b/packages/web/localizations/pt-br.json index 3eec656ed7..5655b2de2f 100644 --- a/packages/web/localizations/pt-br.json +++ b/packages/web/localizations/pt-br.json @@ -1237,6 +1237,8 @@ "receiveAtLeast": "Receba pelo menos", "payAtMost": "Pague no máximo", "alloyedAssets": { + "title": "Variantes Detectadas", + "caption": "Diga adeus a todas essas variantes de ativos confusas. Diga olá a uma experiência mais integrada no Osmosis.", "remindMeLater": "Lembre-me mais tarde", "dismiss": "Liberar", "convert": "Converter" diff --git a/packages/web/localizations/ro.json b/packages/web/localizations/ro.json index 5ac8dfe681..a495c47041 100644 --- a/packages/web/localizations/ro.json +++ b/packages/web/localizations/ro.json @@ -1237,6 +1237,8 @@ "receiveAtLeast": "Primește cel puțin", "payAtMost": "Plătește cel mult", "alloyedAssets": { + "title": "Variante detectate", + "caption": "Spune-ți adio tuturor acelor variante de active confuze. Salutați-vă la o experiență mai simplă pe Osmoză.", "remindMeLater": "Amintește-mi mai târziu", "dismiss": "Respingeți", "convert": "Convertit" diff --git a/packages/web/localizations/ru.json b/packages/web/localizations/ru.json index 06385c376d..c3b4a74e3c 100644 --- a/packages/web/localizations/ru.json +++ b/packages/web/localizations/ru.json @@ -1237,6 +1237,8 @@ "receiveAtLeast": "Получите по крайней мере", "payAtMost": "Платить максимум", "alloyedAssets": { + "title": "Обнаруженные варианты", + "caption": "Попрощайтесь со всеми этими запутанными вариантами активов. Поприветствуйте более плавный опыт на Osmosis.", "remindMeLater": "Напомнить мне позже", "dismiss": "Увольнять", "convert": "Конвертировать" diff --git a/packages/web/localizations/tr.json b/packages/web/localizations/tr.json index babe4f3088..720b0d5724 100644 --- a/packages/web/localizations/tr.json +++ b/packages/web/localizations/tr.json @@ -1237,6 +1237,8 @@ "receiveAtLeast": "En azından al", "payAtMost": "En fazla öde", "alloyedAssets": { + "title": "Varyantlar Tespit Edildi", + "caption": "Tüm bu kafa karıştırıcı varlık varyantlarına elveda deyin. Osmosis'te daha sorunsuz bir deneyime merhaba deyin.", "remindMeLater": "Daha sonra hatırlat bana", "dismiss": "Azletmek", "convert": "Dönüştürmek" diff --git a/packages/web/localizations/zh-cn.json b/packages/web/localizations/zh-cn.json index ab81dcda6b..8b50630851 100644 --- a/packages/web/localizations/zh-cn.json +++ b/packages/web/localizations/zh-cn.json @@ -1237,6 +1237,8 @@ "receiveAtLeast": "至少收到", "payAtMost": "最多支付", "alloyedAssets": { + "title": "检测到的变体", + "caption": "告别所有那些令人困惑的资产变体。迎接 Osmosis 上更加无缝的体验。", "remindMeLater": "稍后提醒我", "dismiss": "解雇", "convert": "转变" diff --git a/packages/web/localizations/zh-hk.json b/packages/web/localizations/zh-hk.json index c8614f3c64..0f3b8ee160 100644 --- a/packages/web/localizations/zh-hk.json +++ b/packages/web/localizations/zh-hk.json @@ -1237,6 +1237,8 @@ "receiveAtLeast": "至少收到", "payAtMost": "最多付錢", "alloyedAssets": { + "title": "偵測到變體", + "caption": "告別所有那些令人困惑的資產變體。迎接更無縫的 Osmosis 體驗。", "remindMeLater": "稍後提醒我", "dismiss": "解僱", "convert": "轉變" diff --git a/packages/web/localizations/zh-tw.json b/packages/web/localizations/zh-tw.json index 59dfe869ed..872ee7193c 100644 --- a/packages/web/localizations/zh-tw.json +++ b/packages/web/localizations/zh-tw.json @@ -1237,6 +1237,8 @@ "receiveAtLeast": "至少收到", "payAtMost": "最多付錢", "alloyedAssets": { + "title": "偵測到變體", + "caption": "告別所有那些令人困惑的資產變體。迎接更無縫的 Osmosis 體驗。", "remindMeLater": "稍後提醒我", "dismiss": "解僱", "convert": "轉變" From 070cc05445dce9f1e86801ab4726e96eaafdec2a Mon Sep 17 00:00:00 2001 From: Matt Upham <30577966+mattupham@users.noreply.github.com> Date: Mon, 7 Oct 2024 14:18:48 -0700 Subject: [PATCH 10/16] refactor(alloyed-assets-variants-detection): clean up --- .../portfolio/__tests__/allocation.spec.ts | 2 +- .../alert/page-navigation-toast.tsx | 25 ------------------- packages/web/components/alert/toast.tsx | 6 ++--- packages/web/hooks/index.ts | 1 - packages/web/hooks/use-has-asset-variants.tsx | 5 +++- 5 files changed, 8 insertions(+), 31 deletions(-) delete mode 100644 packages/web/components/alert/page-navigation-toast.tsx diff --git a/packages/server/src/queries/complex/portfolio/__tests__/allocation.spec.ts b/packages/server/src/queries/complex/portfolio/__tests__/allocation.spec.ts index d1018b9e71..713f4b0a52 100644 --- a/packages/server/src/queries/complex/portfolio/__tests__/allocation.spec.ts +++ b/packages/server/src/queries/complex/portfolio/__tests__/allocation.spec.ts @@ -3,7 +3,7 @@ import { Asset } from "@osmosis-labs/types"; import { AssetLists as assetLists } from "../../../../queries/__tests__/mock-asset-lists"; import { AllocationResponse } from "../../../sidecar/allocation"; import { calculatePercentAndFiatValues, getAll } from "../allocation"; -import { checkHasAssetVariants } from "../allocation"; // Adjust the import path as necessary +import { checkHasAssetVariants } from "../allocation"; const MOCK_DATA: AllocationResponse = { categories: { diff --git a/packages/web/components/alert/page-navigation-toast.tsx b/packages/web/components/alert/page-navigation-toast.tsx deleted file mode 100644 index c999272bb5..0000000000 --- a/packages/web/components/alert/page-navigation-toast.tsx +++ /dev/null @@ -1,25 +0,0 @@ -import React from "react"; -import { toast } from "react-toastify"; - -import { Icon } from "~/components/assets"; - -export function showPageNavigationToast(pageName: string) { - toast( -
- -
-
New Page
-

You are now on: {pageName}

-
-
, - { - position: "bottom-right", - autoClose: 3000, - hideProgressBar: true, - closeOnClick: true, - pauseOnHover: true, - draggable: false, - className: "bg-osmoverse-700", - } - ); -} diff --git a/packages/web/components/alert/toast.tsx b/packages/web/components/alert/toast.tsx index 009b89cc55..2ffdb14efb 100644 --- a/packages/web/components/alert/toast.tsx +++ b/packages/web/components/alert/toast.tsx @@ -302,15 +302,15 @@ export const AlloyedAssetsToast: FunctionComponent< : t(...captionTranslationKey)}

)} -
+
+