packages/extension/src/providers/bitcoin/ui/send-transaction/index.vue (3)

11-31: Use a consistent fallback strategy when Spark account is unavailable.

This newly introduced tab-based interface is conditionally rendered for Firo and Spark. The logic is straightforward, but consider providing a clear fallback mechanism when Spark is unavailable or the user rapidly toggles between tabs. This can help avoid edge cases and potential confusion for users when they do not have a Spark account set up.

---

78-78: Typed approach for selectedSendTab is clean.

Defining "transparent" | "spark" in a ref is succinct and ensures type safety. Consider documenting the default "transparent" state if you foresee adding more tabs down the line.

---

115-153: Styling is cohesive and ensures good UX.

The added CSS for .send-transaction__tabs and .send-transaction__tabs-active is consistent with the project’s style. If the design evolves to include additional states, consider using BEM or a theming approach for easier maintainability.

packages/extension/src/providers/bitcoin/libs/api-firo.ts (3)

27-29: Address derivation looks correct.

getBitcoinAddress is used correctly. Consider optional chaining if there's any chance pubkey conversions might fail, but it seems safe here.

---

31-32: init stub left empty.

You might consider adding logs or clarifying comments if future initialization steps are planned.

---

74-87: Balance computation is straightforward.

Adding confirmed and unconfirmed satoshi values is correct. Catching network fetch errors by returning "0" is safe, though consider logging partial errors for debugging.

packages/extension/src/providers/bitcoin/networks/index.ts (1)

11-12: Export object consistency.

Listing firoTest and firo among existing networks is logical. Double-check naming for uniformity, as you import firoTestnet but export it as firoTest.

packages/extension/src/libs/spark-handler/callRPC.ts (1)

3-3: Avoid hardcoding RPC endpoint.
Storing the RPC URL within the source code can be problematic for future environment changes or sensitive endpoint usage. Consider externalizing this URL (e.g., environment variable or config file) for better flexibility and maintainability.

packages/extension/src/libs/spark-handler/index.ts (2)

22-28: Add targeted error handling.
The function calls callRPC and directly returns its promise. If the RPC fails or returns an invalid result, the caller won't perform specific handling. Consider adding logs or structured error responses for easier debugging.

---

30-43: Consider centralizing transaction logic.
Both sendToSparkAddress and sendFromSparkAddress share a similar pattern of calling RPC methods with a transaction object. If additional transaction flows arise or more robust orchestration is needed, centralizing shared logic or error handling in one place may improve maintainability.

packages/extension/src/providers/bitcoin/networks/firo.ts (1)

3-6: Confirm naming consistency.
The file references “BitcoinNetwork” and “BitcoinNetworkOptions” even though they represent a Firo configuration. This is likely a shared interface for all Bitcoin-like networks, but ensure the naming remains clear to future maintainers.

packages/extension/src/providers/bitcoin/networks/firo-testnet.ts (1)

3-6: Explicitly differentiate from mainnet.
While it is clear from the variable names and URLs that this is a testnet configuration, consider documenting any differences in chain parameters compared to mainnet for clarity (e.g., purpose, usage disclaimers, etc.).

packages/extension/src/ui/action/components/accounts-header/index.vue (1)

31-31: Confirm event handling in deposit component.
This second emission of "action:generate-new-spark" is consistent, but ensure that deposit properly handles all scenarios if the spark address is regenerated multiple times.

packages/extension/src/providers/bitcoin/libs/activity-handlers/providers/firo/index.ts (2)

20-23: Avoid assignment within an expression.

The assignment to "tokenPrice" within your .then() chain may trigger linter or readability warnings (as highlighted by static analysis). It's clearer to separate this assignment from the return expression:

Proposed snippet:

- .then((mdata) => (tokenPrice = mdata || "0"))
+ .then((mdata) => {
+   tokenPrice = mdata || "0";
+ })

🧰 Tools

🪛 Biome (1.9.4)

[error] 23-23: The assignment should not be in an expression.

The use of assignments in expressions is confusing.
Expressions are often considered as side-effect free.

(lint/suspicious/noAssignInExpressions)

---

15-36: Consider using async/await syntax for readability.

Currently, fetch and subsequent transformations rely on nested .then() calls. Although functionally correct, switching to async/await often achieves better readability and easier error handling.

🧰 Tools

🪛 Biome (1.9.4)

[error] 23-23: The assignment should not be in an expression.

The use of assignments in expressions is confusing.
Expressions are often considered as side-effect free.

(lint/suspicious/noAssignInExpressions)

packages/extension/src/providers/bitcoin/ui/send-transaction/components/send-spark-address-input.vue (1)

44-47: Use the async Clipboard API for paste operations.

The use of "document.execCommand('paste')" is deprecated. For improved reliability and forward-compatibility, consider leveraging the modern asynchronous clipboard API (navigator.clipboard.readText()).

- document.execCommand("paste");
+ if (navigator.clipboard?.readText) {
+   navigator.clipboard.readText().then(text => {
+     addressInput.value!.value = text;
+     address.value = text;
+   });
+ }

packages/extension/src/providers/bitcoin/ui/send-transaction/tabs/spark-send-tab.vue (1)

34-45: Consolidate dust threshold checks and negative balance checks.

Multiple conditions check either "nativeBalanceAfterTransaction.isNeg()" or that "sendAmount < dust". Consider unifying or wrapping these validations into one helper function for better readability and maintainability.

packages/extension/src/ui/action/views/verify-send-from-spark-transaction/index.vue (2)

153-156: Validate address & amount before sending.

Currently, the code calls sendFromSparkAddress unconditionally. Consider adding stronger pre-checks for valid addresses, amounts, and potential out-of-range values to prevent accidental failures or partial transactions.

---

189-205: Improve user-facing error messages.

When an error occurs, only raw JSON is displayed. Provide a more user-friendly message or parse the API error details so users can better understand and correct the issue, rather than just seeing raw JSON strings.

packages/extension/src/ui/action/views/verify-send-to-spark-transaction/index.vue (1)

189-207: Surface clearer error messages to users.

Similar to the "verify-send-from-spark-transaction" file, the catch block logs an error but sets errorMsg to JSON. Provide human-readable explanations or parse error details for improved clarity.

packages/extension/src/ui/action/views/deposit/index.vue (8)

16-28: Introduce tab-based UI for transparent vs. Spark address.
Adding the tab buttons for "Transparent address" and "Spark address" provides a clearer user experience. This is a good approach, but ensure that any transitions or toggles between these tabs are tested for edge cases (e.g., switching tabs rapidly while data is loading).

---

72-116: Add Spark address functionality.
The new Spark address logic cleanly parallels the existing transparent address section, including QR codes and copy functionality. Recommend verifying that the “Generate new address” flow is disabled while a new address is being fetched to prevent duplicate requests.

---

Line range hint 123-133: Check for potential unused imports.
While importing “SparkAccount” and other types is crucial, confirm whether all imports are actually in use. If not, remove them to keep the code clean.

---

185-187: toggleGeneratedNotification.
Simple toggling approach is fine. Consider a short timeout or some user-friendly acknowledgement if the action is repeated quickly.

---

238-243: deposit__generate style block.
Centering the generate button is good for UX. Double-check styling across various screen resolutions to ensure the layout remains consistent.

---

275-279: deposit__tabs container styling.
Proper spacing (gap: 10px) is beneficial for readability. Consider media queries if the tabs might overflow on smaller containers.

---

281-312: Hover state for deposit__tabs-active.
Ensuring an obvious hover state improves UX. No clear issues here, but be mindful of any conflicts with focus styles for accessibility.

---

446-448: Remove forced max-width override if no longer needed.
Be cautious with "!important" usage. If another part of the code depends on limiting max-width, consider a more localized approach.

packages/extension/src/ui/action/App.vue (2)

283-286: updateGradient for app menu.
The gradient update approach is effective. If theming changes become more robust in the future, consider a centralized theme manager rather than direct style mutations.

---

297-301: getSparkAccountState method.
Fetching the Spark account data on demand is solid. Confirm that any additional networks requiring similar logic do not require duplicative code.

packages/extension/src/providers/bitcoin/ui/send-transaction/tabs/transparent-send-tab.vue (5)

25-56: Conditional rendering for Spark vs. standard address.
This is a neat approach. If the user changes the network from Firo to another halfway through, ensure the UI updates correctly and discards the Firo-specific components to avoid any leftover data.

---

64-71: NFT selection logic.
Hiding NFT components if sending Spark is appropriate. Check if a user might want to handle an NFT while also having a Spark address in the same transaction flow. Currently you separate them, which likely simplifies logic.

---

82-122: Input amount, fee select, and final alert checks.
Combining these fields is good for user clarity. Ensure minimal rendering overhead by controlling watchers properly, since many reactive computations (balance checks, dust checks) run simultaneously.

---

143-575: Core script logic for transaction preparation.
Overall, the composition of advanced transaction flows (UTXOs, NFTs, Spark addresses) is well-organized. Watch for potential performance hits as the codebase grows—some of these computations (like scanning all UTXOs on every field update) may need caching or memoization.

---

577-662: Scoped styles for the send tab.
The layered class naming is good. Validate that any new color variables (e.g., “@error”) match the global theme to maintain consistent brand identity.

README.md (1)

111-111: Consider adding Firo network details

While adding Firo to the list is correct, consider providing more context about its unique features (e.g., privacy features, Spark addresses) to help users understand its capabilities.

Consider expanding the entry like this:

-  - Firo
+  - Firo (Privacy-focused blockchain with Spark private payment support)

Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro

#!/bin/bash
# Search for address validation related code in transparent send components
ast-grep --pattern 'function $FUNC($$$) {
  $$$
  address $$$
  $$$
}'

# Search for specific validation patterns
rg -i "address.*validation|validate.*address" -A 3

# Look for the transparent-send-tab component implementation
fd "transparent-send-tab" --exec cat {}

#!/bin/bash
# Look for the send-address-input component implementation
fd "send-address-input.vue" --exec cat {}

# Search for address validation functions
ast-grep --pattern 'function isAddress($$$) {
  $$$
}'

# Look for any other address validation related code
rg "isAddress|validateAddress" -A 2

#!/bin/bash
# Search for calls to getRawTransaction
rg -A 5 "getRawTransaction\(" --type typescript

