diff --git a/.changeset/fifty-goats-run.md b/.changeset/fifty-goats-run.md new file mode 100644 index 000000000..021acfa4e --- /dev/null +++ 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 new file mode 100644 index 000000000..88b4ef052 --- /dev/null +++ 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 index 3d98d071b..9d8f61e1c 100644 --- 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< /> -
-
- {t("preferences.decentralization")} - - - {t("preferences.decentralization.info")} + {!!SUBGRAPH_URL[chainId as ChainId] && ( +
+
+ + {t("preferences.decentralization")} - + + + {t("preferences.decentralization.info")} + + +
+
- -
+ )} {__STAGING_MODE__ && (
diff --git a/packages/ui/.size-limit.js b/packages/ui/.size-limit.js index 5b15f26e6..f87a3d3e2 100644 --- 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 index 46d507f60..be2e67c66 100644 --- 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({ = 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 index 2204fed25..6395c471f 100644 --- 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 index 325f1fdc4..74f64c855 100644 --- 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(null); + const [lists, setLists] = useState([]); const [list, setList] = useState(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: {