Release 2.1.0 #597
Release 2.1.0 #597
Conversation
…nKrypt into feat/new-network-ui
…nto feat/new-network-ui
…nto feat/new-network-ui
…nto feat/custom-networks
…rk-ui Devop/amplitude for new network UI
Feat/new update UI
devop: add litecoin api support
WalkthroughThis pull request introduces updates to the Enkrypt browser extension, focusing on version management, network tracking, and user interface enhancements. The changes include an update to the package version, improvements to the metrics tracking system, the addition of functionality for managing recently sent addresses, and refinements to network management interfaces. Key updates involve expanded parameters for network tracking functions, new enumerations for event types, and enhancements to the user interface for better interaction with network features. Changes
Sequence DiagramsequenceDiagram
participant User
participant NetworkMenu
participant NetworksState
participant MetricsTracker
participant RecentAddresses
User->>NetworkMenu: Select/Pin Network
NetworkMenu->>NetworksState: Update Network Status
NetworksState-->>MetricsTracker: Track Network Change
NetworkMenu->>RecentAddresses: Record Sent Address
MetricsTracker->>NetworksState: Log Used Features
Possibly related PRs
Suggested reviewers
📜 Recent review detailsConfiguration used: .coderabbit.yaml 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
⏰ Context from checks skipped due to timeout of 90000ms (2)
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 using PR comments)
Other keywords and placeholders
Documentation and Community
|
|
💼 Build Files |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 12
🧹 Nitpick comments (42)
packages/extension/src/types/globals.ts (1)
10-10: Consider improving type safety and documentation.The
unisatproperty is explicitly typed asany, which bypasses TypeScript's type checking. Consider:
- Creating a proper type/interface for the expected shape of the
unisatprovider- Adding JSDoc documentation explaining the purpose and usage of this property
Example improvement:
+ /** Bitcoin Unisat provider interface for wallet functionality */ + export interface UnisatProvider { + // Add expected methods and properties + connected: boolean; + request(args: any): Promise<any>; // Define proper types + } export interface EnkryptWindow { enkrypt: { providers: { [key: string]: any; }; settings: SettingsType; }; - unisat?: any; + unisat?: UnisatProvider; [key: string]: any; }packages/extension/src/ui/action/views/add-network/views/add-network-list.vue (2)
28-31: Simplify conditional expression for better readabilityThe condition in lines 28-31 can be simplified to enhance readability. The current condition:
v-if=" searchInput === '' || (searchInput !== '' && displayCustomNetworks.length > 0) "can be simplified to:
v-if="searchInput === '' || displayCustomNetworks.length > 0"
245-251: Avoid fixed heights for better responsivenessIn the styling for the loading state:
&__loading { width: 100%; height: 350px; display: flex; justify-content: center; align-items: center; }Using a fixed height of
350pxmay cause layout issues on different screen sizes. Consider using relative units or allowing the content to dictate the height for better responsiveness.packages/extension/src/ui/action/components/app-menu/index.vue (2)
184-238: Optimize search logic for improved performanceThe computed property
searchNetworksperforms several array operations which can be optimized. Currently, it filters and sorts networks in multiple steps, which may impact performance with large datasets.Consider consolidating the search and sort operations to minimize iterations over the networks array. Additionally, leveraging more efficient search algorithms or data structures could enhance performance.
261-270: Add null check forscrollDivto prevent potential errorsIn the
useScrollhook:const { isScrolling, y } = useScroll(scrollDiv, { throttle: 100 });Ensure that
scrollDivis notnullbefore using it. Even though Vue refs are reactive, adding a null check can prevent potential runtime errors if the element is not yet rendered.packages/extension/src/ui/action/App.vue (4)
257-280: Improve error handling ininitUpdateStateIn the
initUpdateStatefunction, errors are caught and logged to the console:} catch (error) { console.error('Failed to init update state:', error); loadedUpdates.value = false; }Consider providing more user-friendly feedback or retry mechanisms in case of failures. This will enhance the user experience by informing them of any issues with fetching updates.
296-312: Simplify logic ingetShowUpdatesBtnThe function
getShowUpdatesBtncan be simplified to improve readability:if ( lastVersionViewed === '' || (currentVersion && semverGT(currentVersion, lastVersionViewed)) ) { // Logic to show updates button } else { showUpdatesBtn.value = false; }Consider refactoring the conditions and adding comments to clarify the logic, making it easier for future maintenance.
681-688: Handle potential errors when updating pinned networksIn the
setIsPinnedNetworkmethod, errors are caught and logged:} catch (error) { console.error('Failed to set pinned network:', error); }Consider notifying the user if updating the pinned status fails, so they are aware that their action did not complete successfully.
758-775: Accessibility considerations for focus statesIn the styling of the app menu:
.app__menu { // Styles }Ensure that interactive elements, such as buttons and links, have appropriate focus styles for accessibility. This will improve the user experience for keyboard navigation and assistive technologies.
packages/extension/src/libs/recently-sent-addresses/types.ts (1)
1-3: Consider enhancing type safety and following modern TypeScript conventions.A few suggestions to improve the type definition:
- Remove the
Iprefix as it's not recommended in modern TypeScript- Consider adding address format validation through a more specific type
-export type IState = { +export type RecentAddressesState = { - addresses: string[] + addresses: WalletAddress[] // Consider creating a branded type for validated addresses } +type WalletAddress = string & { readonly __brand: unique symbol } +export const validateAddress = (address: string): WalletAddress => { + // Add address validation logic here + return address as WalletAddress +}packages/extension/src/ui/action/types/network-category.ts (1)
1-5: Consider adding documentation and removing unnecessary semicolon.The enum is well-structured, but could benefit from:
- JSDoc comments explaining each category's purpose
- Removal of trailing semicolon
+/** Categories for filtering network lists in the UI */ export enum NetworksCategory { + /** Show all available networks */ All = 'all', + /** Show only pinned/favorite networks */ Pinned = 'pinned', + /** Show newly added networks */ New = 'new', -}; +}packages/extension/src/libs/updates-state/types.ts (1)
1-9: Enhance type safety and add documentation for update state management.Consider the following improvements:
- Remove
Iprefix from interface name- Add JSDoc comments explaining the purpose of each property
- Use more specific types for version strings and timestamps
export enum StorageKeys { updatesInfo = 'updates-info', } -export interface IState { +/** Represents the state of application updates */ +export interface UpdatesState { + /** The last version that the user has viewed */ lastVersionViewed: string; + /** The current release version available */ currentRelease: string; + /** Unix timestamp of when the current release was published */ - currentReleaseTimestamp: number; + currentReleaseTimestamp: UnixTimestamp; } + +/** Type alias for Unix timestamps to prevent confusion with other number values */ +type UnixTimestamp = number; + +/** Validates semantic version format */ +export const isValidVersion = (version: string): boolean => { + return /^\d+\.\d+\.\d+$/.test(version); +};packages/extension/src/ui/action/types/network-sort.ts (1)
1-13: Add documentation and improve naming clarity.Consider the following improvements:
- Add JSDoc comments explaining TVL and sort options
- Remove unnecessary semicolons after enums
- Use more descriptive property names in the interface
+/** Available options for sorting networks */ export enum NetworkSortOption { Name = 'name', + /** Total Value Locked - represents the total value of assets in the network */ Tvl = 'tvl', -}; +} + +/** Sort direction for network lists */ export enum NetworkSortDirection { Asc = 'asc', Desc = 'desc', -}; +} +/** Configuration for network list sorting */ export interface NetworkSort { - name: NetworkSortOption; + sortBy: NetworkSortOption; direction: NetworkSortDirection; }packages/extension/src/ui/action/types/updates.ts (1)
3-10: Add JSDoc documentation and type constraints for the Version interface.Consider adding documentation and type constraints to improve maintainability and type safety:
+/** + * Represents a version update for the Enkrypt browser extension + */ export interface Version { - version: string; + version: `${number}.${number}.${number}`; // Semantic versioning format description?: string; chains_added?: NetworkNames[]; swap_added?: NetworkNames[]; - release_date: string; + release_date: `${number}-${number}-${number}`; // YYYY-MM-DD format release_link: string; }packages/extension/src/libs/networks-state/types.ts (1)
13-16: Enhance type safety for feature tracking.Consider using enums or const arrays to restrict the possible values for networks and swap features:
+/** Features that can be tracked in the application */ +export enum TrackedFeature { + NETWORKS = 'networks', + SWAP = 'swap', +} newUsedFeatures: { - networks: string[]; - swap: string[]; + [TrackedFeature.NETWORKS]: NetworkNames[]; + [TrackedFeature.SWAP]: NetworkNames[]; };packages/extension/src/ui/action/icons/actions/sort/sort-active-icon.vue (1)
2-16: Add ARIA attributes for better accessibility.The SVG icon should include ARIA attributes for better screen reader support.
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" + role="img" + aria-label="Sort active indicator" :class="{ active: isActive }" >packages/extension/src/providers/ethereum/networks/palm.ts (1)
5-5: Document the reason for using an empty activity handler.While the implementation is correct, consider documenting why an empty activity handler is used, similar to how the API limitations are documented above.
NFTHandler: shNFTHandler, + // Using empty activity handler due to API limitations activityHandler: wrapActivityHandler(() => Promise.resolve([])),Also applies to: 24-24
packages/extension/src/ui/action/utils/filters.ts (1)
21-25: LGTM! Consider adding input validation.The implementation is clean and handles falsy values appropriately. Consider adding length validation for better robustness.
export const truncate = (value: string, length: number): string => { if (!value) return ''; + if (length < 0) return value; value = value.toString(); return value.length > length ? value.substring(0, length) + '...' : value; }packages/extension/src/libs/recently-sent-addresses/index.ts (2)
16-30: Consider adding error handling and validation.While the implementation is solid, consider adding:
- Address format validation
- Error handling for storage operations
- Type checking for network parameter
async addRecentlySentAddress( network: Pick<BaseNetwork, 'name' | 'displayAddress'>, address: string, ): Promise<void> { + if (!address?.trim()) { + throw new Error('Invalid address'); + } const key = network.name - const state: IState | undefined = await this.#storage.get(key) + try { + const state: IState | undefined = await this.#storage.get(key) const newState: IState = { ...state, addresses: Array.from(new Set([ network.displayAddress(address), ...(state?.addresses ?? []), ])).slice(0, 5), } await this.#storage.set(key, newState) + } catch (error) { + throw new Error(`Failed to save address: ${error.message}`); + } }
32-37: Consider adding caching for performance.For frequently accessed networks, consider implementing a simple in-memory cache to reduce storage reads.
+ #cache: Map<NetworkNames, string[]> = new Map() + async getRecentlySentAddresses(networkName: NetworkNames): Promise<string[]> { const key = networkName + if (this.#cache.has(key)) { + return this.#cache.get(key)!; + } const out: IState | undefined = await this.#storage.get(key) - if (!out) return [] - return out.addresses + const addresses = out?.addresses ?? []; + this.#cache.set(key, addresses); + return addresses; }packages/extension/src/providers/bitcoin/methods/btc_switchNetwork.ts (1)
52-54: Fix typo in error messageThere's a typo in the error message: "porvided" should be "provided".
- `btc_switchNetwork: porvided network ${payload.params![0] + `btc_switchNetwork: provided network ${payload.params![0]packages/extension/src/ui/action/utils/browser.ts (2)
67-68: Consider using URL constructor for better URL handling.The URL construction could be improved using the
URLclass for better maintainability and safety.- const url = 'https://raw.githubusercontent.com/enkryptcom/dynamic-data/main/configs/release-versions' - const fetchUrl = browser === BROWSER_NAMES.safari ? `${url}-safari.json` : `${url}.json` + const baseUrl = new URL('configs/release-versions', 'https://raw.githubusercontent.com/enkryptcom/dynamic-data/main/'); + const filename = browser === BROWSER_NAMES.safari ? 'release-versions-safari.json' : 'release-versions.json'; + const fetchUrl = new URL(filename, baseUrl).toString();
69-77: Consider adding request timeout and retry logic.For better reliability when fetching updates, consider adding:
- Request timeout to prevent hanging
- Retry logic for transient failures
+ const controller = new AbortController(); + const timeoutId = setTimeout(() => controller.abort(), 5000); return fetch( - fetchUrl + fetchUrl, + { signal: controller.signal } ) .then(res => res.json()) .catch((error) => { console.error('Failed to fetch updates:', error); return null - } + }) + .finally(() => clearTimeout(timeoutId));packages/extension/src/ui/action/views/add-network/index.vue (2)
38-40: Consider adding loading state during network operations.The
setPinnedNetworkhandler should manage loading state to prevent multiple rapid updates.+const isPinning = ref(false); + const setPinnedNetwork = async (network: string, isPinned: boolean) => { + if (isPinning.value) return; + isPinning.value = true; + try { emit('update:pinNetwork', network, isPinned); + } finally { + isPinning.value = false; + } };
48-50: Consider debouncing navigation tracking events.The tracking events in
toCustomNetworkandtoNetworkListshould be debounced to prevent spam.+import { debounce } from 'lodash-es'; + +const trackNetworkDebounced = debounce(trackNetwork, 1000, { leading: true, trailing: false }); + const toCustomNetwork = () => { isNetworkList.value = false; - trackNetwork(NetworkChangeEvents.NetworkAddCustomClicked, {}); + trackNetworkDebounced(NetworkChangeEvents.NetworkAddCustomClicked, {}); }; const toNetworkList = () => { - trackNetwork(NetworkChangeEvents.NetworkCustomBackButton, {}); + trackNetworkDebounced(NetworkChangeEvents.NetworkCustomBackButton, {}); isNetworkList.value = true; };Also applies to: 52-55
packages/extension/src/libs/metrics/index.ts (1)
96-102: Consider privacy implications of update tracking.The new
trackUpdatesEventsfunction collects additional user behavior data. Consider:
- Adding user opt-out option for update tracking
- Documenting what data is collected in the privacy policy
- Ensuring compliance with privacy regulations
packages/extension/src/ui/action/views/add-network/components/add-network-search.vue (1)
10-10: Good UI/UX improvements!The changes enhance usability and accessibility:
- Added aria-label for screen readers
- Improved visual feedback with hover states
- Better padding and cursor indication
Consider adding keyboard navigation support for better accessibility:
<a @click="$emit('action:customNetwork')" aria-label="Add Custom Network" + tabindex="0" + @keydown.enter="$emit('action:customNetwork')" >Also applies to: 12-12, 67-67, 69-70
packages/extension/src/providers/ethereum/methods/wallet_switchEthereumChain.ts (1)
71-73: Consider improving error message readability.The error message template string could be more readable by avoiding line breaks within the interpolation.
- `wallet_switchEthereumChain: provided network ${payload.params![0].chainId - } not supported`, + `wallet_switchEthereumChain: provided network ${payload.params![0].chainId} not supported`,packages/extension/src/ui/action/components/app-menu/components/app-menu-tab.vue (1)
65-100: Consider adding keyboard navigation.While the component has good styling and mouse interaction, it would benefit from keyboard navigation support for better accessibility.
Consider adding keyboard navigation support:
+const handleKeyDown = (e: KeyboardEvent, category: NetworksCategory) => { + if (e.key === 'Enter' || e.key === ' ') { + e.preventDefault(); + setActiveCategory(category); + } +};And update the template:
@click="setActiveCategory(NetworksCategory.All)" + @keydown="handleKeyDown($event, NetworksCategory.All)" + tabindex="0"packages/extension/src/ui/action/icons/actions/swap.vue (1)
9-14: Consider adding ARIA attributes for accessibility.While the SVG implementation is correct, it could benefit from accessibility improvements.
Add ARIA attributes for better accessibility:
<svg + role="img" + aria-label="swap icon" width="28" height="28"packages/extension/src/types/provider.ts (1)
133-133: Remove unnecessary constructor.The constructor can be removed as it doesn't add any functionality beyond what TypeScript's parameter properties would provide.
- constructor(node: string, options?: unknown) { }🧰 Tools
🪛 Biome (1.9.4)
[error] 133-133: This constructor is unnecessary.
Unsafe fix: Remove the unnecessary constructor.
(lint/complexity/noUselessConstructor)
packages/extension/src/libs/networks-state/index.ts (1)
109-115: Consider using optional chaining.The state access can be simplified using optional chaining.
- if (state && state.newUsedFeatures) { + if (state?.newUsedFeatures) {🧰 Tools
🪛 Biome (1.9.4)
[error] 111-111: Change to an optional chain.
Unsafe fix: Change to an optional chain.
(lint/complexity/useOptionalChain)
packages/extension/src/ui/action/components/app-menu/components/app-menu-sort.vue (1)
1-56: Consider removing commented code.The template contains a significant amount of commented code for future features. Consider moving this to a separate branch or creating a GitHub issue to track the future implementation.
packages/extension/src/providers/common/ui/send-transaction/send-contacts-list.vue (1)
128-156: Consider adjusting the timeout duration.The 500ms timeout might be too short for slower networks or devices. Consider:
- Making the timeout duration configurable
- Increasing it to at least 1000ms
- Adding a loading state to improve UX
packages/extension/src/ui/action/views/add-network/views/add-custom-network.vue (1)
268-281: Consider adding error handling for network status updates.The network status update and tracking implementation looks good, but consider adding error handling for the
setNetworkStatuscall.- await networksState.setNetworkStatus(customNetworkOptions.name, true); + try { + await networksState.setNetworkStatus(customNetworkOptions.name, true); + } catch (error) { + console.error('Failed to update network status:', error); + // Consider showing user feedback + }packages/extension/src/ui/action/icons/actions/pin.vue (1)
1-84: Consider extracting SVG paths to separate components.While the implementation is functional, the SVG paths make the template quite lengthy. Consider extracting each SVG state into a separate component for better maintainability.
Example structure:
// PinIconUnpinnedActive.vue <template> <svg> <!-- SVG content for unpinned active state --> </svg> </template> // pin.vue <template> <pin-icon-unpinned-active v-if="!isPinned && isActive" /> <pin-icon-unpinned-inactive v-else-if="!isPinned && !isActive" /> <!-- ... --> </template>packages/extension/src/ui/action/icons/actions/sort/sort-direction-icon.vue (1)
1-34: Add ARIA attributes for accessibility.The SVG icon should include ARIA attributes to improve accessibility for screen readers.
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg" :class="{ 'flip-vertical': isAsc }" + role="img" + :aria-label="isAsc ? 'Sort ascending' : 'Sort descending'" >packages/extension/src/ui/action/components/base-input-debounced/index.vue (1)
54-56: Consider making the debounce timeout configurable.The hardcoded 600ms timeout might not be optimal for all use cases. Consider making it a prop with a default value of 600ms.
const timeout = ref(0); +const props = defineProps({ placeholder: { type: String, default: () => { return ''; }, }, type: { type: String, default: () => { return 'text'; }, }, + debounceTimeout: { + type: Number, + default: 600, + }, }); const onUserInput = (): void => { clearTimeout(timeout.value); timeout.value = window.setTimeout(() => { if (!inputText.value) { inputText.value = ''; } emit('update:valueDebounced', inputText.value); - }, 600); + }, props.debounceTimeout); };packages/extension/src/ui/action/components/app-menu/components/app-menu-item.vue (3)
77-95: Ensure consistency inpropsdefault values and required fieldsIn the
propsdefinition, there is inconsistent usage ofrequiredanddefaultproperties. For better readability and maintainability, it's recommended to standardize the approach across all props.Consider updating the
isActiveprop to have a default value without using a function:isActive: { type: Boolean, - default: () => { - return false; - }, + default: false, },Also, ensure that the
requiredfield is consistently specified for all props where necessary.
Line range hint
105-151: Optimize thegetAverageRGBfunction for better performanceProcessing image data pixel by pixel can be resource-intensive, especially with large images. Consider optimizing the
getAverageRGBfunction to improve performance.Suggestions:
- Reduce the image size by scaling down the canvas context before processing.
- Increase the
blockSizeto sample fewer pixels.- Use a more efficient algorithm or a library designed for color analysis.
This will enhance the user experience by reducing potential lag.
372-373: Remove unnecessary vendor prefixes in CSSThe
-webkit-stickyvendor prefix is largely obsolete as modern browsers widely supportposition: sticky;. Removing unnecessary prefixes can simplify the codebase.Apply this diff to remove the outdated prefix:
- position: -webkit-sticky; position: sticky;packages/extension/src/providers/solana/ui/send-transaction/index.vue (1)
724-728: Consider handling potential errors when tracking addresses.The tracking of recently sent addresses is correctly implemented, but it might be good to handle potential storage errors gracefully.
Consider wrapping the call in a try-catch block to ensure transaction processing continues even if address tracking fails:
- await recentlySentAddresses.addRecentlySentAddress( - props.network, - addressTo.value, - ); + try { + await recentlySentAddresses.addRecentlySentAddress( + props.network, + addressTo.value, + ); + } catch (error) { + console.error('Failed to track recently sent address:', error); + // Continue with the transaction + }
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (82)
packages/extension/package.json(1 hunks)packages/extension/src/libs/metrics/index.ts(4 hunks)packages/extension/src/libs/metrics/types.ts(2 hunks)packages/extension/src/libs/networks-state/index.ts(4 hunks)packages/extension/src/libs/networks-state/types.ts(1 hunks)packages/extension/src/libs/recently-sent-addresses/index.ts(1 hunks)packages/extension/src/libs/recently-sent-addresses/types.ts(1 hunks)packages/extension/src/libs/updates-state/index.ts(1 hunks)packages/extension/src/libs/updates-state/types.ts(1 hunks)packages/extension/src/libs/utils/networks.ts(2 hunks)packages/extension/src/providers/bitcoin/inject.ts(1 hunks)packages/extension/src/providers/bitcoin/methods/btc_getNetwork.ts(1 hunks)packages/extension/src/providers/bitcoin/methods/btc_switchNetwork.ts(3 hunks)packages/extension/src/providers/bitcoin/types/index.ts(1 hunks)packages/extension/src/providers/bitcoin/ui/send-transaction/index.vue(2 hunks)packages/extension/src/providers/common/ui/send-transaction/nft-select-list/components/nft-select-list-item.vue(2 hunks)packages/extension/src/providers/common/ui/send-transaction/send-address-item.vue(2 hunks)packages/extension/src/providers/common/ui/send-transaction/send-contacts-list.vue(7 hunks)packages/extension/src/providers/common/ui/send-transaction/send-nft-select.vue(2 hunks)packages/extension/src/providers/ethereum/methods/wallet_addEthereumChain.ts(2 hunks)packages/extension/src/providers/ethereum/methods/wallet_switchEthereumChain.ts(3 hunks)packages/extension/src/providers/ethereum/networks/arb-nova.ts(2 hunks)packages/extension/src/providers/ethereum/networks/bsc.ts(1 hunks)packages/extension/src/providers/ethereum/networks/holesky.ts(2 hunks)packages/extension/src/providers/ethereum/networks/op-bnb.ts(2 hunks)packages/extension/src/providers/ethereum/networks/palm.ts(2 hunks)packages/extension/src/providers/ethereum/ui/send-transaction/index.vue(3 hunks)packages/extension/src/providers/kadena/ui/send-transaction/index.vue(2 hunks)packages/extension/src/providers/polkadot/ui/dot-verify-transaction.vue(2 hunks)packages/extension/src/providers/polkadot/ui/send-transaction/index.vue(2 hunks)packages/extension/src/providers/solana/networks/solana.ts(1 hunks)packages/extension/src/providers/solana/ui/send-transaction/index.vue(2 hunks)packages/extension/src/types/globals.ts(1 hunks)packages/extension/src/types/provider.ts(2 hunks)packages/extension/src/ui/action/App.vue(16 hunks)packages/extension/src/ui/action/components/Menu/index.vue(0 hunks)packages/extension/src/ui/action/components/accounts-header/components/header-accounts.vue(2 hunks)packages/extension/src/ui/action/components/accounts-header/index.vue(1 hunks)packages/extension/src/ui/action/components/app-menu/components/app-menu-item.vue(5 hunks)packages/extension/src/ui/action/components/app-menu/components/app-menu-sort.vue(1 hunks)packages/extension/src/ui/action/components/app-menu/components/app-menu-tab.vue(1 hunks)packages/extension/src/ui/action/components/app-menu/index.vue(2 hunks)packages/extension/src/ui/action/components/app-menu/store.ts(1 hunks)packages/extension/src/ui/action/components/base-input-debounced/index.vue(1 hunks)packages/extension/src/ui/action/components/base-search/index.vue(1 hunks)packages/extension/src/ui/action/components/custom-scrollbar/index.vue(1 hunks)packages/extension/src/ui/action/components/network-menu/index.vue(1 hunks)packages/extension/src/ui/action/icons/actions/buy.vue(1 hunks)packages/extension/src/ui/action/icons/actions/deposit.vue(1 hunks)packages/extension/src/ui/action/icons/actions/pin.vue(1 hunks)packages/extension/src/ui/action/icons/actions/send.vue(1 hunks)packages/extension/src/ui/action/icons/actions/sort/sort-active-icon.vue(1 hunks)packages/extension/src/ui/action/icons/actions/sort/sort-btn-icon.vue(1 hunks)packages/extension/src/ui/action/icons/actions/sort/sort-direction-icon.vue(1 hunks)packages/extension/src/ui/action/icons/actions/swap.vue(1 hunks)packages/extension/src/ui/action/icons/actions/trash.vue(1 hunks)packages/extension/src/ui/action/icons/asset/new-icon.vue(1 hunks)packages/extension/src/ui/action/icons/asset/swap-added-icon.vue(1 hunks)packages/extension/src/ui/action/icons/common/custom-network-icon.vue(1 hunks)packages/extension/src/ui/action/icons/common/drag-icon.vue(1 hunks)packages/extension/src/ui/action/icons/common/manage-networks-icon.vue(1 hunks)packages/extension/src/ui/action/icons/common/plus-icon.vue(1 hunks)packages/extension/src/ui/action/icons/common/plus-small-icon.vue(1 hunks)packages/extension/src/ui/action/icons/tabs/assets.vue(1 hunks)packages/extension/src/ui/action/icons/updates/heart.vue(1 hunks)packages/extension/src/ui/action/icons/updates/updated.vue(1 hunks)packages/extension/src/ui/action/styles/color.less(2 hunks)packages/extension/src/ui/action/styles/hover-transitions.less(1 hunks)packages/extension/src/ui/action/styles/theme.less(1 hunks)packages/extension/src/ui/action/types/filters.ts(2 hunks)packages/extension/src/ui/action/types/network-category.ts(1 hunks)packages/extension/src/ui/action/types/network-sort.ts(1 hunks)packages/extension/src/ui/action/types/updates.ts(1 hunks)packages/extension/src/ui/action/utils/browser.ts(2 hunks)packages/extension/src/ui/action/utils/filters.ts(1 hunks)packages/extension/src/ui/action/views/add-network/components/add-network-item.vue(3 hunks)packages/extension/src/ui/action/views/add-network/components/add-network-search.vue(3 hunks)packages/extension/src/ui/action/views/add-network/index.vue(2 hunks)packages/extension/src/ui/action/views/add-network/views/add-custom-network.vue(4 hunks)packages/extension/src/ui/action/views/add-network/views/add-network-list.vue(7 hunks)packages/extension/src/ui/action/views/asset-detail-view/index.vue(2 hunks)packages/extension/src/ui/action/views/assets-select-list/components/assets-select-list-item.vue(1 hunks)
⛔ Files not processed due to max files limit (14)
- packages/extension/src/ui/action/views/network-activity/components/network-activity-action.vue
- packages/extension/src/ui/action/views/network-activity/components/network-activity-transaction.vue
- packages/extension/src/ui/action/views/network-assets/components/network-assets-header.vue
- packages/extension/src/ui/action/views/network-assets/components/network-assets-item.vue
- packages/extension/src/ui/action/views/network-assets/index.vue
- packages/extension/src/ui/action/views/swap/components/swap-token-amount-input/components/swap-token-amount-input.vue
- packages/extension/src/ui/action/views/swap/components/swap-token-select/index.vue
- packages/extension/src/ui/action/views/updates/components/updates-header.vue
- packages/extension/src/ui/action/views/updates/components/updates-network.vue
- packages/extension/src/ui/action/views/updates/index.vue
- packages/swap/src/providers/paraswap/index.ts
- packages/swap/src/providers/rango/index.ts
- packages/swap/src/providers/rango/supported.ts
- packages/swap/tests/changelly.test.ts
💤 Files with no reviewable changes (1)
- packages/extension/src/ui/action/components/Menu/index.vue
✅ Files skipped from review due to trivial changes (16)
- packages/extension/src/ui/action/styles/theme.less
- packages/extension/src/ui/action/components/network-menu/index.vue
- packages/extension/package.json
- packages/extension/src/ui/action/icons/asset/new-icon.vue
- packages/extension/src/providers/ethereum/methods/wallet_addEthereumChain.ts
- packages/extension/src/ui/action/icons/common/plus-icon.vue
- packages/extension/src/ui/action/icons/actions/trash.vue
- packages/extension/src/ui/action/icons/actions/sort/sort-btn-icon.vue
- packages/extension/src/ui/action/components/base-search/index.vue
- packages/extension/src/providers/solana/networks/solana.ts
- packages/extension/src/ui/action/icons/actions/deposit.vue
- packages/extension/src/ui/action/icons/updates/heart.vue
- packages/extension/src/ui/action/components/accounts-header/index.vue
- packages/extension/src/ui/action/icons/common/plus-small-icon.vue
- packages/extension/src/ui/action/icons/asset/swap-added-icon.vue
- packages/extension/src/ui/action/icons/updates/updated.vue
🧰 Additional context used
🪛 Biome (1.9.4)
packages/extension/src/types/provider.ts
[error] 133-133: This constructor is unnecessary.
Unsafe fix: Remove the unnecessary constructor.
(lint/complexity/noUselessConstructor)
packages/extension/src/libs/networks-state/index.ts
[error] 111-111: Change to an optional chain.
Unsafe fix: Change to an optional chain.
(lint/complexity/useOptionalChain)
[error] 144-144: Change to an optional chain.
Unsafe fix: Change to an optional chain.
(lint/complexity/useOptionalChain)
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: buildAll
🔇 Additional comments (74)
packages/extension/src/ui/action/icons/common/drag-icon.vue (2)
4-8: LGTM! SVG attributes follow Material Design guidelines.The SVG dimensions (24x24) and fill opacity (0.38) align with Material Design icon specifications, which is good for maintaining visual consistency.
11-11: Verify the SVG path renders correctly.The new path data appears to create a multi-directional arrow icon, which is appropriate for a drag handle. However, please verify that:
- The icon renders correctly across different browsers
- The icon maintains visual clarity at smaller sizes
Consider adding a comment describing the icon's appearance or linking to its design source for better maintainability.
packages/extension/src/providers/common/ui/send-transaction/send-address-item.vue (2)
10-10: LGTM! Good defensive programming.The addition of the
v-ifcondition is a good practice to prevent rendering empty heading elements when the account name is not available.
42-45: LGTM! Improved type safety.The explicit type definition with required/optional properties provides better type safety and documentation of the expected prop structure.
packages/extension/src/providers/bitcoin/inject.ts (1)
139-142: Consider security implications of global injection.The code injects the provider into the global scope in two places. This could potentially:
- Lead to conflicts with other extensions or scripts
- Create security vulnerabilities if the page is compromised
Consider:
- Adding checks for existing properties before injection
- Using Object.defineProperty with appropriate property descriptors
- Adding error handling for injection failures
Let's verify if there are any existing properties that might conflict:
packages/extension/src/ui/action/views/add-network/views/add-network-list.vue (2)
209-211: Confirm expected behavior when unpinning deactivated test networksIn the
onTestnetTogglemethod, when a test network is deactivated (isActiveisfalse) and it is pinned, it is automatically unpinned:if (!isActive && getIsPinned(networkName)) { onTogglePin(networkName, false); }Ensure that this aligns with user expectations. Users might expect pinned networks to remain pinned regardless of their active status. Clarify this behavior in the UI or consider allowing users to keep test networks pinned even when deactivated.
✅ Verification successful
Automatic unpinning of deactivated test networks is an intentional UX pattern
The behavior of automatically unpinning deactivated test networks is a deliberate design choice that helps maintain a clean network state. This is evidenced by:
- The dedicated "Pinned" networks category in the UI
- Clear "Pin Network" tooltips and user interface elements
- The specific implementation that only affects test networks
- Proper tracking of network pinning status changes
The current implementation aligns with good UX practices by preventing the accumulation of inactive test networks in the pinned section, which could otherwise lead to user confusion.
🏁 Scripts executed
The following scripts were executed for the analysis:
Error: No shell scripts found
Script:
#!/bin/bash # Search for files related to network pinning and their UI components echo "=== Files containing 'pin' or 'unpin' ====" rg -l "pin|unpin" --type vue --type ts echo -e "\n=== UI text related to pinning ====" rg -i "pin.*network" --type vue --type ts echo -e "\n=== Implementation of pinning functionality ====" ast-grep --pattern 'function $_(networkName, isPinned) { $$$ }' echo -e "\n=== Documentation about network management ====" fd "README|CONTRIBUTING" --extension md | xargs rg -i "network.*pin|pin.*network"Length of output: 710
Script:
#!/bin/bash # Search for pinning-related code and text echo "=== Files containing pin/unpin functionality ===" rg -l "pin|unpin" packages/extension/ echo -e "\n=== UI messages and documentation about pinning ===" rg -i "pin.*network|network.*pin" packages/extension/ echo -e "\n=== Related function implementations ===" rg -A 5 "function.*TogglePin|function.*Pin" packages/extension/ echo -e "\n=== Network management UI components ===" rg -A 3 "network.*active|isActive.*network" packages/extension/Length of output: 14517
192-194: Ensure consistent activation state when pinning test networksIn the
onTogglePinmethod, when pinning a test network (isActiveistrue), the test network is automatically enabled by callingsetTestnetStatus:if (isActive && allTestNets.value.find(net => net.name === networkName)) { await networksState.setTestnetStatus(networkName, isActive); }This could lead to unexpected behavior if a user pins a test network without intending to enable it. Consider decoupling the pinning action from enabling the test network, or prompting the user to confirm enabling the test network upon pinning.
✅ Verification successful
Auto-enabling test networks when pinned is an intentional UX pattern
The current implementation is correct and intentional. The codebase shows a well-structured separation between network pinning and testnet visibility, with dedicated UI components and state management. The automatic enabling of testnets when pinned provides a smoother user experience, as users explicitly choose to interact with the testnets section of the UI.
🏁 Scripts executed
The following scripts were executed for the analysis:
Error: No shell scripts found
Script:
#!/bin/bash # Find networksState implementation and related files fd "networks-state" --type f # Look for documentation about network management fd "README|CONTRIBUTING|DOCS" --type f --exec grep -l -i "network" {} \; # Find implementations of setNetworkStatus and setTestnetStatus ast-grep --pattern 'setNetworkStatus($$$)' ast-grep --pattern 'setTestnetStatus($$$)' # Find similar patterns of network activation rg "setTestnetStatus|setNetworkStatus" -A 2 -B 2Length of output: 4915
Script:
#!/bin/bash # Get the full implementation of NetworksState cat packages/extension/src/libs/networks-state/index.ts # Look for any UI components or strings that might indicate user communication about this behavior rg -i "testnet|test network" packages/extension/src/ui/Length of output: 12170
packages/extension/src/ui/action/types/filters.ts (1)
7-7: LGTM!The addition of the
truncatefilter follows the established pattern and is properly exported.Also applies to: 16-16
packages/extension/src/providers/ethereum/networks/holesky.ts (1)
4-4: LGTM! Verify consistent implementation across network files.The implementation correctly wraps the activity handler with the new wrapper function, following the same pattern as other network files.
Let's verify this pattern is consistently applied across all network files:
Also applies to: 18-18
✅ Verification successful
Implementation verified across all network files
The
wrapActivityHandleris consistently implemented across all network files, with holesky.ts correctly following the same pattern as other networks without activity tracking.🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Check for consistent implementation of wrapActivityHandler across network files # Expected: All network files should use wrapActivityHandler consistently # Search for network files and check their activityHandler implementation rg -U "activityHandler.*Promise\.resolve\(\[\]\)" packages/extension/src/providers/ethereum/networks/Length of output: 1386
Script:
#!/bin/bash # Find all network files and compare with those using wrapActivityHandler echo "All network files:" fd -e ts . packages/extension/src/providers/ethereum/networks/ echo -e "\nFiles not using wrapActivityHandler:" rg -L "wrapActivityHandler" $(fd -e ts . packages/extension/src/providers/ethereum/networks/)Length of output: 25903
packages/extension/src/ui/action/icons/actions/sort/sort-active-icon.vue (1)
28-36: LGTM! Clean implementation with smooth transition effect.The implementation follows Vue.js best practices with proper scoped styling and smooth transition effects.
packages/extension/src/providers/ethereum/networks/arb-nova.ts (1)
6-6: LGTM! Consistent implementation with other network files.The implementation correctly wraps the activity handler, maintaining consistency with other network configurations.
Also applies to: 24-24
packages/extension/src/providers/bitcoin/methods/btc_getNetwork.ts (1)
30-31: LGTM! Clean implementation of Litecoin network support.The addition follows the established pattern of network name checks and maintains consistency with existing network handling.
packages/extension/src/providers/ethereum/networks/bsc.ts (1)
26-26: Verify the impact of removing Etherscan activity tracking.The change replaces the Etherscan activity handler with an empty response. This could impact users who rely on transaction history and activity tracking.
Please confirm:
- Is this intentional or temporary?
- How will users access their BSC transaction history?
- Are there any UI components that depend on this activity data?
Let's verify the dependencies:
✅ Verification successful
Activity tracking removal is architecturally sound
The removal of Etherscan activity tracking from BSC follows the established pattern for networks that don't support activity tracking. The implementation uses the standard
wrapActivityHandlerutility to return an empty array, which is a valid approach in the codebase's architecture.🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Search for components that might be affected by the activity handler change rg -l "activityHandler|EtherscanActivity" --type vueLength of output: 82
Script:
#!/bin/bash # Search for activity handler usage across all files rg -l "activityHandler" # Search for specific implementation patterns ast-grep --pattern 'activityHandler: $_' # Check other network configuration files fd -e ts -e js "network" -x cat {}Length of output: 64409
packages/extension/src/libs/recently-sent-addresses/index.ts (2)
7-14: LGTM! Clean class initialization.Good use of private field for storage encapsulation.
1-41: Verify storage quota usage.Since this implementation stores data in browser storage, we should verify storage quota usage to prevent potential issues.
packages/extension/src/ui/action/icons/common/custom-network-icon.vue (1)
9-25: SVG structure looks good!The new SVG implementation follows best practices with proper viewBox, namespacing, and clipping. The color contrast between the background (#8D8D8D) and the icon (#9BF20E) provides good visibility.
packages/extension/src/libs/metrics/types.ts (3)
16-20: Well-structured network type categorization!The NetworkType enum provides a clear categorization of networks, which will help in proper metrics tracking and network management.
25-32: Comprehensive network change event tracking!The new NetworkChangeEvents entries provide thorough coverage of user interactions with network management features.
65-73: Good separation of update-related events!The UpdatesEventType and UpdatesOpenLocation enums properly separate concerns between event types and their locations.
packages/extension/src/providers/bitcoin/types/index.ts (1)
8-8: Clean addition of Litecoin support!The Litecoin network has been properly integrated into the BitcoinNetworks constant, maintaining consistency with existing network definitions.
packages/extension/src/providers/bitcoin/methods/btc_switchNetwork.ts (1)
10-10: Clean update to network tracking!The switch from trackNetworkSelected to trackNetwork maintains functionality while aligning with the updated metrics system.
Also applies to: 32-35
packages/extension/src/ui/action/components/custom-scrollbar/index.vue (1)
80-80: LGTM! Type annotation improves code safety.The addition of the Event type annotation enhances type safety and code clarity.
packages/extension/src/ui/action/icons/actions/buy.vue (1)
3-5: LGTM! SVG icon improvements look good.The changes enhance the visual appearance of the buy icon by:
- Standardizing dimensions to 28x28
- Adding a purple background rectangle with rounded corners
- Updating the path with white fill for better contrast
Also applies to: 9-17, 22-23
packages/extension/src/libs/metrics/index.ts (1)
24-41: Verify all callers of trackNetwork are updated.The function has been renamed from
trackNetworkSelectedtotrackNetworkwith significantly expanded options. Ensure all calling code is updated to use the new signature.✅ Verification successful
All callers have been properly updated to use the new trackNetwork signature
The verification shows that:
- No instances of the old
trackNetworkSelectedfunction remain in the codebase- All 13 calls to
trackNetworkuse the correct event-based signature- Each call provides appropriate options based on its context (API changes, UI interactions, or custom network operations)
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Find all references to the old and new function names echo "Checking for old function name usage:" rg "trackNetworkSelected" -l echo -e "\nChecking new function usage:" rg "trackNetwork\(" -lLength of output: 1083
Script:
#!/bin/bash # Check actual function calls with context echo "Checking trackNetwork function calls with context:" rg "trackNetwork\(" -A 2 echo -e "\nChecking for potential variations or partial matches:" rg "track.*Network" --type ts --type vue echo -e "\nChecking import statements for metrics:" rg "import.*metrics" --type ts --type vueLength of output: 4860
packages/extension/src/providers/ethereum/methods/wallet_switchEthereumChain.ts (2)
12-12: LGTM! Import statement updated correctly.The import statement has been updated from
trackNetworkSelectedtotrackNetwork, aligning with the broader refactoring changes.
36-39: LGTM! Network tracking implementation is correct.The
trackNetworkfunction is correctly implemented with the appropriate event type and parameters.packages/extension/src/ui/action/components/app-menu/components/app-menu-tab.vue (3)
4-37: LGTM! Excellent accessibility implementation.The component implements proper accessibility attributes:
- Uses semantic
role="tab"attributes- Implements
aria-selectedstates- Maintains clear visual feedback with active states
46-54: LGTM! Well-structured props and events definition.The component correctly implements:
- Type-safe props using PropType
- Required prop validation
- Properly typed emit events
55-60: LGTM! Network tracking implementation.The
setActiveCategorymethod correctly implements network tracking with appropriate event type and parameters.packages/extension/src/ui/action/icons/actions/swap.vue (1)
3-5: LGTM! Consistent SVG dimensions.The SVG dimensions are consistently set to 28x28 in both width/height and viewBox attributes.
packages/extension/src/providers/common/ui/send-transaction/send-nft-select.vue (3)
5-5: LGTM! Proper image error handling.The image error handling is correctly implemented using the centralized
imageLoadErrorutility.
9-12: LGTM! Consistent text truncation.The implementation uses the global
$filters.truncatemethod consistently for both name and collection name.
38-38: LGTM! Proper utility import.The
imageLoadErrorutility is correctly imported from the shared utilities.packages/extension/src/ui/action/views/assets-select-list/components/assets-select-list-item.vue (1)
8-10: Verify truncation filter implementation.The token name truncation looks good, but let's ensure the truncate filter is properly registered and handles edge cases.
✅ Verification successful
Truncate filter implementation is robust and properly registered
The truncate filter is well-implemented with proper null checks, type safety, and consistent behavior across the codebase. It's correctly registered in all Vue app entry points and used consistently in multiple components.
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify truncate filter implementation and registration # Test: Search for truncate filter definition and its registration ast-grep --pattern 'truncate($str, $len) { $$$ }' # Test: Search for filter registration rg -A 5 'app\.config\.globalProperties\.\$filters'Length of output: 712
Script:
#!/bin/bash # Find the filters module definition fd filters.ts # Search for truncate filter implementation with various patterns rg -A 5 'truncate.*=' rg -A 5 'truncate.*\(' # Try alternative ast-grep pattern for object property ast-grep --pattern '{ truncate: $_ }'Length of output: 5634
packages/extension/src/libs/utils/networks.ts (2)
25-39: LGTM! Good addition of the includeCustom parameter.The implementation correctly handles the inclusion/exclusion of custom networks based on the parameter.
78-84: Verify network name updates in POPULAR_NAMES.The changes to POPULAR_NAMES look good, replacing Kadena with Arbitrum and adding Solana.
packages/extension/src/types/provider.ts (1)
54-55: LGTM! New storage namespaces added.The addition of recentlySentAddresses and updatesState namespaces is well-structured.
packages/extension/src/ui/action/views/add-network/components/add-network-item.vue (2)
4-7: LGTM! Improved network icon handling.The conditional rendering of network icons with proper fallback to custom-network-icon is well implemented.
91-93: LGTM! Good addition of metrics tracking.The implementation properly tracks network deletion events with relevant metadata.
packages/extension/src/libs/networks-state/index.ts (4)
18-23: LGTM! State initialization looks good.The state initialization is properly structured with all required properties and their default values.
92-92: LGTM! Proper state reset.The newUsedFeatures state is correctly reset when inserting networks with new features.
97-107: LGTM! Robust feature tracking implementation.The implementation handles undefined states gracefully and updates the state immutably.
171-171: LGTM! Immutable state update.The state update is performed immutably using the spread operator.
packages/extension/src/ui/action/views/asset-detail-view/index.vue (2)
42-42: LGTM! Clear price change timeframe indicator.The "Last 24h" label provides clear context for the price change percentage.
160-167: LGTM! Well-structured CSS.The CSS follows BEM naming convention and uses theme variables consistently.
packages/extension/src/ui/action/components/app-menu/components/app-menu-sort.vue (3)
84-99: LGTM! Robust sort implementation.The sort logic handles direction toggle correctly and includes appropriate metrics tracking.
108-117: LGTM! Well-structured computed property.The computed property handles all sort options with proper type safety.
171-275: LGTM! Clean CSS implementation.The styles follow BEM methodology and include proper transitions for smooth animations.
packages/extension/src/providers/common/ui/send-transaction/send-contacts-list.vue (2)
Line range hint
12-50: LGTM! Well-structured recent addresses section.The template properly handles conditional rendering and address comparison.
58-62: LGTM! Consistent address comparison.The address comparison logic is consistent and handles null values properly.
Also applies to: 80-84
packages/extension/src/ui/action/components/accounts-header/components/header-accounts.vue (2)
4-14: LGTM! Well-structured image container implementation.The new structure for displaying account-related images is well-organized, with proper alt text for accessibility and clear class names for styling.
233-253: LGTM! Clean and maintainable CSS implementation.The CSS implementation for the account images is well-structured with:
- Clear class naming following BEM methodology
- Proper positioning for the network icon overlay
- Good use of variables for colors
packages/extension/src/ui/action/views/add-network/views/add-custom-network.vue (2)
92-95: LGTM! Clean import and state initialization.The imports are well-organized and the NetworksState initialization is properly placed.
Also applies to: 112-112
142-144: LGTM! Well-typed event emission.The emit definition uses TypeScript's type system effectively to ensure type safety for the pin network updates.
packages/extension/src/ui/action/icons/actions/pin.vue (2)
88-97: LGTM! Well-defined props.Props are well-defined with appropriate types and default values.
100-105: LGTM! Clean styling.The styling is minimal and effective, ensuring proper icon alignment.
packages/extension/src/providers/polkadot/ui/dot-verify-transaction.vue (1)
154-154: LGTM! Clean network tracking implementation.The network tracking implementation is properly updated to use the new
trackNetworkfunction with appropriate event type and parameters.Also applies to: 197-200
packages/extension/src/ui/action/styles/hover-transitions.less (1)
1-18: LGTM! Well-structured hover transitions.The implementation provides consistent transition timing and follows LESS best practices with proper variable definitions.
packages/extension/src/providers/ethereum/networks/op-bnb.ts (1)
24-24: Consider implementing actual activity handling.The activity handler currently returns an empty array. Consider implementing actual activity tracking for the opBNB network.
Would you like me to help implement a proper activity handler for the opBNB network? I can provide a template that follows the patterns used in other network implementations.
packages/extension/src/ui/action/icons/actions/send.vue (1)
3-14: LGTM! Icon update aligns with design system.The updated send icon maintains visual consistency with the 28x28 dimension standard and uses the primary brand color (#684CFF).
packages/extension/src/ui/action/styles/color.less (1)
3-4: LGTM! Color system enhancement.The new color variables and gradient updates maintain consistency with the existing naming convention while expanding the design system's flexibility.
Also applies to: 10-10, 15-16, 19-19, 44-47
packages/extension/src/ui/action/icons/tabs/assets.vue (1)
12-14: LGTM! Improved icon theming.Using black with opacity (0.9) instead of a fixed hex color improves theme compatibility.
packages/extension/src/ui/action/icons/common/manage-networks-icon.vue (1)
9-21: LGTM! Well-structured SVG implementation.The icon implementation follows SVG best practices with proper use of clipping paths and semantic colors.
packages/extension/src/ui/action/components/app-menu/components/app-menu-item.vue (1)
246-249: Ensure proper cleanup inonUnmountedhookIn the
onUnmountedlifecycle hook, onlyisStickyTop.valueis reset. Verify if there are any event listeners or resources that need to be cleaned up to prevent memory leaks.Would you like to confirm if additional cleanup is required, such as removing event listeners or cancelling timers?
packages/extension/src/providers/common/ui/send-transaction/nft-select-list/components/nft-select-list-item.vue (3)
4-4: Good addition of error handling for image loading!Adding error handling for image loading prevents broken image placeholders and improves the user experience.
8-11: Improved text truncation using filters!Moving from inline truncation to using
$filters.truncateimproves maintainability and ensures consistent truncation behavior across the application.
21-21: Good use of centralized utility!Importing
imageLoadErrorfrom a shared utility promotes code reuse and maintainability.packages/extension/src/providers/kadena/ui/send-transaction/index.vue (1)
130-130: Good addition of address tracking functionality!The implementation properly tracks recently sent addresses before proceeding with the transaction verification. This enhancement will improve the user experience by maintaining a history of sent addresses.
Also applies to: 470-477
packages/extension/src/providers/bitcoin/ui/send-transaction/index.vue (1)
172-172: Good addition of address tracking functionality!The implementation properly tracks recently sent addresses before proceeding with the transaction verification. This enhancement maintains consistency with other network providers and improves the user experience.
Also applies to: 432-439
packages/extension/src/providers/polkadot/ui/send-transaction/index.vue (1)
144-144: Good addition of address tracking functionality!The implementation properly tracks recently sent addresses before proceeding with the transaction verification. This enhancement maintains consistency with other network providers and improves the user experience.
Also applies to: 501-508
packages/extension/src/providers/solana/ui/send-transaction/index.vue (1)
721-722: LGTM!The instance of
RecentlySentAddressesStateis appropriately created at the module level, following Vue composition API best practices.packages/extension/src/providers/ethereum/ui/send-transaction/index.vue (3)
229-240: LGTM! Good enhancement to balance validation.The additional check for sufficient balance to cover transaction fees is a crucial improvement that prevents failed transactions due to insufficient gas fees.
726-727: LGTM!The instance of
RecentlySentAddressesStateis appropriately created at the module level, following Vue composition API best practices.
729-733: Consider handling potential errors when tracking addresses.The tracking of recently sent addresses is correctly implemented, but it might be good to handle potential storage errors gracefully.
Consider wrapping the call in a try-catch block to ensure transaction processing continues even if address tracking fails:
- await recentlySentAddresses.addRecentlySentAddress( - props.network, - addressTo.value, - ); + try { + await recentlySentAddresses.addRecentlySentAddress( + props.network, + addressTo.value, + ); + } catch (error) { + console.error('Failed to track recently sent address:', error); + // Continue with the transaction + }
packages/extension/src/providers/common/ui/send-transaction/send-address-item.vue
Show resolved
Hide resolved
packages/extension/src/providers/common/ui/send-transaction/send-address-item.vue
Show resolved
Hide resolved
packages/extension/src/ui/action/views/add-network/components/add-network-item.vue
Show resolved
Hide resolved
packages/extension/src/ui/action/components/app-menu/components/app-menu-item.vue
Show resolved
Hide resolved
packages/extension/src/ui/action/components/app-menu/components/app-menu-item.vue
Show resolved
Hide resolved
packages/extension/src/ui/action/components/app-menu/components/app-menu-item.vue
Show resolved
Hide resolved
packages/extension/src/ui/action/components/app-menu/components/app-menu-item.vue
Show resolved
Hide resolved
devop: set correct version
Summary by CodeRabbit
Release Notes for Enkrypt Extension v2.1.0
New Features
Improvements
Bug Fixes
Performance