#!/bin/bash
# Search for calls to getRawTransaction
rg -A 5 "getRawTransaction\("

#!/bin/bash
# Search for any tests or mock implementations that might reveal the expected response format
rg -g "*.ts" -g "*.js" "insight-api-zcoin/tx/send" -B 2 -A 2

#!/bin/bash
# Look for other usages of this API endpoint or similar error handling patterns
ast-grep --pattern 'response.error'

#!/bin/bash
# Search for any documentation or type definitions related to the API
fd -e md -e ts "insight" --exec grep -l "insight-api-zcoin"

#!/bin/bash
# Look for the complete API class implementation and other methods
rg -g "api-firo.ts" "class" -A 10

# Look for similar error handling in other Bitcoin-related API files
rg -g "api*.ts" "broadcastTx" -A 10

#!/bin/bash
# Search for usage of filterOutOrdinals to understand its input/output handling
rg "filterOutOrdinals" -A 5

# Search for other implementations of getUTXOs to compare array handling
ast-grep --pattern 'getUTXOs($_) { $$$ }'

# Look for FiroUnspentType and HaskoinUnspentType definitions
rg "type (Firo|Haskoin)UnspentType" -A 3

#!/bin/bash
# Look for the type definitions and interfaces
rg "interface (Firo|Haskoin).*Unspent" -A 5

# Check error handling in the API implementations
rg "message.*utxos" -B 2 -A 2

# Look for the FiroToHaskoinUTXOs implementation
ast-grep --pattern 'FiroToHaskoinUTXOs($_,$_) { $$$ }'

#!/bin/bash
# Search for activity handler registration patterns
rg -A 5 "activityHandler|firoHandler" --type typescript

# Search for router or aggregator patterns related to activity handlers
ast-grep --pattern 'const $_ = {
  $$$
  firo: $_,
  $$$
}'

#!/bin/bash
# Search for firo-related patterns and activity handlers
rg -l "firo" 

# Search specifically in the bitcoin providers directory
fd . packages/extension/src/providers/bitcoin -t f -x cat {}

#!/bin/bash
# Search for activity handler registration and usage
rg -l "firoHandler|activityHandler" --type ts

# Get content of activity handler related files
fd . packages/extension/src/providers/bitcoin/libs/activity-handlers -t f -x cat {}

#!/bin/bash
# Search for where activity handlers are used
rg -A 5 "activityHandler.*firo" --type ts

# Search for network configuration using firoHandler
rg -A 5 "firoHandler" packages/extension/src/providers/bitcoin/networks/

#!/bin/bash
# Search for sparkAccount references
rg "sparkAccount" -A 2

# Also search for type usage
rg "AccountsHeaderData" -A 2

#!/bin/bash
# Search for any other Firo-related configurations or references
rg -i "firo" --type ts -A 5 -B 5

# Look for other Bitcoin network configurations to compare parameters
fd -e ts -e js "network.*\.ts$" --exec cat {} \;

# Search for any tests related to Firo configuration
rg -i "firo.*test" --type ts

# Look for documentation files that might contain network information
fd "README" -e md -e txt | xargs cat

#!/bin/bash
# Search for any Firo documentation or configuration files
fd -e md -e txt -e json -e conf "firo|zcoin" --exec cat {} \;

# Look for any comments or documentation in the Firo network files
rg -i "\/\*|\*\/|\/\/" packages/extension/src/providers/bitcoin/networks/firo*.ts

#!/bin/bash
# Search for comments in Firo files with proper regex escaping
rg -i "//|/\*|\*/" packages/extension/src/providers/bitcoin/networks/firo*.ts

# Check if these endpoints are referenced elsewhere in the codebase
rg -i "explorer\.firo\.org|firo-rpc\.publicnode\.com" --type ts

# Look for any Firo configuration tests
rg -i "describe.*firo|test.*firo" --type ts

#!/bin/bash
# Search for Firo testnet related configurations and parameters
rg -A 5 "FiroTest|firo.*test" --type ts

# Search for any test configuration files that might contain network parameters
fd -e ts -e js "test.*config|config.*test"

# Look for any files containing Firo network parameters
rg "pubKeyHash|scriptHash|wif.*firo" --type ts

#!/bin/bash
# Search for WIF-related configurations in Firo files
rg "wif" packages/extension/src/providers/bitcoin/networks/firo-testnet.ts -A 2

# Get the complete network configuration for Firo testnet
cat packages/extension/src/providers/bitcoin/networks/firo-testnet.ts

# Look for any Firo network tests that might validate these parameters
rg -l "firo.*test.*network|test.*firo.*network" --type ts

#!/bin/bash
# Search for any usage of 'action:generate-new-spark' in the codebase
rg "action:generate-new-spark" -A 2 -B 2

# Search for components that might be listening to this event
ast-grep --pattern 'v-on:action:generate-new-spark="$_"'

# Alternative syntax for event listeners
ast-grep --pattern '@action:generate-new-spark="$_"'

#!/bin/bash
# First, let's look at the accounts-header component implementation
cat packages/extension/src/ui/action/components/accounts-header/index.vue

# Then, let's search for sparkAccount related code
rg "sparkAccount" -A 5 -B 5

# Let's also check for any type definitions or interfaces related to sparkAccount
ast-grep --pattern 'interface $_ {
  sparkAccount: $$$
}'

#!/bin/bash
# Let's look for sparkAccount initialization and getSparkState implementation
rg "getSparkState" -A 5 -B 5

# Let's also check for SparkAccount type definition
ast-grep --pattern 'type SparkAccount = {
  $$$
}'

ast-grep --pattern 'interface SparkAccount {
  $$$
}'

#!/bin/bash
# Search for Firo-related type definitions and usage patterns
rg -i "firo.*type|type.*firo" -g "*.ts" -g "*.tsx"

# Search for files containing "Firo" to understand the context
fd -e ts -e tsx -H Firo

# Look for UTXO-related types and interfaces
rg "UnspentType|UTXO" -g "*.ts" -g "*.tsx"

#!/bin/bash
# Check the implementation details of FiroTxType and related interfaces
ast-grep --pattern 'interface FiroTxType {
  $$$
}'

# Look for actual usage of FiroUnspentType in the codebase
rg -A 5 "FiroUnspentType" -g "*.ts"

# Check if there are any block hash or coinbase related fields in other UTXO types
rg "interface.*UnspentType" -A 10 -g "*.ts"

#!/bin/bash
# Look for route protection patterns in router configuration
ast-grep --pattern 'beforeEnter: $_'

# Look for auth-related imports and usage in router
rg -A 3 "import.*auth" packages/extension/src/ui/action/router/

# Look for any authentication middleware or guards
rg -i "auth.*guard|route.*protect|beforeEnter" packages/extension/src/ui/action/

#!/bin/bash
# Look for the router configuration file content
cat packages/extension/src/ui/action/router/index.ts

# Look for any auth-related files in the project
fd -e ts -e js auth

# Check for any middleware or guard implementations
rg -l "beforeEnter|middleware|guard" packages/extension/src/ui/action/

#!/bin/bash
# Look for store or auth state management
rg -l "store|auth" packages/extension/src/ui/action/

# Check the main app setup for global navigation guards
fd -e ts -e js -e vue main packages/extension/src/ui/action/

# Look specifically for locked screen related logic
rg -A 5 "locked" packages/extension/src/ui/action/

#!/bin/bash
# Check main.ts for navigation guards
cat packages/extension/src/ui/action/main.ts

# Check App.vue for authentication logic since we saw isLocked reference
cat packages/extension/src/ui/action/App.vue

#!/bin/bash
# Check for Spark account related code and network checks
rg -l "sparkAccount" --type vue --type ts --type js

# Look for network-specific checks or guards related to Spark
rg -B2 -A2 "spark" -i --type vue --type ts --type js

# Find the component definition and its props
ast-grep --pattern 'defineProps({
  $$$
  sparkAccount: $_,
  $$$
})'

#!/bin/bash
# Check for Spark account related code
rg "sparkAccount"

# Look for network-specific checks or guards related to Spark
rg -B2 -A2 "spark" -i

# Find the Vue component that uses sparkAccount prop
fd . -e vue -e ts -e js -x grep -l "sparkAccount" {}

#!/bin/bash
# Search for imports or usage of verify-send-to-spark-transaction view
rg -l "verify-send-to-spark-transaction"

# Search for router configuration to understand how this view is accessed
ast-grep --pattern 'const routes = $_'

# Search for any other window.close() usage patterns
rg "window\.close\(\)"

#!/bin/bash
# Search for where verify-send-to-spark-transaction view is opened/used
rg -A 5 "verify-send-to-spark" --type ts --type vue

# Search for getCurrentContext implementation
ast-grep --pattern 'getCurrentContext = () => $_'

#!/bin/bash
# Search for verify-send-to-spark without file type restriction
rg -A 5 "verify-send-to-spark"

# Search for getCurrentContext function definition
rg -A 3 "getCurrentContext"

# Search for places where this view might be opened in a new window
rg -A 3 "window.open"

#!/bin/bash
# Search for subNetwork references in the deposit-related files
rg -l "subNetwork" packages/extension/src/ui/action/views/deposit/

# Check the actual implementation and usage context
cat packages/extension/src/ui/action/views/deposit/index.vue

#!/bin/bash
# Search for BaseNetwork type definition and subNetworks usage
rg -A 5 "interface BaseNetwork" packages/extension/src/types/
rg -A 5 "subNetworks" packages/extension/src/

#!/bin/bash
# Search for components that might be listening to or handling 'action:generate-new-spark' event
rg -l "@action:generate-new-spark" 

# Also search for potential parent components that might include the deposit component
rg -l "deposit/index.vue"

#!/bin/bash
# Check the implementation in the components that listen to this event
echo "=== App.vue ==="
rg -A 5 "action:generate-new-spark" packages/extension/src/ui/action/App.vue

echo "=== accounts-header/index.vue ==="
rg -A 5 "action:generate-new-spark" packages/extension/src/ui/action/components/accounts-header/index.vue

# Check how deposit component is used in parent components
echo "=== network-assets/index.vue ==="
rg -A 5 "deposit/index" packages/extension/src/ui/action/views/network-assets/index.vue

