chore: trigger release (#424)

* feat(ui): avoid token picker closing when a token list is picked (#420) * feat(ui): avoid token picker closing when a token list is picked * chore: add changeset --------- Co-authored-by: luzzifoss <fedeluzzi00@gmail.com> * Hide decentralization mode toggle on networks without a subgraph (#421) * feat(frontend): hide decentralization mode toggle on networks without subgraph * fix(frontend): fix typo * fix(ui): increase size limit to 750KB * fix(ui): make markdown input text size equal to other inputs (#423) * fix(ui): make markdown input text size equal to other inputs * docs(ui): add changest --------- Co-authored-by: luzzifoss <fedeluzzi00@gmail.com> Co-authored-by: Paolo Guerra <pg.guerrap@proton.me>
carrot-kpi · Oct 11, 2023 · fcf6611 · fcf6611 · vercel · Oct 11, 2023
1 parent 0637ab9
commit fcf6611
Show file tree

Hide file tree

Showing 8 changed files with 69 additions and 32 deletions.
diff --git a/.changeset/fifty-goats-run.md b/.changeset/fifty-goats-run.md
@@ -0,0 +1,5 @@
+---
+"@carrot-kpi/ui": patch
+---
+
+Make markdown input text size equal to other inputs
diff --git a/.changeset/wise-mangos-swim.md b/.changeset/wise-mangos-swim.md
@@ -0,0 +1,5 @@
+---
+"@carrot-kpi/ui": minor
+---
+
+Avoid token picker closing when a token list is selected
diff --git a/packages/frontend/src/components/ui/navbar/popovers/preferences/index.tsx b/packages/frontend/src/components/ui/navbar/popovers/preferences/index.tsx
@@ -15,6 +15,8 @@ import {
 } from "@carrot-kpi/react";
 import { useTranslation } from "react-i18next";
 import { InfoPopover } from "../../../../info-popover";
+import { ChainId, SUBGRAPH_URL } from "@carrot-kpi/sdk";
+import { useChainId } from "wagmi";
 
 interface PreferencesPopoverProps {
     open: boolean;
@@ -27,7 +29,7 @@ export const PreferencesPopover = forwardRef<
     PreferencesPopoverProps
 >(function PreferencesPopover({ open, anchor }, ref) {
     const { t } = useTranslation();
-
+    const chainId = useChainId();
     const preferDecentralization = usePreferDecentralization();
     const setPreferDecentralization = useSetPreferDecentralization();
 
@@ -108,23 +110,27 @@ export const PreferencesPopover = forwardRef<
                     />
                 </div>
             </div>
-            <div className="flex justify-between gap-4 md:gap-20 items-center">
-                <div className="flex gap-2 items-center">
-                    <Typography>{t("preferences.decentralization")}</Typography>
-                    <InfoPopover>
-                        <Typography
-                            variant="sm"
-                            className={{ root: "max-w-md" }}
-                        >
-                            {t("preferences.decentralization.info")}
+            {!!SUBGRAPH_URL[chainId as ChainId] && (
+                <div className="flex justify-between gap-4 md:gap-20 items-center">
+                    <div className="flex gap-2 items-center">
+                        <Typography>
+                            {t("preferences.decentralization")}
                         </Typography>
-                    </InfoPopover>
+                        <InfoPopover>
+                            <Typography
+                                variant="sm"
+                                className={{ root: "max-w-md" }}
+                            >
+                                {t("preferences.decentralization.info")}
+                            </Typography>
+                        </InfoPopover>
+                    </div>
+                    <Switch
+                        checked={preferDecentralization}
+                        onChange={setPreferDecentralization}
+                    />
                 </div>
-                <Switch
-                    checked={preferDecentralization}
-                    onChange={setPreferDecentralization}
-                />
-            </div>
+            )}
             {__STAGING_MODE__ && (
                 <div className="flex justify-between gap-4 md:gap-20 items-center">
                     <div className="flex gap-2 items-center">

diff --git a/packages/ui/.size-limit.js b/packages/ui/.size-limit.js
@@ -2,11 +2,11 @@ const path = require("path");
 module.exports = [
     {
         path: path.join(path.resolve("./"), "./dist/es/**/*.mjs"),
-        limit: "700 KB",
+        limit: "750 KB",
     },
     {
         path: path.join(path.resolve("./"), "./dist/cjs/**/*.cjs"),
-        limit: "700 KB",
+        limit: "750 KB",
     },
     {
         path:path.join(path.resolve("./"), "./dist/styles.css"),

diff --git a/packages/ui/src/components/erc20-token-picker/index.tsx b/packages/ui/src/components/erc20-token-picker/index.tsx
@@ -96,6 +96,16 @@ export function ERC20TokenPicker({
         [onSelectedTokenChange],
     );
 
+    const handleSelectedListChange = useCallback(
+        (list: TokenListWithBalance) => {
+            if (onSelectedListChange) {
+                setCurrentView("search");
+                onSelectedListChange(list);
+            }
+        },
+        [onSelectedListChange],
+    );
+
     const handleManageListsClick = useCallback(() => {
         setCurrentView("manage-lists");
     }, []);
@@ -131,7 +141,7 @@ export function ERC20TokenPicker({
                 <ManageLists
                     onDismiss={onDismiss}
                     loading={loading}
-                    onSelectedListChange={onSelectedListChange}
+                    onSelectedListChange={handleSelectedListChange}
                     selectedList={selectedList}
                     lists={lists}
                     chainId={chainId}

diff --git a/packages/ui/src/components/erc20-token-picker/manage-lists/index.tsx b/packages/ui/src/components/erc20-token-picker/manage-lists/index.tsx
@@ -127,13 +127,10 @@ export const ManageLists = ({
             const index = (event.target as HTMLLIElement).dataset.index;
             if (index !== undefined) {
                 const parsedIndex = parseInt(index);
-                if (parsedIndex >= 0) {
-                    onSelectedListChange(lists[parsedIndex]);
-                    if (!!onDismiss) onDismiss();
-                }
+                if (parsedIndex >= 0) onSelectedListChange(lists[parsedIndex]);
             }
         },
-        [lists, onDismiss, onSelectedListChange],
+        [lists, onSelectedListChange],
     );
 
     return (

diff --git a/packages/ui/src/components/markdown-input/index.tsx b/packages/ui/src/components/markdown-input/index.tsx
@@ -37,7 +37,7 @@ export const markdownInputContentStyles = mergedCva(
         "cui-overflow-y-auto",
         "cui-overflow-x-hidden",
         "cui-p-3",
-        "cui-text-sm",
+        "cui-text-lg",
         "cui-font-normal",
         "cui-cursor-text",
         "focus:cui-outline-none",
@@ -84,12 +84,12 @@ export const MarkdownInput = ({
                 Placeholder.configure({
                     placeholder,
                     emptyEditorClass:
-                        "before:cui-content-[attr(data-placeholder)] before:cui-absolute before:cui-opacity-30 dark:before:cui-opacity-20 cui-text-sm cui-font-normal",
+                        "before:cui-content-[attr(data-placeholder)] before:cui-absolute before:cui-opacity-30 dark:before:cui-opacity-20 cui-text-base cui-font-normal",
                 }),
             ],
             editorProps: {
                 attributes: {
-                    class: "cui-prose cui-prose-sm focus:cui-outline-none cui-font-mono cui-h-full dark:cui-prose-invert prose-pre:dark:cui-bg-gray-700",
+                    class: "cui-prose cui-prose-base focus:cui-outline-none cui-font-mono cui-h-full dark:cui-prose-invert prose-pre:dark:cui-bg-gray-700",
                 },
             },
             onUpdate: ({ editor }) => {

diff --git a/packages/ui/stories/erc20-token-picker.stories.tsx b/packages/ui/stories/erc20-token-picker.stories.tsx
@@ -67,10 +67,9 @@ const Component = (props: ERC20TokenPickerProps) => {
 
     const [open, setOpen] = useState(false);
     const [value, setValue] = useState<TokenInfoWithBalance | null>(null);
+    const [lists, setLists] = useState<TokenListWithBalance[]>([]);
     const [list, setList] = useState<TokenListWithBalance | null>(null);
 
-    const lists = useMemo(() => (list ? [list] : []), [list]);
-
     const {
         data: rawBalances,
         isLoading: loadingBalances,
@@ -113,15 +112,29 @@ const Component = (props: ERC20TokenPickerProps) => {
     useEffect(() => {
         let cancelled = false;
         const fetchData = async () => {
-            const response = await fetch(
+            let response = await fetch(
                 `${getServiceURL(Service.STATIC_CDN, false)}/token-list.json`,
             );
             if (!response.ok) {
                 console.warn("could not fetch carrot token list");
                 return;
             }
-            if (!cancelled)
-                setList((await response.json()) as TokenListWithBalance);
+            const carrotList = (await response.json()) as TokenListWithBalance;
+
+            response = await fetch(
+                "https://tokens.coingecko.com/uniswap/all.json",
+            );
+            if (!response.ok) {
+                console.warn("could not fetch coingecko token list");
+                return;
+            }
+            const coingeckoList =
+                (await response.json()) as TokenListWithBalance;
+
+            if (!cancelled) {
+                setLists([carrotList, coingeckoList]);
+                setList(carrotList);
+            }
         };
         void fetchData();
         return () => {
@@ -176,6 +189,7 @@ const Component = (props: ERC20TokenPickerProps) => {
                     onDismiss={handleDismiss}
                     lists={lists}
                     selectedList={selectedListWithBalances}
+                    onSelectedListChange={setList}
                     chainId={CHAIN_ID}
                     messages={{
                         search: {