Mattupham/fe 478 reduce fe bundle size #3290
Conversation
This reverts commit 48d9387.
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
4 Ignored Deployments
|
WalkthroughThe changes primarily involve removing default exports and converting them to named exports across various components in the project. This includes components like Changes
Poem
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (invoked as PR comments)
Additionally, you can add CodeRabbit Configration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
Outside diff range and nitpick comments (39)
packages/web/components/navbar-osmosis-update/navbar-osmosis-update.tsx (1)
Line range hint
105-108: Add a title attribute to the iframe for better accessibility and compliance with web standards.- <iframe className="z-10 h-full w-full" src={iframeUrl + "%26hide-ui%3D1"}></iframe> + <iframe className="z-10 h-full w-full" src={iframeUrl + "%26hide-ui%3D1"} title="Osmosis Updates"></iframe>packages/web/components/twitter-section/twitter-section.tsx (1)
Line range hint
32-32: Replace the array index with a unique identifier as a key to avoid potential issues with re-renders and state management in React components.- <React.Fragment key={index}> + <React.Fragment key={tweet.id}>packages/web/integrations/notifi/notifi-subscription-card/fetched-card/history-rows.tsx (5)
Line range hint
48-51: Add keyboard accessibility to clickable elements.- <div className="my-auto h-[2rem] w-full cursor-pointer bg-osmoverse-700 py-1 text-center" onClick={loadMore}> + <div className="my-auto h-[2rem] w-full cursor-pointer bg-osmoverse-700 py-1 text-center" onClick={loadMore} onKeyPress={(e) => e.key === 'Enter' && loadMore()} tabIndex={0}>
Line range hint
119-126: Ensure keyboard accessibility for clickable elements.- <div className="flex h-[1.5rem] max-w-[5.5625rem] cursor-pointer items-center text-wosmongton-200 transition-all duration-[0.2s] hover:scale-[105%] hover:text-osmoverse-200" onClick={() => { logEvent([EventName.Notifications.alertClicked]); handleClick(); }}> + <div className="flex h-[1.5rem] max-w-[5.5625rem] cursor-pointer items-center text-wosmongton-200 transition-all duration-[0.2s] hover:scale-[105%] hover:text-osmoverse-200" onClick={() => { logEvent([EventName.Notifications.alertClicked]); handleClick(); }} onKeyPress={(e) => e.key === 'Enter' && handleClick()} tabIndex={0}>
Line range hint
44-44: Avoid using array index as key in React lists.- <AvatarIcon key={index} /> + <AvatarIcon key={row.id} /> // Assuming each row has a unique 'id' field
Line range hint
91-91: Correctly specify all dependencies in theuseCallbackhook.- const handleClick = useCallback(() => { + const handleClick = useCallback((closeCard, row, setSelectedHistoryEntry, setIsOverLayEnabled, router) => {
Line range hint
146-146: Avoid usingdangerouslySetInnerHTMLdue to potential XSS vulnerabilities.- <div dangerouslySetInnerHTML={{ __html: message }} /> + <div>{message}</div> // Ensure 'message' is sanitized elsewhere if it contains HTMLpackages/web/components/cards/validator-squad-card.tsx (1)
Line range hint
47-47: Avoid using array index as key in React lists.- <AvatarIcon key={index} /> + <AvatarIcon key={validator.operator_address} /> // Assuming each validator has a unique 'operator_address'packages/web/components/token-details/token-details.tsx (1)
Line range hint
241-246: Specify the button type to avoid unintended form submissions.- <button onClick={toggleExpand}> + <button type="button" onClick={toggleExpand}>packages/web/modals/wallet-select/cosmos-wallet-state.tsx (1)
Line range hint
144-144: Remove redundantBooleancall for clarity and performance.- Boolean(downloadInfo) + downloadInfopackages/web/components/drawers/token-select-drawer.tsx (4)
Line range hint
235-238: Add keyboard accessibility for clickable elements.To ensure accessibility for keyboard-only users, consider adding keyboard event handlers (
onKeyDown,onKeyPress, oronKeyUp) that mimic theonClickbehavior for these elements.+ onKeyUp={(e) => e.key === 'Enter' && onClickAsset(coinDenom)}
Line range hint
254-257: Ensure keyboard accessibility for interactive elements.Similar to the previous comment, it's important to provide keyboard event handlers for all clickable elements to support accessibility.
+ onKeyUp={(e) => e.key === 'Enter' && onClickAsset(coinDenom)}
Line range hint
273-273: Add keyboard event handlers for accessibility.This clickable element also requires keyboard event handlers to ensure it is accessible to users who rely on keyboard navigation.
+ onKeyUp={(e) => e.key === 'Enter' && onClickAsset(coinDenom)}
Line range hint
300-311: Specify button type to prevent unintended form submissions.The button elements should explicitly specify their type to avoid unexpected behaviors when used inside forms. The default type for buttons in HTML is "submit", which can cause forms to submit unintentionally.
+ type="button"packages/web/components/table/asset-balances.tsx (3)
Line range hint
363-367: Add keyboard accessibility for button interactions.<button className="h-11 w-11 rounded-full bg-osmoverse-825 p-1 transition-[color] duration-150 ease-out hover:bg-osmoverse-800 hover:text-white-full" + onKeyUp={(e) => { if (e.key === 'Enter') onExternalTransferUrl(externalTransfer.depositUrl); }} onClick={(e) => { e.preventDefault(); if (externalTransfer && externalTransfer.depositUrl) { onExternalTransferUrl(externalTransfer.depositUrl); } else { onDeposit(coinMinimalDenom); } }} >
Line range hint
511-523: Specify button type to prevent unintended form submissions.- <Button + <Button type="button"Also applies to: 530-542
Line range hint
516-516: Use optional chaining for safer code.- const address = account?.address ?? ""; + const address = account?.address ?? undefined;Also applies to: 535-535
packages/web/components/your-balance/your-balance.tsx (3)
Line range hint
257-257: Remove unnecessaryBooleancalls to simplify the code.- const shrinkTitle = !Boolean(data?.currentPrice); + const shrinkTitle = !(data?.currentPrice);Also applies to: 307-307
Line range hint
108-108: Optimize the use of spread syntax in.reduceto improve performance.- return dustFilteredPools.reduce((total, nextPool) => { - const userPool = nextPool.poolDetail.userPoolAssets.find( - ({ asset }) => asset.currency.coinDenom === denom - ); - if (userPool) { - return userPool.asset.add(total); - } - return total; - }, new CoinPretty(currency, 0)); + let total = new CoinPretty(currency, 0); + for (const nextPool of dustFilteredPools) { + const userPool = nextPool.poolDetail.userPoolAssets.find( + ({ asset }) => asset.currency.coinDenom === denom + ); + if (userPool) { + total = userPool.asset.add(total); + } + } + return total;
Line range hint
464-471: Ensure button elements have an explicit type to avoid unexpected form submissions.- <button + <button type="button"packages/web/components/table/asset-info.tsx (2)
Line range hint
138-138: Remove redundantBooleancall for cleaner and more efficient code.- const showUnverifiedAssets = Boolean(showUnverifiedAssetsSetting?.state.showUnverifiedAssets); + const showUnverifiedAssets = showUnverifiedAssetsSetting?.state.showUnverifiedAssets;
Line range hint
546-556: Add keyboard accessibility for the activation button.<Button variant="ghost" className="flex gap-2 text-wosmongton-200 hover:text-rust-200" onClick={(e) => { e.preventDefault(); confirmUnverifiedAsset({ coinDenom, coinImageUrl }); }} + onKeyUp={(e) => { + if (e.key === 'Enter') { + e.preventDefault(); + confirmUnverifiedAsset({ coinDenom, coinImageUrl }); + } + }} > {t("assets.table.activate")} </Button>packages/web/components/complex/all-pools-table.tsx (4)
Line range hint
114-114: Remove redundantBooleancall for cleaner and more efficient code.- const sortKey = useMemo(() => (Boolean(filters.searchQuery) ? undefined : sortParams.allPoolsSort), [filters.searchQuery, sortParams.allPoolsSort]); + const sortKey = useMemo(() => (filters.searchQuery ? undefined : sortParams.allPoolsSort), [filters.searchQuery, sortParams.allPoolsSort]);
Line range hint
198-206: Consider usingfor...ofinstead offorEachfor better performance.- poolsData.forEach((pool) => { + for (const pool of poolsData) { if (pool.volume24hUsd) { volumePresenceCount++; } if (pool.feesSpent7dUsd) { feesPresenceCount++; } - }); + }
Line range hint
430-434: Add keyboard accessibility for the pool quick action cell.<PoolQuickActionCell poolId={row.original.id} cellGroupEventEmitter={cellGroupEventEmitter} onAddLiquidity={() => quickAddLiquidity(row.original.id)} + onKeyUp={(e) => { + if (e.key === 'Enter') { + quickAddLiquidity(row.original.id); + } + }} />
Line range hint
652-652: Use strict equality checks to avoid potential bugs due to type coercion.- if (type != "cosmwasm-astroport-pcl" && type != "cosmwasm-whitewhale") { + if (type !== "cosmwasm-astroport-pcl" && type !== "cosmwasm-whitewhale") {Also applies to: 653-653
packages/web/integrations/nomic/transfer.tsx (3)
Line range hint
319-321: Specify explicit types instead of usingany.Using
anytype can lead to potential bugs and maintenance issues as it bypasses TypeScript's static type checking. Consider specifying more precise types for better code safety and clarity.
Line range hint
455-455: Add keyboard accessibility for clickable elements.- <img onClick={...} /> + <img onClick={...} onKeyUp={...} onKeyDown={...} />Ensure that all clickable elements are accessible via keyboard by adding
onKeyUp,onKeyDown, oronKeyPressevents.
Line range hint
368-368: Specify the type attribute for button elements.- <button onClick={...}> + <button type="button" onClick={...}>To prevent unexpected form submissions, explicitly set the
typeattribute of button elements tobuttonunless they are intended to submit forms.Also applies to: 439-439
packages/web/modals/profile.tsx (5)
Line range hint
216-216: Remove redundantBooleancall.- Boolean(props.icnsName) + props.icnsNameThe
Booleancall is unnecessary here as the value will be coerced to a boolean implicitly.
Line range hint
447-447: Remove the redundant catch clause.- } catch (e) { - throw e; - }The catch clause that only rethrows the error is redundant and can be removed for cleaner code.
Line range hint
498-553: Specify explicit types instead of usingany.Using
anytype can lead to potential bugs and maintenance issues as it bypasses TypeScript's static type checking. Consider specifying more precise types for better code safety and clarity.Also applies to: 577-577
Line range hint
111-111: Include all necessary dependencies in theuseEffecthook.- }, []); + }, [props.onRequestClose, router.events.off, router.events.on]);Ensure that all dependencies used within the
useEffecthook are correctly listed in the dependency array to avoid stale closures and bugs.
Line range hint
259-259: Specify the type attribute for button elements.- <button onClick={...}> + <button type="button" onClick={...}>To prevent unexpected form submissions, explicitly set the
typeattribute of button elements tobuttonunless they are intended to submit forms.Also applies to: 343-343, 413-413, 465-465
packages/web/pages/components.tsx (1)
Line range hint
1114-1114: Consider using a literal key instead of a string literal for better performance and readability.- "X" + Xpackages/web/components/complex/add-conc-liquidity.tsx (4)
Line range hint
279-288: Add keyboard accessibility for clickable elements.Actions triggered by mouse events should also be accessible via keyboard events to support accessibility standards. Consider adding
onKeyUp,onKeyDown, oronKeyPressevents.+ onKeyUp={yourKeyUpHandler}
Line range hint
380-383: Specify button type to prevent unintended form submissions.The button element should explicitly declare its type to avoid unexpected behavior in forms. The default type is 'submit', which may cause form submission.
- <button + <button type="button"
Line range hint
631-634: Specify button type to prevent unintended form submissions.Similar to the previous comment, ensure that this button element explicitly declares its type to avoid unexpected behavior in forms.
- <button + <button type="button"
Line range hint
926-936: Add keyboard accessibility for clickable elements.Ensure that actions triggered by mouse events are also accessible via keyboard events to support accessibility standards. Consider adding
onKeyUp,onKeyDown, oronKeyPressevents.+ onKeyUp={yourKeyUpHandler}
|
@mattupham looks like we failed some localization tests |
There was a problem hiding this comment.
Actionable comments posted: 0
Outside diff range and nitpick comments (5)
packages/web/components/token-details/token-details.tsx (2)
Line range hint
124-124: Optimize the use of spread syntax in.reduce.- const currencies = ChainList.map((info) => info.keplrChain.currencies).reduce((a, b) => [...a, ...b]); + const currencies = ChainList.flatMap((info) => info.keplrChain.currencies);
Line range hint
241-246: Add explicittypeattribute to button to prevent unintended form submissions.- <button className={`${!isExpanded && "bottom-0"} absolute z-10 flex items-center gap-1 self-stretch`} onClick={toggleExpand}> + <button type="button" className={`${!isExpanded && "bottom-0"} absolute z-10 flex items-center gap-1 self-stretch`} onClick={toggleExpand}>packages/web/modals/wallet-select/cosmos-wallet-state.tsx (1)
Line range hint
144-144: Remove redundantBooleancall for cleaner code.- Boolean(downloadInfo) + downloadInfopackages/web/pages/assets/[denom].tsx (2)
Line range hint
179-179: Optimize the use of spread syntax in.reduce.- const currencies = ChainList.map((info) => info.keplrChain.currencies).reduce((a, b) => [...a, ...b]); + const currencies = ChainList.flatMap((info) => info.keplrChain.currencies);Also applies to: 312-312
Line range hint
598-598: Use literal keys directly for cleaner and more efficient code.- const userId = tokenDetails.twitterURL.split("/").pop(); + const userId = tokenDetails.twitterURL.split("/").pop()!;
What is the purpose of the change:
Linear Task
Linear Task URL
Brief Changelog
Testing and Verifying