#!/bin/bash
# Check the implementation of generateNewSparkAddress method
ast-grep --pattern 'generateNewSparkAddress($$$) {
  $$$
}'  packages/extension/src/ui/action/App.vue

#!/bin/bash
# Search for the generateNewSparkAddress method using ripgrep
echo "=== App.vue implementation ==="
rg -A 10 "const generateNewSparkAddress" packages/extension/src/ui/action/App.vue

# Also check if it's defined as an async method
rg -A 10 "async generateNewSparkAddress" packages/extension/src/ui/action/App.vue

#!/bin/bash
# Search for the event handler that processes the generate-new-spark action
rg -A 10 "action:generate-new-spark" --type vue

# Look for any error handling related to spark address generation
rg -B 5 -A 10 "generateNewSparkAddress" --type vue

# Search for any error notifications or error handling patterns in the component
ast-grep --pattern 'catch ($_) {
  $$$
}'

#!/bin/bash
# Search for the event handler that processes the generate-new-spark action
rg -A 10 "action:generate-new-spark"

# Look for any error handling related to spark address generation
rg -B 5 -A 10 "generateNewSparkAddress"

# Look for the parent component that handles this event
rg "generate-new-spark" -B 5 -A 10

# Search for error handling in Vue components
rg "catch" -B 3 -A 5 --type-add 'vue:*.vue' --type vue

#!/bin/bash
# Search for network-specific address display formatting
ast-grep --pattern 'displayAddress($$$)'

# Search for any other QR code generation logic
rg -A 5 "qrcode-vue"

# Look for network provider definitions and URI schemes
rg -A 3 "ProviderName\."

#!/bin/bash
# Search for network displayAddress implementations
ast-grep --pattern 'displayAddress: $$$'

# Look for network-specific address formatting
rg -A 3 "displayAddress\("

# Search for any QR code related components or configurations
rg -A 3 "qrcode"

#!/bin/bash
# Let's first find the Spark address generation logic
rg -l "spark.*address" --type vue --type ts --type js

# Also search for any address generation related functions
ast-grep --pattern 'function $FUNC($$$) { 
  $$$ 
  spark$$$
  $$$
}'

# Look for components or methods handling address generation
rg "generateAddress|newAddress|createAddress" --type vue --type ts --type js

#!/bin/bash
# Search for Spark address generation logic
rg "spark.*address"

# Look for address generation in the deposit component directory
fd . "packages/extension/src/ui/action/views/deposit" -x cat {}

# Search for any address generation related functions
rg "generateAddress|newAddress|createAddress"

#!/bin/bash
# Search for the implementation of spark address generation
rg -A 10 "getnewsparkaddress"

# Look for the component that handles the generate-new-spark action
rg -A 10 "action:generate-new-spark"

# Check if there's any state management for spark addresses
rg "sparkAccount|SparkAccount" --type ts --type vue

#!/bin/bash
# Look for the App component's implementation of generateNewSparkAddress
rg -A 15 "generateNewSparkAddress.*\{" packages/extension/src/ui/action/App.vue

# Check for any spark state management
cat packages/extension/src/ui/action/App.vue

#!/bin/bash
# Search for network switch handling and Spark account related code
rg -A 5 "network.*Firo|sparkAccount" packages/extension/src/ui/action/App.vue

#!/bin/bash
# Look for Spark state management across the codebase
rg -A 5 "getSparkState|sparkAccount" 

#!/bin/bash
# Search for network switching logic
ast-grep --pattern 'watch($network, $_)'

#!/bin/bash
# Search for getSparkAccountState implementation and related code
ast-grep --pattern 'getSparkAccountState() {
  $$$
}'

# Search for spark state related events and handlers
rg "spark-state-changed" -A 5

# Look for Spark address generation related code
rg "generateSparkAddress|createSparkAccount" -A 5

#!/bin/bash
# Search for getSparkAccountState implementation
rg "getSparkAccountState" -A 10

# Search for getSparkState implementation
rg "getSparkState" -A 10

# Look for spark account state management
ast-grep --pattern 'sparkAccount = $$$'

#!/bin/bash
# Search for isAddress function implementation and its usage
ast-grep --pattern 'isAddress($$$)'

# Search for any address validation related functions
rg "isAddress|isSparkAddress|validateAddress" -A 5

# Look for network address format validations
rg "networkInfo.*address" -A 5

#!/bin/bash
# Search for other instances of send-address-input component usage
ast-grep --pattern '<send-address-input
  $$$
  :disable-direct-input="$_"
  $$$
/>'

# Search for the send-address-input component definition
fd "send-address-input" --exec cat {}

#!/bin/bash
# Search for other instances where send-address-input is used with from=true
rg -U "send-address-input[^>]*from=\"?true\"?" -A 5

#!/bin/bash
# Search for NFT select list component implementation
ast-grep --pattern 'const nftSelectList = {
  $$$
}'

# Search for any NFT-related data fetching or loading logic
rg "nft.*select" -A 5 -B 5

# Look for NFT pagination or loading implementation
rg "loadNFT|fetchNFT|getNFT" -A 5 -B 5

#!/bin/bash
# Search for NFT loading implementation in the component
ast-grep --pattern 'const nftList = $$$'

# Look for any pagination or lazy loading related code
rg -B 5 -A 5 "pagination|lazy|infinite.*scroll|load.*more" --type vue

# Search for NFT data fetching implementations
rg -B 5 -A 5 "async.*getNFTs?|fetchNFTs?" --type vue --type ts

#!/bin/bash
# Search for NFT loading implementation in the component
ast-grep --pattern 'const nftList = $$$'

# Look for any pagination or lazy loading related code
rg -B 5 -A 5 "pagination|lazy|infinite.*scroll|load.*more"

# Search for NFT data fetching implementations
rg -B 5 -A 5 "async.*getNFTs?|fetchNFTs?"

# Search for NFT list related state or computed properties
ast-grep --pattern 'computed(() => {
  $$$
  nft
  $$$
})'

#!/bin/bash
# Search for the NFT list component implementation
rg -B 10 -A 10 "class=\"nft-select-list\"" 

# Look for NFT list state management
rg -B 5 -A 5 "selectedNft|nftList" --type-add 'vue:*.vue'

# Search for NFT loading or filtering logic
ast-grep --pattern 'watch($_, async () => {
  $$$
  nft
  $$$
})'

+/**
+ * Validates if the given string is a valid Spark address.
+ * Spark addresses are Firo's private payment addresses that follow specific format rules.
+ * @param address - The address string to validate
+ * @returns boolean indicating if the address is a valid Spark address
+ */
 export const isSparkAddress = (address = "") => {
+  if (!address) return false;
   if (address.length === 144 && address.startsWith("sm1")) {
-    // TODO: hack, change in future
     return true;
   }
   return false;
 };

packages/extension/src/providers/bitcoin/ui/send-transaction/components/send-spark-address-input.vue (1)

15-30: Add input validation and better error feedback

The address input field should provide more explicit feedback when an invalid address is entered. Currently, it only changes the text color to red.

Consider adding:

1. A validation message below the input
2. An icon indicator for valid/invalid state
3. Input sanitization before binding

 <input
   ref="addressInput"
   v-model="address"
   type="text"
   :disabled="disableDirectInput"
   placeholder="address"
+  :aria-invalid="!isSparkAddress(btcAddress) && !isAddress(btcAddress, props.network.networkInfo)"
   :style="{
     color:
       !isSparkAddress(btcAddress) &&
       !isAddress(btcAddress, props.network.networkInfo)
         ? 'red'
         : 'black',
   }"
   @focus="changeFocus"
   @blur="changeFocus"
 />
+<span v-if="btcAddress && !isSparkAddress(btcAddress) && !isAddress(btcAddress, props.network.networkInfo)" 
+  class="error-message">Invalid address format</span>

packages/extension/src/ui/action/views/verify-send-from-spark-transaction/index.vue (1)

175-185: Replace hard-coded timeouts with configurable values

The component uses hard-coded timeout values for UI state changes, which could lead to poor user experience on slower connections.

Use configurable timeouts:

+const UI_TIMEOUTS = {
+  POPUP_CLOSE: 4500,
+  WINDOW_CLOSE: 1500
+} as const;
+
 if (getCurrentContext() === "popup") {
   setTimeout(() => {
     isProcessing.value = false;
     router.go(-2);
-  }, 4500);
+  }, UI_TIMEOUTS.POPUP_CLOSE);
 } else {
   setTimeout(() => {
     isProcessing.value = false;
     window.close();
-  }, 1500);
+  }, UI_TIMEOUTS.WINDOW_CLOSE);
 }

packages/extension/src/ui/action/views/verify-send-to-spark-transaction/index.vue (2)

35-35: Consider enhancing error message display

The error message is directly rendered in the template without proper formatting or error handling component. Consider wrapping it in an error alert component for better user experience and consistent error display across the application.

-{{ errorMsg }}
+<error-alert v-if="errorMsg" :message="errorMsg" />

---

175-185: Extract timeout values to configuration

The timeout values are hardcoded. Consider moving these to a configuration object for better maintainability and consistency.

+const TIMEOUT_CONFIG = {
+  POPUP_CLOSE: 4500,
+  WINDOW_CLOSE: 1500
+};
+
 if (getCurrentContext() === "popup") {
   setTimeout(() => {
     isProcessing.value = false;
     router.go(-2);
-  }, 4500);
+  }, TIMEOUT_CONFIG.POPUP_CLOSE);
 } else {
   setTimeout(() => {
     isProcessing.value = false;
     window.close();
-  }, 1500);
+  }, TIMEOUT_CONFIG.WINDOW_CLOSE);
 }

Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro

packages/extension/src/ui/action/views/verify-send-from-spark-transaction/index.vue (1)

188-205: ⚠️ Potential issue

Improve error handling and message sanitization

The error handling exposes raw error messages to the UI, which could leak sensitive information.

packages/extension/src/ui/action/views/verify-send-from-spark-transaction/index.vue (3)

176-185: Extract magic numbers into named constants

Hardcoded timeout values should be extracted into named constants for better maintainability.

+const POPUP_CLOSE_DELAY = 4500;
+const WINDOW_CLOSE_DELAY = 1500;
+
 if (getCurrentContext() === "popup") {
   setTimeout(() => {
     isProcessing.value = false;
     router.go(-2);
-  }, 4500);
+  }, POPUP_CLOSE_DELAY);
 } else {
   setTimeout(() => {
     isProcessing.value = false;
     window.close();
-  }, 1500);
+  }, WINDOW_CLOSE_DELAY);
 }

---

132-149: Enhance transaction activity initialization

The transaction activity initialization could be more robust with validation and default values.

+const createTransactionActivity = (
+  params: VerifyTransactionParams,
+  network: BitcoinNetwork
+): Activity => ({
   from: network.value.displayAddress(txData.fromAddress),
   to: txData.toAddress,
   isIncoming: txData.fromAddress === txData.toAddress,
   network: network.value.name,
   status: ActivityStatus.pending,
   timestamp: new Date().getTime(),
   token: {
     decimals: txData.toToken.decimals,
     icon: txData.toToken.icon,
     name: txData.toToken.name,
     symbol: txData.toToken.symbol,
     price: txData.toToken.price,
   },
   type: ActivityType.transaction,
   value: txData.toToken.amount,
   transactionHash: "",
+});
+
+const txActivity = createTransactionActivity(txData, network.value);

---

332-333: Extract magic numbers in CSS calculations

The width and height calculations use magic numbers that should be extracted into LESS variables for better maintainability.

+@scroll-offset: 53px;
+@button-height: 88px;
+
-width: calc(~"100% + 53px");
-height: calc(~"100% - 88px");
+width: calc(~"100% + @{scroll-offset}");
+height: calc(~"100% - @{button-height}");

packages/extension/src/libs/spark-handler/callRPC.ts (3)

5-8: Improve type safety with proper interfaces

The current implementation uses any as the default type parameter and lacks proper interfaces for RPC requests and responses.

Consider adding these type definitions:

interface RPCRequest {
  jsonrpc: string;
  id: string;
  method: string;
  params: unknown[];
}

interface RPCResponse<T> {
  jsonrpc: string;
  id: string;
  result?: T;
  error?: {
    code: number;
    message: string;
  };
}

// Then update the function signature:
export async function callRPC<T>(
  method: keyof typeof RPC_METHODS, // Define allowed methods
  params?: object
): Promise<T> {

---

29-32: Improve error handling with specific error types

The current error handling is too generic and might log sensitive information.

Consider implementing specific error types:

class RPCError extends Error {
  constructor(
    message: string,
    public code?: number,
    public method?: string
  ) {
    super(message);
    this.name = 'RPCError';
  }
}

// Then update the error handling:
} catch (error) {
  if (axios.isAxiosError(error)) {
    throw new RPCError(
      `Network error during RPC call to ${method}`,
      error.response?.status
    );
  }
  if (error instanceof Error) {
    throw new RPCError(error.message);
  }
  throw new RPCError('Unknown error during RPC call');
}

---

1-33: Add security measures for RPC communication

The implementation makes external HTTP requests without rate limiting or explicit SSL/TLS verification settings.

Consider these security improvements:

1. Implement rate limiting to prevent DoS
2. Explicitly enable SSL/TLS verification in axios
3. Add retry mechanism with exponential backoff for failed requests
4. Consider using a circuit breaker pattern for RPC calls

Example implementation:

import rateLimit from 'axios-rate-limit';
import axiosRetry from 'axios-retry';

const axiosInstance = rateLimit(
  axios.create({
    timeout: DEFAULT_TIMEOUT,
    headers: { "Content-Type": "application/json" },
    httpsAgent: new https.Agent({ rejectUnauthorized: true })
  }),
  { maxRequests: 100, perMilliseconds: 1000 }
);

axiosRetry(axiosInstance, {
  retries: 3,
  retryDelay: axiosRetry.exponentialDelay,
  retryCondition: (error) => {
    return axiosRetry.isNetworkOrIdempotentRequestError(error) 
      || error.code === 'ECONNABORTED';
  }
});

packages/extension/src/providers/bitcoin/ui/send-transaction/tabs/transparent-send-tab.vue (2)

25-56: Enhance accessibility for address input sections

The form inputs lack proper ARIA attributes for better screen reader support. Consider adding appropriate ARIA labels and descriptions.

 <div class="form__container-send-input">
   <send-spark-address-input
     v-if="network.name === 'Firo'"
     ref="addressInputTo"
     class="no-margin"
     title="To address"
     :value="addressTo"
     :network="(network as BitcoinNetwork)"
+    aria-label="Recipient Spark address input"
+    aria-required="true"
     @update:input-address="inputAddressTo"
     @toggle:show-contacts="toggleSelectContactTo"
   />
   <send-address-input
     v-if="network.name !== 'Firo'"
     ref="addressInputTo"
     class="no-margin"
     title="To address"
     :value="addressTo"
     :network="(network as BitcoinNetwork)"
+    aria-label="Recipient address input"
+    aria-required="true"
     @update:input-address="inputAddressTo"
     @toggle:show-contacts="toggleSelectContactTo"
   />

---

182-184: Consider moving browser polyfill to a utility module

The Browser polyfill import could be moved to a separate utility module to improve code organization and reusability.

Create a new utility file browser-utils.ts:

import Browser from "webextension-polyfill";

export const createPopupWindow = async (url: string, options = {}) => {
  return Browser.windows.create({
    url: Browser.runtime.getURL(url),
    type: "popup",
    focused: true,
    height: 600,
    width: 460,
    ...options,
  });
};

packages/extension/src/providers/bitcoin/ui/send-transaction/components/send-spark-address-input.vue (2)

43-53: Enhance clipboard error handling and user feedback.

The clipboard operation should provide user feedback and handle permissions.

 const pasteFromClipboard = async () => {
   try {
     const text = await navigator.clipboard.readText();
     if (addressInput.value) {
       addressInput.value?.focus()
       emit("update:inputAddress", text);
     }
   } catch (err) {
-    console.error("Failed to read clipboard:", err);
+    const errorMessage = err instanceof Error ? err.message : 'Unknown error';
+    console.error("Failed to read clipboard:", errorMessage);
+    // Emit error event for UI feedback
+    emit("clipboard:error", errorMessage.includes('denied') ? 
+      'Please allow clipboard access' : 
+      'Failed to read from clipboard');
   }
 };

---

142-154: Enhance input accessibility.

The input field could benefit from ARIA attributes and focus styles for better accessibility.

 input {
   width: 290px;
   height: 24px;
   font-style: normal;
   font-weight: 400;
   font-size: 16px;
   line-height: 24px;
   letter-spacing: 0.25px;
   color: @primaryLabel;
   border: 0 none;
   outline: none;
   padding: 0;
+  &:focus-visible {
+    outline: 2px solid @primary;
+    outline-offset: 2px;
+  }
 }

packages/extension/src/providers/bitcoin/ui/send-transaction/tabs/spark-send-tab.vue (1)

141-166: Simplify transaction validation logic.

The validation logic combines multiple concerns and could be split into separate validation functions for better maintainability.

+const isValidAddress = computed(() => 
+  isSparkAddress(addressTo.value) || 
+  isAddress(addressTo.value, props.network.networkInfo)
+);
+
+const isValidAmount = computed(() => 
+  props.isSendToken && 
+  isValidDecimals(sendAmount.value, props.network.decimals!)
+);
+
+const isAboveDust = computed(() => 
+  !(Number(sendAmount.value) < (props.network as BitcoinNetwork).dust && 
+  props.isSendToken)
+);
+
+const hasEnoughBalance = computed(() => 
+  !new BigNumber(sendAmount.value).gt(
+    props.sparkAccount.sparkBalance.availableBalance
+  )
+);
+
 const isInputsValid = computed<boolean>(() => {
-  if (
-    !isSparkAddress(addressTo.value) &&
-    !isAddress(addressTo.value, props.network.networkInfo)
-  )
-    return false;
-
-  if (
-    props.isSendToken &&
-    !isValidDecimals(sendAmount.value, props.network.decimals!)
-  ) {
-    return false;
-  }
-  if (
-    Number(sendAmount.value) < (props.network as BitcoinNetwork).dust &&
-    props.isSendToken
-  )
-    return false;
-  if (
-    new BigNumber(sendAmount.value).gt(
-      props.sparkAccount.sparkBalance.availableBalance
-    )
-  )
-    return false;
-  return true;
+  return isValidAddress.value && 
+         isValidAmount.value && 
+         isAboveDust.value && 
+         hasEnoughBalance.value;
 });

packages/extension/src/providers/bitcoin/libs/api-firo.ts (4)

14-14: Remove or implement the unutilized init function.
The async init() method is declared but not implemented. If no initialization logic is required, consider removing the method to avoid confusion. Otherwise, implement the intended setup routines.

---

34-42: Leverage async/await for cleaner error handling.
Using .then() chains can be more cumbersome to maintain. Adopting async/await improves readability and makes try/catch blocks more straightforward for error handling.

-  return fetch(`${this.node}/insight-api-zcoin/rawtx/${hash}`)
-    .then((res) => res.json())
-    .then((tx: { hex: string; error: unknown }) => {
-      if ((tx as any).error) return null;
-      if (!tx.hex) return null;
-      return `0x${tx.hex}`;
-    });
+  try {
+    const res = await fetch(`${this.node}/insight-api-zcoin/rawtx/${hash}`);
+    const tx: { hex: string; error?: unknown } = await res.json();
+    if (tx.error || !tx.hex) return null;
+    return `0x${tx.hex}`;
+  } catch {
+    return null;
+  }

---

53-60: Adopt optional chaining to reduce logical checks.
Instead of explicitly verifying if t.addresses or t.scriptPubKey.addresses exist, you can use optional chaining for cleaner code.

- .filter((t) => t.addresses && t.addresses.length)
+ .filter((t) => t.addresses?.length)

- .filter(
-   (t) => t.scriptPubKey.addresses && t.scriptPubKey.addresses.length
- )
+ .filter(
+   (t) => t.scriptPubKey.addresses?.length
+ )

🧰 Tools

🪛 Biome (1.9.4)

[error] 53-53: Change to an optional chain.

Unsafe fix: Change to an optional chain.

(lint/complexity/useOptionalChain)

---

[error] 60-60: Change to an optional chain.

Unsafe fix: Change to an optional chain.

(lint/complexity/useOptionalChain)

---

74-87: Unify error handling for safer parsing.
The code checks balance.message in an any-casted object. Consider defining a refined type or adding a type guard to differentiate successful results from error objects, removing the need for casting.

Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro

#!/bin/bash
# Description: Verify network initialization and related components

# Check for network-related error handling
rg -A 5 "getNetworkByName" 

# Check for network validation in Spark-related components
rg -A 10 "BitcoinNetwork.*Spark"

# Check for proper network type validation
ast-grep --pattern 'network.value = $_ as BitcoinNetwork'

 const isInputsValid = computed<boolean>(() => {
+  // Check maximum transaction limits
+  const maxTxLimit = new BigNumber(1000000); // Network specific limit
+  if (new BigNumber(sendAmount.value).gt(maxTxLimit)) {
+    return false;
+  }
+
+  // Validate sufficient balance including fees
+  const totalRequired = new BigNumber(sendAmount.value).plus(
+    gasCostValues.value[selectedFee.value].nativeValue
+  );
+  if (totalRequired.gt(UTXOBalance.value.toString())) {
+    return false;
+  }
+
   // Rest of the validation...
   return true;
 });

+import { debounce } from 'lodash';
+const isSubmitting = ref(false);

-const sendAction = async () => {
+const sendAction = debounce(async () => {
+  if (isSubmitting.value) return;
+  isSubmitting.value = true;
   const fromAccountAddress = props.sparkAccount.allAddresses.at(-1)!;
   const toAmount = toBN(toBase(sendAmount.value, props.network.decimals));

+  try {
     router.push({
       name: RouterNames.verifySendFromSpark.name,
       query: {
         id: selected,
         txData: Buffer.from(
           JSON.stringify({
             toToken: {
               amount: toAmount.toString(),
               decimals: availableAsset.value.decimals!,
               icon: availableAsset.value.icon as string,
               symbol: availableAsset.value.symbol,
               valueUSD: new BigNumber(availableAsset.value.price || "0")
                 .times(sendAmount.value)
                 .toString(),
               name: availableAsset.value.name,
               price: availableAsset.value.price || "0",
             },
             fromAddress: fromAccountAddress,
             fromAddressName: "Spark Account",
             toAddress: addressTo.value,
           }),
           "utf8"
         ).toString("base64"),
       },
     });
+  } catch (error) {
+    console.error('Failed to initiate transaction:', error);
+    // Emit error for UI feedback
+    emit('send:error', 'Failed to initiate transaction');
+  } finally {
+    isSubmitting.value = false;
+  }
-};
+}, 1000, { leading: true, trailing: false });

+const mapErrorToUserMessage = (error: unknown): string => {
+  if (isAxiosError(error)) {
+    const message = error.response?.data.error.message;
+    // Map known error messages to user-friendly messages
+    if (message?.includes('insufficient funds')) {
+      return 'Insufficient funds to complete the transaction';
+    }
+    if (message?.includes('nonce')) {
+      return 'Transaction rejected: Please try again';
+    }
+    return 'Failed to send transaction. Please try again later';
+  }
+  return 'An unexpected error occurred';
+};

-if (isAxiosError(error)) {
-  errorMsg.value = JSON.stringify(error.response?.data.error.message);
-} else {
-  errorMsg.value = JSON.stringify(error);
-}
+errorMsg.value = mapErrorToUserMessage(error);

- [(await this.FiroToHaskoinUTXOs(utxos, address)).at(-1)!]
+ await this.FiroToHaskoinUTXOs(utxos, address)

packages/extension/src/ui/action/views/verify-send-from-spark-transaction/index.vue (2)

33-33: ⚠️ Potential issue

Sanitize error messages before display

Direct interpolation of error messages in the template could expose sensitive information or be vulnerable to XSS attacks.

Replace the direct interpolation with a sanitized message display:

-{{ errorMsg }}
+<span class="error-message">{{ sanitizedErrorMessage }}</span>

Add the following computed property to the script section:

const sanitizedErrorMessage = computed(() => {
  if (!errorMsg.value) return '';
  // Basic sanitization and truncation
  return errorMsg.value
    .toString()
    .replace(/[^\w\s-]/g, '')
    .substring(0, 100);
});

---

188-205: ⚠️ Potential issue

Improve error handling in catch block

The current error handling directly stringifies the error response or error object, which might expose sensitive information or result in unclear messages to users.

Implement proper error mapping:

 .catch((error) => {
   isProcessing.value = false;
-  if (isAxiosError(error)) {
-    errorMsg.value = JSON.stringify(error.response?.data.error.message);
-  } else {
-    errorMsg.value = JSON.stringify(error);
-  }
+  const getErrorMessage = (error: unknown): string => {
+    if (isAxiosError(error)) {
+      const message = error.response?.data.error.message;
+      return typeof message === 'string' 
+        ? message.replace(/[^\w\s-]/g, '') // Basic sanitization
+        : 'Network error occurred';
+    }
+    return 'Transaction failed';
+  };
+  errorMsg.value = getErrorMessage(error);
   trackSendEvents(SendEventType.SendFailed, {
     network: network.value.name,
     error: error.message,
   });

packages/extension/src/providers/bitcoin/ui/send-transaction/tabs/spark-send-tab.vue (1)

198-228: ⚠️ Potential issue

Add rate limiting and loading state to prevent duplicate transactions.

The sendAction method lacks protection against rapid multiple clicks, which could lead to duplicate transactions.

Apply this diff to add debouncing and loading state:

+import { debounce } from 'lodash';
+const isSubmitting = ref(false);

-const sendAction = async () => {
+const sendAction = debounce(async () => {
+  if (isSubmitting.value) return;
+  isSubmitting.value = true;
   try {
     const fromAccountAddress = props.sparkAccount.allAddresses.at(-1)!;
     const toAmount = toBN(toBase(sendAmount.value, props.network.decimals));
     await router.push({
       name: RouterNames.verifySendFromSpark.name,
       query: {
         id: selected,
         txData: Buffer.from(
           JSON.stringify({
             toToken: {
               amount: toAmount.toString(),
               decimals: availableAsset.value.decimals!,
               icon: availableAsset.value.icon as string,
               symbol: availableAsset.value.symbol,
               valueUSD: new BigNumber(availableAsset.value.price || "0")
                 .times(sendAmount.value)
                 .toString(),
               name: availableAsset.value.name,
               price: availableAsset.value.price || "0",
             },
             fromAddress: fromAccountAddress,
             fromAddressName: "Spark Account",
             toAddress: addressTo.value,
           }),
           "utf8"
         ).toString("base64"),
       },
     });
+  } catch (error) {
+    console.error('Failed to send transaction:', error);
+  } finally {
+    isSubmitting.value = false;
+  }
-};
+}, 1000, { leading: true, trailing: false });

packages/extension/src/providers/bitcoin/libs/api-firo.ts (1)

107-137: ⚠️ Potential issue

Add error handling for API calls in FiroToHaskoinUTXOs method.

The method makes multiple API calls without proper error handling.

 async FiroToHaskoinUTXOs(
   FiroUTXOs: FiroUnspentType[],
   address: string
 ): Promise<HaskoinUnspentType[]> {
   const ret: HaskoinUnspentType[] = [];
+  try {
     for (const utx of FiroUTXOs) {
-      const rawTxRes = (await cacheFetch({
-        url: `${this.node}/insight-api-zcoin/rawtx/${utx.txid}`,
-      })) as { rawtx: string };
-      const res = (await cacheFetch({
-        url: `${this.node}/insight-api-zcoin/tx/${utx.txid}`,
-      })) as FiroTxType;
+      try {
+        const rawTxRes = (await cacheFetch({
+          url: `${this.node}/insight-api-zcoin/rawtx/${utx.txid}`,
+        })) as { rawtx: string };
+        const res = (await cacheFetch({
+          url: `${this.node}/insight-api-zcoin/tx/${utx.txid}`,
+        })) as FiroTxType;
 
-      ret.push({
-        address,
-        block: {
-          height: res.blockheight,
-          position: 0,
-        },
-        index: utx.vout,
-        pkscript: res.vout[utx.vout].scriptPubKey.hex,
-        txid: utx.txid,
-        value: Number(utx.satoshis),
-        raw: rawTxRes.rawtx,
-      });
+        ret.push({
+          address,
+          block: {
+            height: res.blockheight,
+            position: 0,
+          },
+          index: utx.vout,
+          pkscript: res.vout[utx.vout].scriptPubKey.hex,
+          txid: utx.txid,
+          value: Number(utx.satoshis),
+          raw: rawTxRes.rawtx,
+        });
+      } catch (error) {
+        console.error(`Failed to process UTXO ${utx.txid}:`, error);
+        // Skip this UTXO and continue with others
+        continue;
+      }
     }
     ret.sort((a, b) => {
       return a.value - b.value;
     });
     return ret;
+  } catch (error) {
+    console.error('Failed to process UTXOs:', error);
+    throw error;
+  }
 }

packages/extension/src/ui/action/views/verify-send-from-spark-transaction/index.vue (1)

176-185: Add cleanup for timeouts

Timeouts should be cleaned up when the component is unmounted to prevent memory leaks.

Add timeout cleanup:

+const timeoutRef = ref<number>();

 if (getCurrentContext() === "popup") {
-  setTimeout(() => {
+  timeoutRef.value = window.setTimeout(() => {
     isProcessing.value = false;
     router.go(-2);
   }, 4500);
 } else {
-  setTimeout(() => {
+  timeoutRef.value = window.setTimeout(() => {
     isProcessing.value = false;
     window.close();
   }, 1500);
 }

+onBeforeUnmount(() => {
+  if (timeoutRef.value) {
+    window.clearTimeout(timeoutRef.value);
+  }
+});

packages/extension/src/libs/spark-handler/callRPC.ts (1)

40-43: Consider adding specific error handling

The current error handling is generic. Consider adding specific handling for common RPC errors.

Example implementation:

   } catch (error) {
+    if (axios.isAxiosError(error)) {
+      if (error.response?.status === 401) {
+        throw new Error('Unauthorized: Check RPC credentials');
+      }
+      if (error.code === 'ECONNABORTED') {
+        throw new Error('RPC request timed out');
+      }
+    }
     console.error("RPC Error:", error);
     throw error;
   }

packages/extension/src/providers/bitcoin/ui/send-transaction/components/send-spark-address-input.vue (2)

4-11: Add alt text for accessibility

The avatar image lacks meaningful alt text for screen readers.

       <img
         v-if="
           isSparkAddress(btcAddress) ||
           isAddress(btcAddress, props.network.networkInfo)
         "
         :src="network.identicon(btcAddress)"
-        alt=""
+        :alt="`${btcAddress} identicon`"
       />

---

15-30: Consider adding input validation feedback

The input validation only shows red text color for invalid addresses. Consider adding a tooltip or helper text to explain why the address is invalid.

       <input
         ref="addressInput"
         v-model="address"
         type="text"
         :disabled="disableDirectInput"
         placeholder="address"
+        :aria-invalid="!isSparkAddress(btcAddress) && !isAddress(btcAddress, props.network.networkInfo)"
         :style="{
           color:
             !isSparkAddress(btcAddress) &&
             !isAddress(btcAddress, props.network.networkInfo)
               ? 'red'
               : 'black',
         }"
         @focus="changeFocus"
         @blur="changeFocus"
       />
+      <span v-if="btcAddress && !isSparkAddress(btcAddress) && !isAddress(btcAddress, props.network.networkInfo)" 
+            class="invalid-feedback">
+        Invalid address format
+      </span>

packages/extension/src/providers/bitcoin/ui/send-transaction/index.vue (1)

87-89: Consider adding analytics for tab switches

Since the PR adds new UI interactions, consider tracking tab switches for analytics.

 const setSelectedSendTab = (activeTab: "transparent" | "spark") => {
   selectedSendTab.value = activeTab;
+  trackSendEvents(SendEventType.SendTabSwitch, {
+    network: props.network.name,
+    tab: activeTab
+  });
 };

packages/extension/src/providers/bitcoin/libs/api-firo.ts (1)

31-32: Implement or document the empty init() method.

The init() method is currently empty. If it's intended to be implemented by consumers, consider adding a comment explaining its purpose or marking it as optional.

-  async init(): Promise<void> {}
+  /**
+   * Optional initialization method for API setup.
+   * Override this method if additional setup is needed.
+   */
+  async init(): Promise<void> {}

Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro

 const RPC_URLS = {
   mainnet: "https://firo-rpc.publicnode.com/",
+  testnet: "https://testnet-firo-rpc.publicnode.com/", // Replace with actual testnet URL
 };

     const response = await axiosInstance.post(
       RPC_URLS['mainnet'],
       {
-        jsonrpc: "1.0",
+        jsonrpc: "2.0",
-        id: "js-client",
+        id: crypto.randomUUID(), // Generate unique ID for each request
         method: method,
         params: params ?? [],
-      },
-      {
-        headers: {
-          "Content-Type": "application/json",
-        },
       }
     );

#!/bin/bash
# Check if sparkAccount is properly handled in SparkSendTab
ast-grep --pattern 'sparkAccount: {
  type: $_, 
  required: true
}'

#!/bin/bash
# Let's try to find the SparkSendTab component definition and check its props
fd "SparkSendTab.vue" --exec cat {}

#!/bin/bash
# Let's try a broader search for the component file
fd -e vue --exec grep -l "SparkSendTab" {}

#!/bin/bash
# Let's check the SparkSendTab component import and its usage
rg -A 5 "SparkSendTab" ./packages/extension/src/providers/bitcoin/ui/send-transaction/index.vue

#!/bin/bash
# Let's examine the spark-send-tab.vue component
cat ./packages/extension/src/providers/bitcoin/ui/send-transaction/tabs/spark-send-tab.vue

 const inputAmount = (inputAmount: string) => {
   if (inputAmount === "") {
     inputAmount = "0";
   }
   const inputAmountBn = new BigNumber(inputAmount);
   isMaxSelected.value = false;
-  amount.value = inputAmountBn.lt(0) ? "0" : inputAmount;
+  amount.value = inputAmountBn.lt(0) ? "0" : inputAmountBn.toString();
 };

 const props = defineProps({
   network: {
     type: Object as PropType<BitcoinNetwork>,
-    default: () => ({}),
+    required: true,
+    validator: (value: BitcoinNetwork) => {
+      return Boolean(value.name && value.decimals && value.networkInfo);
+    }
   },
   accountInfo: {
     type: Object as PropType<AccountsHeaderData>,
-    default: () => ({}),
+    required: true,
+    validator: (value: AccountsHeaderData) => {
+      return Boolean(value.selectedAccount);
+    }
   },
   isSendToken: {
     type: Boolean,
     default: () => false,
   },
 });

 const isInputsValid = computed<boolean>(() => {
+  // Check for minimum transaction amount
+  const minAmount = new BigNumber(props.network.dust);
+  if (new BigNumber(sendAmount.value).lt(minAmount)) {
+    return false;
+  }
+
+  // Check for maximum gas fee (e.g., 10% of balance)
+  const maxGasFee = new BigNumber(UTXOBalance.value).multipliedBy(0.1);
+  const currentGasFee = new BigNumber(gasCostValues.value[selectedFee.value].nativeValue);
+  if (currentGasFee.gt(maxGasFee)) {
+    return false;
+  }
+
   if (
     !isSparkAddress(addressTo.value) &&
     !isAddress(addressTo.value, (props.network as BitcoinNetwork).networkInfo)
   ) {
     return false;
   }
   // ... rest of the validation logic
 });

 const setTransactionFees = (byteSize: number) => {
+  if (byteSize <= 0) {
+    console.error('Invalid byte size for fee calculation');
+    return;
+  }
   const nativeVal = selectedAsset.value.price || "0";
-  getGasCostValues(
+  return getGasCostValues(
     props.network as BitcoinNetwork,
     byteSize,
     nativeVal,
     props.network.decimals,
     props.network.currencyName
-  ).then((val) => (gasCostValues.value = val));
+  ).then((val) => (gasCostValues.value = val))
+   .catch((error) => {
+     console.error('Failed to calculate gas costs:', error);
+     gasCostValues.value = defaultGasCostVals;
+   });
 };

 const updateUTXOs = async () => {
   const api = (await props.network.api()) as BitcoinAPI;
-  return api.getUTXOs(addressFrom.value).then((utxos) => {
+  try {
+    const utxos = await api.getUTXOs(addressFrom.value);
     accountUTXOs.value = utxos;
     const txSize = calculateSizeBasedOnType(
       accountUTXOs.value.length + (props.isSendToken ? 0 : 1),
       2,
       (props.network as BitcoinNetwork).networkInfo.paymentType
     );
     setTransactionFees(Math.ceil(txSize));
-  });
+  } catch (error) {
+    console.error('Failed to update UTXOs:', error);
+    accountUTXOs.value = [];
+  }
 };

 const sendAction = async () => {
+  // Validate total output value doesn't exceed input value
+  const totalOutput = toAmount.add(currentFee);
+  if (totalOutput.gt(UTXOBalance.value)) {
+    throw new Error('Insufficient funds including fees');
+  }
+
   // ... existing code ...
   
   if (remainder.gtn(0)) {
+    // Check if remainder is above dust limit
+    if (remainder.lt(props.network.dust)) {
+      throw new Error('Change amount below dust limit');
+    }
+    // Validate change address
+    if (!isAddress(addressFrom.value, props.network.networkInfo)) {
+      throw new Error('Invalid change address');
+    }
     txInfo.outputs.push({
       address: props.network.displayAddress(addressFrom.value),
       value: remainder.toNumber(),
     });
   }
 };

+let isGeneratingSparkAddress = false;
 const generateNewSparkAddress = async () => {
+  if (isGeneratingSparkAddress) return;
+  try {
+    isGeneratingSparkAddress = true;
     const newSparkAddressResponse = await generateSparkAddress();
     if (accountHeaderData.value.sparkAccount) {
       accountHeaderData.value.sparkAccount.defaultAddress =
         newSparkAddressResponse;
       accountHeaderData.value.sparkAccount.allAddresses.push(
         newSparkAddressResponse
       );
     }
+  } finally {
+    isGeneratingSparkAddress = false;
+  }
 };

packages/extension/src/providers/bitcoin/types/bitcoin-network.ts (1)

56-59: Replace magic numbers with a named constant or utility function.

The length checks >= 144 and < 64 are magic numbers that implicitly handle Spark addresses. As noted in a previous review, consider using a dedicated isSparkAddress check or at minimum document these thresholds with constants.

Suggested improvement

+const MIN_PUBKEY_LENGTH = 64;
+const SPARK_ADDRESS_MIN_LENGTH = 144;
+
 export const getAddress = (pubkey: string, network: BitcoinNetworkInfo) => {
-  if (pubkey.length >= 144 || pubkey.length < 64) {
+  // Return as-is if already an address (short) or a Spark address (long)
+  if (pubkey.length >= SPARK_ADDRESS_MIN_LENGTH || pubkey.length < MIN_PUBKEY_LENGTH) {
     return pubkey;
   }

packages/extension/src/providers/bitcoin/types/index.ts (1)

114-126: Naming inconsistency: blockheight vs blockHeight.

FiroTxType uses blockheight (lowercase 'h') while SSTxType uses blockHeight (camelCase). This inconsistency could lead to bugs when developers expect consistent casing. Consider aligning with the API response format or documenting this difference clearly.

packages/extension/src/providers/bitcoin/ui/send-transaction/tabs/spark-send-tab.vue (1)

187-217: Consider adding rate limiting to prevent duplicate transactions.

The send action lacks rate limiting, which could lead to duplicate transactions if the user clicks multiple times rapidly. Consider adding a loading state or debouncing.

packages/extension/src/providers/bitcoin/ui/send-transaction/index.vue (1)

12-29: Accessibility: Missing keyboard navigation for tabs.

The tab implementation from the previous review still lacks proper ARIA attributes and keyboard navigation support as noted in past review comments. If you plan to enable these tabs, ensure accessibility compliance.

Refer to the past review comment for the specific ARIA attributes and keyboard handlers needed.

packages/extension/src/providers/bitcoin/ui/send-transaction/tabs/transparent-send-tab.vue (3)

259-268: Consider adding error handling for fee calculation.

The promise chain lacks error handling. If getGasCostValues fails, gasCostValues.value won't be updated and will retain stale data, potentially causing incorrect fee display.

---

183-196: Props should be marked as required.

The network and accountInfo props use empty object defaults, which could lead to runtime errors if the parent component doesn't provide them. These appear to be essential for the component to function.

---

524-530: Missing dust threshold check for change output.

When the remainder is greater than 0, it's added as a change output without checking if it exceeds the dust threshold. A remainder below the dust limit would create an unspendable output and waste fees.

🔎 Proposed fix

 const remainder = UTXOBalance.value.sub(toAmount).sub(currentFee);
-if (remainder.gtn(0)) {
+const dustThreshold = (props.network as BitcoinNetwork).dust;
+if (remainder.gtn(dustThreshold)) {
   txInfo.outputs.push({
     address: props.network.displayAddress(addressFrom.value),
     value: remainder.toNumber(),
   });
+} else if (remainder.gtn(0)) {
+  // Remainder below dust - add to fee instead of creating unspendable output
+  // Fee is already deducted, no action needed
 }

packages/extension/src/providers/bitcoin/libs/api-firo.ts (1)

29-37: Add error handling for network failures.

The fetch chain doesn't handle network errors. If the request fails, the promise will reject without graceful handling.

packages/extension/src/libs/utils/number-formatter.ts-316-317 (1)

316-317: Replace @ts-ignore with a compatible string method.

Using @ts-ignore suppresses all TypeScript errors on the following line, which can hide legitimate type issues. The replaceAll method may not be recognized depending on your TypeScript target configuration.

🔎 Recommended fix using `.replace()` with global regex

-  // @ts-ignore
-  const value = new BigNumber(_value.toString().replaceAll('%', ''));
+  const value = new BigNumber(_value.toString().replace(/%/g, ''));

This approach is more widely compatible and eliminates the need for type suppression.

packages/extension/src/providers/bitcoin/libs/firo-wallet/utils.ts-1-6 (1)

1-6: Use generics for type safety and align callback signature with implementation.

The function signature has two issues:

1. Using any types reduces type safety. Consider using a generic type parameter.
2. The callback signature declares an optional index parameter, but Line 11 never passes it. Either pass the index or remove it from the signature.

🔎 Proposed refactor with generics and consistent callback signature

-export const chunkedEvery = (
-  data: any[],
+export const chunkedEvery = <T>(
+  data: T[],
   chunksize: number,
-  callback: (data: any, index?: number) => void,
+  callback: (data: T, index: number) => void,
   finished: () => void,
 ) => {

Then update Line 11 to pass the index:

-      callback(data[i]);
+      callback(data[i], i);

Committable suggestion skipped: line range outside the PR's diff.

packages/extension/src/providers/bitcoin/libs/firo-wallet/utils.ts-7-18 (1)

7-18: Add error handling and input validation.

The implementation has two major concerns:

1. No error handling: If the callback throws an error, processing halts and the finished callback is never invoked, leaving operations incomplete.
2. No input validation: Invalid inputs (e.g., chunksize <= 0, null data) can cause runtime errors or infinite loops.

🔎 Proposed fix with error handling and validation

 export const chunkedEvery = <T>(
   data: T[],
   chunksize: number,
   callback: (data: T, index: number) => void,
   finished: () => void,
 ) => {
+  if (!data || !Array.isArray(data)) {
+    throw new Error('data must be a non-null array');
+  }
+  if (chunksize <= 0) {
+    throw new Error('chunksize must be positive');
+  }
+  if (typeof callback !== 'function' || typeof finished !== 'function') {
+    throw new Error('callback and finished must be functions');
+  }
+
   let i = 0;
   (function chunk() {
     const end = Math.min(i + chunksize, data.length);
     for (; i < end; ++i) {
-      callback(data[i], i);
+      try {
+        callback(data[i], i);
+      } catch (error) {
+        console.error('Error in chunkedEvery callback:', error);
+        // Continue processing remaining items or rethrow based on requirements
+      }
     }
     if (i < data.length) {
       setTimeout(chunk, 0);
     } else {
-      finished.call(null);
+      finished();
     }
   })();
 };

Note: The error handling strategy (continue vs. abort) should align with your use case requirements.

Committable suggestion skipped: line range outside the PR's diff.

packages/extension/src/libs/utils/wasm-loader.ts-46-68 (1)

46-68: Race condition: concurrent getInstance() calls may load WASM multiple times.

If getInstance() is called multiple times before the first load completes (and before this.instance is set), each call will trigger a separate loadWasm(). Consider using a pending promise to deduplicate concurrent requests.

🔎 Proposed fix

 class WasmInstance {
   instance: WasmModule | null = null;
+  private loadingPromise: Promise<WasmModule> | null = null;

   constructor() {
-    loadWasm()
-      .then(module => {
-        this.instance = module;
-      })
-      .catch(error => {
-        console.error('Error loading WASM module:', error);
-      });
+    // Eagerly start loading
+    this.loadingPromise = loadWasm()
+      .then(module => {
+        this.instance = module;
+        return module;
+      })
+      .catch(error => {
+        console.error('Error loading WASM module:', error);
+        this.loadingPromise = null;
+        throw error;
+      });
   }

   public async getInstance(): Promise<WasmModule> {
     if (this.instance) {
-      return Promise.resolve(this.instance);
-    } else {
-      const wasm = await loadWasm();
-      this.instance = wasm;
-      return Promise.resolve(wasm);
+      return this.instance;
     }
+    if (this.loadingPromise) {
+      return this.loadingPromise;
+    }
+    this.loadingPromise = loadWasm().then(module => {
+      this.instance = module;
+      return module;
+    });
+    return this.loadingPromise;
   }
 }

packages/extension/src/libs/background/index.ts-177-181 (1)

177-181: Wrap switch case declarations in a block and handle unlock failure gracefully.

Static analysis correctly flags that const declarations in switch cases can leak to other cases. Additionally, if unlock() fails after setSecret() is called, the wallet will have the mnemonic set but the keyring will remain locked, causing an inconsistent state.

🔎 Proposed fix

       case InternalMethods.unlock:
-        const password = message?.params?.[0] as string;
-        const mnemonic = await this.#keyring.getSavedMnemonic(password);
-        this.#wallet.setSecret(mnemonic);
-        return unlock(this.#keyring, message);
+      {
+        const password = message?.params?.[0] as string;
+        const result = await unlock(this.#keyring, message);
+        if (!result.error) {
+          const mnemonic = await this.#keyring.getSavedMnemonic(password);
+          this.#wallet.setSecret(mnemonic);
+        }
+        return result;
+      }

Committable suggestion skipped: line range outside the PR's diff.

packages/extension/src/libs/spark-handler/getFee.ts-6-11 (1)

6-11: Missing error handling for fee estimation failure.

If firoElectrum.estimateFee(2) fails or returns an unexpected value (e.g., -1 which some Electrum servers return when fee estimation is unavailable), the calculation will produce invalid results.

🔎 Proposed fix with fallback

 export const getFee = async (tempTx: bitcoin.Transaction) => {
   const feeRate = (await firoElectrum.estimateFee(2)) as number;
+  
+  if (feeRate <= 0) {
+    throw new Error('Unable to estimate fee rate');
+  }

   return new BigNumber(feeRate)
     .times(Math.ceil(tempTx.virtualSize() / 1000))
     .times(SATOSHI);
 };

packages/extension/src/providers/bitcoin/libs/firo-wallet/firo-wallet.ts-99-146 (1)

99-146: Null safety check required before destructuring storage result.

Line 109 has a potential null reference error. The storage.get() method returns null if the key doesn't exist, and destructuring const { secret } from null will throw a TypeError. Add an explicit null check before destructuring:

 const { secret } = await this.#storage.get(
   configs.STORAGE_KEYS.FIRO_WALLET_SECRET,
 );
+if (!secret) {
+  throw new Error('FiroWallet not initialized');
+}

-const seed = bip39.mnemonicToSeedSync(secret!);
+const seed = bip39.mnemonicToSeedSync(secret);

The derivation logic assumes a strict input order that is not validated. The algorithm correctly derives keys when getTransactionsAddresses() returns addresses split exactly as [external_0, external_1, ..., internal_0, internal_1, ...]. However, this assumption is fragile: if the input order differs or if this function is called with addresses in another sequence, the key mappings will be incorrect. Consider adding a validation or storing derivation metadata (address index and change flag) with each address instead of relying on position-based assumptions.

packages/extension/src/libs/spark-handler/createTempTx.ts-62-74 (1)

62-74: Validate that keyPair exists for each UTXO address before signing.

If addressKeyPairs[utxo.address] is undefined, the subsequent keyPair.sign() call will throw. Add a guard to provide a clearer error message.

Suggested fix

   for (let index = 0; index < spendableUtxos.length; index++) {
     const utxo = spendableUtxos[index];
     const keyPair = addressKeyPairs[utxo.address];
 
+    if (!keyPair) {
+      throw new Error(`Missing key pair for address: ${utxo.address}`);
+    }
+
     const Signer = {
       sign: (hash: Uint8Array) => {
         return Buffer.from(keyPair.sign(hash));
       },
       publicKey: Buffer.from(keyPair.publicKey),
     } as unknown as bitcoin.Signer;
 
     tx.signInput(index, Signer);
   }

packages/extension/src/libs/spark-handler/createTempTx.ts-53-60 (1)

53-60: Guard against empty spendableUtxos array before accessing first element.

If changeAmount > 0 but spendableUtxos is empty, accessing spendableUtxos[0].address will throw a runtime error. Add a defensive check.

Suggested fix

   if (changeAmount.gt(0)) {
+    if (spendableUtxos.length === 0) {
+      throw new Error('Cannot add change output: no spendable UTXOs available');
+    }
     const firstUtxoAddress = spendableUtxos[0].address;
 
     tx.addOutput({
-      address: firstUtxoAddress!,
+      address: firstUtxoAddress,
       value: changeAmount.toNumber(),
     });
   }

packages/extension/src/libs/spark-handler/createTempFromSparkTx.ts-44-44 (1)

44-44: Avoid parseFloat for cryptocurrency amounts due to floating-point precision loss.

Using parseFloat(amount) can introduce precision errors with decimal values. Consider using a library like BigNumber or converting to satoshis as an integer.

Suggested fix using BigNumber

+import BigNumber from 'bignumber.js';
+
+// Convert string amount to satoshis (integer)
+const amountSatoshis = new BigNumber(amount).times(1e8).integerValue().toNumber();
+
     tempTx.addOutput({
       address: to,
-      value: parseFloat(amount),
+      value: amountSatoshis,
     });

Committable suggestion skipped: line range outside the PR's diff.

packages/extension/src/providers/bitcoin/ui/send-transaction/tabs/spark-send-tab.vue-130-155 (1)

130-155: Validation logic may allow invalid transactions.

With the balance and dust checks commented out (lines 143-153), the validation only checks address format and decimal validity. This could allow users to submit transactions with amounts exceeding their balance or below the dust threshold, which would fail at the network level.

packages/extension/src/providers/bitcoin/ui/send-transaction/tabs/spark-send-tab.vue-143-154 (1)

143-154: Commented-out validation code should be resolved.

There's a significant block of commented-out validation logic for dust amount and balance checks. Either uncomment and enable this validation, or remove the dead code if it's no longer needed. Leaving it commented creates ambiguity about intended behavior.

packages/extension/src/providers/bitcoin/ui/libs/signer.ts-145-155 (1)

145-155: Missing error handling for unknown addresses in keypair mapping.

If input.address is not found in addressKeyPairMapping, accessing keyPair.sign or keyPair.publicKey will throw a runtime error. Add validation to provide a clearer error message.

🔎 Proposed fix

   allInputs.forEach((input, i) => {
     const keyPair = addressKeyPairMapping[input.address];
+    if (!keyPair) {
+      throw new Error(`No keypair found for address: ${input.address}`);
+    }
     const Signer = {
       sign: (hash: Uint8Array) => {
         return Buffer.from(keyPair.sign(hash));
       },
       publicKey: Buffer.from(keyPair.publicKey),
     } as unknown as bitcoin.Signer;

     tx.signInput(i, Signer);
   });

packages/extension/src/providers/bitcoin/ui/send-transaction/tabs/spark-send-tab.vue-228-231 (1)

228-231: Remove debug code and hardcoded fallback value before release.

The console.log statement and the hardcoded fallback value 400000000 with the TODO comment are development artifacts that should be removed before merging to production.

🔎 Proposed fix

   if (availableAsset.value.coingeckoID) {
     const market = new MarketData();
     const marketData = await market.getMarketData([
       availableAsset.value.coingeckoID,
     ]);

     availableAsset.value.price = (marketData[0]?.current_price ?? 0).toString();
   }
-  console.log(props.sparkAccount.sparkBalance.availableBalance);
-  availableAsset.value.balance = String(
-    props.sparkAccount.sparkBalance.availableBalance || 400000000, // TODO : remove this fallback value
-  );
+  availableAsset.value.balance = String(
+    props.sparkAccount.sparkBalance.availableBalance || 0,
+  );
   availableAsset.value.name = 'Available Balance';
 };

packages/extension/src/libs/spark-handler/index.ts-460-486 (1)

460-486: Remove extensive commented-out debugging code.

Lines 460-486 contain a large block of commented-out code that clutters the implementation. This should be removed to improve readability.

packages/extension/src/libs/spark-handler/index.ts-315-328 (1)

315-328: Remove large block of commented-out code.

Lines 323-328 contain commented-out code and TODO notes. Remove dead code or convert to proper documentation if the information is valuable.

packages/extension/src/providers/bitcoin/ui/send-transaction/index.vue-11-29 (1)

11-29: Dead code: Tabs are disabled with v-if="false".

Lines 12-29 define a tab UI that is permanently disabled with v-if="false". If this feature is not ready, consider removing this code or moving it to a feature branch. The commented condition on line 11 suggests this should be enabled for Firo networks with Spark accounts, but it's currently hardcoded to false.

Should this be enabled, or should the tab code be removed until it's ready for production?

packages/extension/src/libs/spark-handler/getSparkCoinInfo.ts-118-242 (1)

118-242: Remove extensive commented-out example code.

Lines 118-242 contain large blocks of commented-out example usage code. This significantly bloats the file and reduces readability. Either remove this code or move it to separate documentation/examples.

packages/extension/src/libs/spark-handler/getMintTxData.ts-45-47 (1)

45-47: Memory leak on error throw.

If mintedCoinData creation fails and an error is thrown (line 46), the previously allocated decodedAddressPtr (line 29) is never freed, causing a memory leak.

🔎 Recommended fix

Wrap the entire function body in a try/finally block to ensure cleanup:

+  let decodedAddressPtr;
+  let outputsPointerArray;
+  let serialContextPointer;
+  
+  try {
-  const decodedAddressPtr = wasmModule.ccall(
+    decodedAddressPtr = wasmModule.ccall(
       'js_decodeAddress',
       'number',
       ['string', 'number'],
       [address, Number(isTestNetwork)],
     );
     
     // ... rest of the function
     
+  } finally {
+    if (decodedAddressPtr) wasmModule._free(decodedAddressPtr);
+    if (outputsPointerArray) wasmModule._free(outputsPointerArray);
+    if (serialContextPointer) wasmModule._free(serialContextPointer);
+  }

Committable suggestion skipped: line range outside the PR's diff.

packages/extension/src/libs/spark-handler/getMintTxData.ts-70-72 (1)

70-72: Inconsistent error handling approach.

Line 46 throws an Error, but line 71 also throws an Error. However, the cleanup code (lines 104-105) will not execute if an error is thrown, leading to memory leaks. Use a try/finally pattern to ensure cleanup.

packages/extension/src/libs/spark-handler/generateSparkWallet.ts-45-50 (1)

45-50: Memory leak in error handling path.

The error handler frees spendKeyDataObj and keyDataPtr, but if spendKeyDataObj creation fails (line 29), it will be 0 and the subsequent free calls may reference uninitialized variables. Additionally, if spendKeyObj creation fails, spendKeyObj is not freed before returning.

🔎 Recommended fix

  } catch (e) {
    console.log(e);
-   wasm.ccall('js_freeSpendKeyData', null, ['number'], [spendKeyDataObj]);
-   wasm._free(keyDataPtr);
+   if (spendKeyDataObj && spendKeyDataObj !== 0) {
+     wasm.ccall('js_freeSpendKeyData', null, ['number'], [spendKeyDataObj]);
+   }
+   if (keyDataPtr) {
+     wasm._free(keyDataPtr);
+   }
    return 0;
  }

packages/extension/src/libs/utils/updateAndSync/updateCoinSet.ts-155-163 (1)

155-163: Set operations on arrays won't deduplicate correctly.

JavaScript Set uses reference equality for arrays, so new Set(coins) where coins is string[][] won't deduplicate coins with identical content. Two separate ['a', 'b'] arrays will be treated as different elements.

Additionally, differenceSets returns elements in the first set not in the second, but the intent here appears to be merging/union. Consider:

-const updatedCoinsSet = differenceSets(
-  new Set(localSets?.[index]?.coins ?? []),
-  new Set(newCoins),
-);
-localSets[index] = {
-  blockHash: remoteMeta.blockHash,
-  setHash: remoteMeta.setHash,
-  coins: Array.from(updatedCoinsSet),
-};
+// For full replacement, use new coins; for delta, append new coins to existing
+const existingCoins = isFullReplacement ? [] : (localSets?.[index]?.coins ?? []);
+const mergedCoins = [...existingCoins, ...newCoins];
+localSets[index] = {
+  blockHash: remoteMeta.blockHash,
+  setHash: remoteMeta.setHash,
+  coins: mergedCoins,
+};

Committable suggestion skipped: line range outside the PR's diff.

packages/extension/src/providers/bitcoin/libs/electrum-client/electrum-client.ts-73-91 (1)

73-91: Retry condition is always true; risk of infinite retry loop.

In the catch block, this.mainClient is set to undefined on line 82, so the check at line 84 (!this.mainClient) is always true. This creates an infinite retry loop with no backoff or max retry limit.

Consider adding retry limits or exponential backoff:

+private retryCount = 0;
+private readonly MAX_RETRIES = 5;

 async connectMain() {
   try {
     const peer = getRandomHardcodedPeer();
     this.mainClient = new ElectrumClient(peer.host, 50004, 'wss');
     await this.mainClient.connect('electrum-client-browser', '1.4');
     this.wasConnectedAtLeastOnce = true;
+    this.retryCount = 0;
   } catch (e) {
     this.mainClient = undefined;
     console.error('electrum_wallet:connectMain', e);
-    if (!this.mainClient) {
+    if (this.retryCount < this.MAX_RETRIES) {
+      this.retryCount++;
       console.warn('electrum_wallet:connectMain', 'retry');
-      setTimeout(() => {
+      const delay = Math.min(5000 * Math.pow(2, this.retryCount), 60000);
+      setTimeout(() => {
         this.connectMain();
-      }, 5000);
+      }, delay);
+    } else {
+      console.error('electrum_wallet:connectMain', 'Max retries exceeded');
     }
   }
 }

Committable suggestion skipped: line range outside the PR's diff.

packages/extension/src/providers/bitcoin/libs/electrum-client/electrum-client.ts-103-111 (1)

103-111: Methods assume mainClient is connected.

Multiple methods use this.mainClient! without checking if the client is connected. If called before connection or after disconnect, this will throw a runtime error.

Consider adding a connection check helper:

+private ensureConnected(): ElectrumClient {
+  if (!this.mainClient) {
+    throw new Error('Electrum client not connected');
+  }
+  return this.mainClient;
+}

 async getBalanceByAddress(address: string): Promise<any> {
   const script = bitcoin.address.toOutputScript(address, networkInfo);
   const hash = bitcoin.crypto.sha256(script);
   const reversedHash = Buffer.from(hash.reverse());
-  return await this.mainClient!.blockchain_scripthash_getBalance(
+  return await this.ensureConnected().blockchain_scripthash_getBalance(
     reversedHash.toString('hex'),
   );
 }

packages/extension/src/providers/bitcoin/libs/firo-wallet/base-firo-wallet.ts-32-34 (1)

32-34: setSecret should await the async underlying method.

According to the FiroWallet implementation, setSecret(secret: string) returns Promise<void> as it persists data to storage. The current implementation doesn't await this, which could cause race conditions if callers assume the secret is persisted after the call returns.

-setSecret(mnemonic: string) {
-  this.#wallet.setSecret(mnemonic);
+async setSecret(mnemonic: string): Promise<void> {
+  await this.#wallet.setSecret(mnemonic);
 }