* Transaction errors (#550)

* wip: showing plain transaction error on screen alert

* handle result promise

* remove listener in approval

* drop package-lock

* comments

* Add zxcvbn for password strength estimation (#555)

* add zxcvbn

* use zxcvbn for password estimations

* add comments

* update snapshot

* navar title numberoflines 1 (#557)

* Reduce instances of cached contract addresses (#547)

Reduce instances of cached contract addresses

* poll balances when tx happens (#562)

* Fix custom gas price (#566)

* fix wrong custom gas value

* fix calculation

* fix comments

* Feature: implement method registry (#571)

* add handlemethoddata gaba support

* update action keys methods

* update tests

* in tx review if method data unknown default to unknown method

* bump gaba

* Feature: EIP747 watchAsset (#576)

* watchasset erc20 basic support

* render watchasset modal

* handle watchasset call

* handle watchasset rejection

* handle watched asset images

* missing strings

* snapshots

* bump gaba

* fix styles

* snapshots

* styles update

* pin dep

* install

* Improvement: Transaction Edit (#579)

* close dropdown if press outside

* snapshots

* missing doc

* renaming

* Fix asset removal (#582)

* fix asset removal

* clean up

* fix typo

* bump gaba

* update package-lock

* Fix missing balances (#583)

* fix missing balances

* Update index.js

* Update currency rate too

* dont poll tokens

* Remove ref

* bump gaba

* remember biometrics preference (#584)

* Feature: token deeplinks support (#588)

* handling data through deeplink

* handle chainId

* handle token value correctly

* use contract metadata to get token info is in there

* showing alert while changing network

* don't validate toen that user doesn't have

* validate amount token to send if user doesn't have it in state

* move messages to locales

* fix getbalanceof

* handle state token

* fix typo

* update locale

* locales

* feature: update GABA to 1.0.0-beta.71 (#590)

* Two step  push notification prompt (#589)

* two step notification prompt

* clean up

* fix typo

* Update deps (#591)

* update react-native-push-notification

* upgrade react-native to v0.59.4

* Feature: Warning when send to known asset (#593)

* warning when user is sending eth or assets to known asset contract

* snapshots

* check contract map only on mainnet

* test

* Bugfix: remove and ignore assets only where is necessary (#594)

* remove and ignore assets only where is necessary

* bump gaba

* Feature: Choose IPFS gateway (#592)

* use of ipfsgateway from GABA

* handle ipfs gateway selection

* snapshots

* snapshots

* reorder ipfs gateways list

* only show available ipfs gateways

* snapshots

* bump gaba

* handle current gateway down

* snapshots

* Improvement: consolidate send and approval screens (#596)

* consolidate send screen

* consolidate approval screen

* tx mode from navigation

* fix renderable value being undefined when edit approval

* snapshots

* Remember recent addresses (#597)

* kinda works

* keyboard wizardry working

* fix eth input

* bump detox (#599)

* Fix account label wallet (#600)

* bump detox

* fix default value

* feature: add 1102 convenience methods (#602)

* Improvement: update corresponding balances (#601)

* existing contact bugfix

* poll only when necessary

* recent address bugfix and adding asset type in approval

* update left button navbar when tx fails

* avoid checking for asset address for undefined

* Feature: collectibles api key (#603)

* add opensea key from env

* bump gaba

* change const name

* Improvement: shareable SimpleWebView (#604)

* make shareable simple web view

* test

* check for navigation

* update ios

* Animations on App launch & resume (#606)

* lottie working

* added fadeIn / out effect

* finally fix crash in debug mode

* added fadeIn to other views

* update unit tests

* fix lock screen

* adjust timing

* more timing stuff

* fix timing stuff

* use optimized bounce animation

* fix for android

* update snapshots

* use exact versions

* bump version to 0.1.7 (#608)

* update gem lockfile (#612)

* use latest xcode image (#614)

* unlink libRCTGeolocation (#616)

* Bugfix: currency code & values with less than 5 precision decimals (#615)

* remove usd dollar symbol

* render low values

* avoid crashing app when hot reloading

* avoid rendering when no value

* rollback fix

* tests

* comment

* update animation (#619)

* update animation

* update snapshots

* Bugfix: standardize colors (#618)

* reds

* blue

* greays and primaryfox

* greens

* yellow

* orange

* random colors

* snapshots

* update colords

* snapshots

* Revert "update animation (#619)" (#620)

This reverts commit 884a20f.

* Feature: switch primary currency (#624)

* select primary currency

* wip number methods

* send ETH withprimary currency fiat

* fiatNumberToTokenMinimalUnit

* tokens working

* avoid exponential and render input

* ethinput doc

* handle value from ethinput

* fix fill max when fiat as primary currency

* clean up of values

* clean render input

* clean renderAsset

* render tokens according to primary currency

* processreadablevalue and fill max

* balances and secondary balances

* snapshots

* small changes

* pick component

* snapshots

* handle periodic numbers

* comments

* Feature: onboarding wizard (#607)

* onboarding wizard component

* rendering on top of stack"

* steps and close tooltips

* fake navigator

* indicator style

* hardcoded step 1 WIP

* step 1 done

* step 2 done

* bullet progress bar

* step 4

* use redux to navigate through onboarding

* step 5

* steps 6 and 7

* got it

* rename tooltip to coachmark

* delete unused file

* transparent styled button

* update step3 to change account label

* skip tutorial button

* handle all onboarding state from redux

* progress bar from array

* doc

* locales

* snapshots

* passing content and onboarding styles

* reorder texts

* update spanish

* render methods

* render onboarding wizard only when first time in app

* IOS styles

* android styles

* snapshots

* browser first

* snapshots

* label padding

* minor comments

* check onboarding on create / import wallet

* sync from extension success

* sync from extension success

* add to entry and login

* snapshots

* feature: allow transactions to be cancelled (#622)

* Improvement: assets detection (#627)

* use collectible contract if image collectible is empty

* bump gaba

* Feature: terms and conditions (#631)

* terms and conditions compoenent

* import from seed

* webview to stack

* locales

* snapshots

* rm unused state

* Feature: Tabs (#623)

* good progress on tabs UI

* tabs "kinda working"

* fix tab selection

* snapshots

* refactor into components

* more refactor

* animations FTW

* adjust values

* fix tests

* fix android UI

* fix bugs

* good progress on multi-webview approach

* working on android and ios

* fix a bunch of bugs

* fix thumbnails

* fix tests

* refactor folder structure

* improve snapshot reliability

* fix tab remounted issue

* clean up

* fix back button ios

* take screenshot before showing tabs

* show real tab count

* bugfixzzz

* code review comments

* dynamic calculation for scrolling

* Feature: opt-in metrics (#632)

* WIP

* optin metrics screen full structure working

* optin screen

* create wallet flow

* entry flow

* import from seed

* sync with extension flow

* docs

* basic logger

* metametrics settings

* navbar

* logoin flow

* snapshots AND ICONS

* update no thanks

* navbar doc

* navbar colors and comment/;

* restore action view

* scrollable optin

* snapshots

* Improvement: gas limit fallback (#633)

* gas limit estimation fallback

* log

* Bugfix: asset overview balance (#635)

* render value on corresponding network

* handle txs loader when switching networks

* snapshots

* svoid balance of undefined

* Bugfix: phishing modal (#637)

* fix ios biometrics permission prompt (#634)

* Feature: import from seed password strength (#639)

* add password strength to import from seed

* snapshots

* padding and jump to password

* Bugfix: collectibles original image (#642)

* bump gaba

* add collectible address

* bump gaba and audit

* Feature: payment request (#641)

* modal payment request

* add qr address modal

* basic stricture done

* rename

* select asset payment request

* basic amount input

* handle payment request navigation

* handle amount

* handle primary currency

* handle primary currency switch

* get crypto amount

* divide primary currency methods

* add buttons

* generate link

* success UI

* better ui

* share and copy to clipboard

* show and close qer modal

* consolidate ui and shgow user tokens

* payment request flow from asset

* handle network assets and link

* handle empty search and empty tokens

* handle not conversion rate

* handle fiat primary currency with no conversion nor exchange rate

* handle decimal places

* consolidate primary currency methods

* fix condition

* docs

* more docs

* qr codes update

* locales

* onbuy coming soon

* fix android icions

* update icons

* snapshots

* on submit next

* handle payment request from qrscanner

* update receive icon

* snapshots

* update qr codes

* update qr and android

* android

* comments

* Swap cent for bounties (#626)

* Swap cent for bounties

* Fix typo

* Fix payment request icon (#645)

* fix icon

* update snapshots

* Feature: WalletConnect support (#643)

* working

* show session prompt

* support for multiple connectors

* persisting sessions and list

* update snapshots

* clean up

* clean-up

* Update WalletConnect.js

* Update animation (#646)

* update animation

* update snapshots

* fix and update assets

* adjust values

* update snapshots

* Bugfix: fiat deeplinks (#648)

* fix button info type color

* fix bug

* drop package

* make overlay tappable on connect modal (#650)

* make overlay tappable on connect modal

* update snapshot

* Bugfix: websites title and icon (#651)

* if on title query for title when adding bookmark

* fix website icon state

* delete didmount

* snapshots

* android navbar

* android navbar

* browser scripts

* Bugfix: android icon (#653)

* downgrade rn vector icons

* copy address from public address

* snapshots

* drop fabric

* space

* Feature: local analytics (#656)

* introduce analytics

* analytics opts

* introduce tracking methods

* track onboarding events

* track navigation events

* common but navigation swipe

* browser view

* dapp view

* wallet view

* rm settings logger

* tramsaction confirm and approval screens

* tramsaction confirm and cancel actions

* transactions signatureS

* transactions signatures doc

* switch accounts

* track login

* track connect

* DRY

* track settings

* snapshots

* id dev log

* remove async storage optin from settings

* drop package-lock

* runafterinteractions for analytics in didmount

* interactionmanager changes

* move tracking to end in send

* analytics

* move to end

* Updated tabs and browser navigation (#658)

* updated tabs and browser navigation

* fix android stuff

* update snapshots

* update snapshots

* Delete comment

* Update index.js

* Update Sync instructions (#660)

* update eng instructions

* update es instructions

* Feature: advanced custom rpc (#661)

* add rpc target chainid ticker and nickname

* use network nickname

* add isETH

* use of ticker

* move settings component to settings

* basic networks settings

* basic network settings

* add and edit forms

* adding custom rpc from network settings

* add block explorer url

* handle action anabled

* validate chainid

* doc and locales
Q

* drawer view in blockexplorer

* handle block explorer from tx detauls

* handle tx unit with ticker

* configure native currency

* if no conversion rate shpiw 0

* handle send from drawer

* handle render from wei

* handle eth input

* action keys

* update snapshots

* create snapshots

* more locales

* conditional rpc rendering in networks sett

* network icon top

* ticker to uppercase

* android ui

* small fixes

* more android

* getticker getblockexoplorer

* parse url name

* bump gaba

* attempt 1 (#665)

* fix approval screen (#662)

* enable 64 bits builds android (#667)

* Bugfix: currency rate config (#666)

* configure native and current currency on engine init

* from copntropller init

* bump gaba

* destructure CurrencyRateController

* Bugfix: some ui fixes (#668)

* tabs thumbnail website icon

* copllectible contract title center

* align onboarding wizard step 5

* align receive button from asset for android

* snapshots

* dont import from rn gesture handler (#669)

* Bugfix: close dropdowns on scan qr (#671)

* close dropdowns

* snapshots

* swipe to dismiss notifications (#670)

* swipe to dismiss notifications

* exact match version

* fix tap and opacity

* configure native and current currency on engine init

* from copntropller init

* bump gaba

* destructure CurrencyRateController

* Transaction errors (#550)

* wip: showing plain transaction error on screen alert

* handle result promise

* remove listener in approval

* drop package-lock

* comments

* Add zxcvbn for password strength estimation (#555)

* add zxcvbn

* use zxcvbn for password estimations

* add comments

* update snapshot

* navar title numberoflines 1 (#557)

* Reduce instances of cached contract addresses (#547)

Reduce instances of cached contract addresses

* poll balances when tx happens (#562)

* Fix custom gas price (#566)

* fix wrong custom gas value

* fix calculation

* fix comments

* Feature: implement method registry (#571)

* add handlemethoddata gaba support

* update action keys methods

* update tests

* in tx review if method data unknown default to unknown method

* bump gaba

* Feature: EIP747 watchAsset (#576)

* watchasset erc20 basic support

* render watchasset modal

* handle watchasset call

* handle watchasset rejection

* handle watched asset images

* missing strings

* snapshots

* bump gaba

* fix styles

* snapshots

* styles update

* pin dep

* install

* Improvement: Transaction Edit (#579)

* close dropdown if press outside

* snapshots

* missing doc

* renaming

* Fix asset removal (#582)

* fix asset removal

* clean up

* fix typo

* bump gaba

* update package-lock

* Fix missing balances (#583)

* fix missing balances

* Update index.js

* Update currency rate too

* dont poll tokens

* Remove ref

* bump gaba

* remember biometrics preference (#584)

* Feature: token deeplinks support (#588)

* handling data through deeplink

* handle chainId

* handle token value correctly

* use contract metadata to get token info is in there

* showing alert while changing network

* don't validate toen that user doesn't have

* validate amount token to send if user doesn't have it in state

* move messages to locales

* fix getbalanceof

* handle state token

* fix typo

* update locale

* locales

* feature: update GABA to 1.0.0-beta.71 (#590)

* Two step  push notification prompt (#589)

* two step notification prompt

* clean up

* fix typo

* Update deps (#591)

* update react-native-push-notification

* upgrade react-native to v0.59.4

* Feature: Warning when send to known asset (#593)

* warning when user is sending eth or assets to known asset contract

* snapshots

* check contract map only on mainnet

* test

* Bugfix: remove and ignore assets only where is necessary (#594)

* remove and ignore assets only where is necessary

* bump gaba

* Feature: Choose IPFS gateway (#592)

* use of ipfsgateway from GABA

* handle ipfs gateway selection

* snapshots

* snapshots

* reorder ipfs gateways list

* only show available ipfs gateways

* snapshots

* bump gaba

* handle current gateway down

* snapshots

* Improvement: consolidate send and approval screens (#596)

* consolidate send screen

* consolidate approval screen

* tx mode from navigation

* fix renderable value being undefined when edit approval

* snapshots

* Remember recent addresses (#597)

* kinda works

* keyboard wizardry working

* fix eth input

* bump detox (#599)

* Fix account label wallet (#600)

* bump detox

* fix default value

* feature: add 1102 convenience methods (#602)

* Improvement: update corresponding balances (#601)

* existing contact bugfix

* poll only when necessary

* recent address bugfix and adding asset type in approval

* update left button navbar when tx fails

* avoid checking for asset address for undefined

* Feature: collectibles api key (#603)

* add opensea key from env

* bump gaba

* change const name

* Improvement: shareable SimpleWebView (#604)

* make shareable simple web view

* test

* check for navigation

* update ios

* Animations on App launch & resume (#606)

* lottie working

* added fadeIn / out effect

* finally fix crash in debug mode

* added fadeIn to other views

* update unit tests

* fix lock screen

* adjust timing

* more timing stuff

* fix timing stuff

* use optimized bounce animation

* fix for android

* update snapshots

* use exact versions

* bump version to 0.1.7 (#608)

* update gem lockfile (#612)

* use latest xcode image (#614)

* unlink libRCTGeolocation (#616)

* Bugfix: currency code & values with less than 5 precision decimals (#615)

* remove usd dollar symbol

* render low values

* avoid crashing app when hot reloading

* avoid rendering when no value

* rollback fix

* tests

* comment

* update animation (#619)

* update animation

* update snapshots

* Bugfix: standardize colors (#618)

* reds

* blue

* greays and primaryfox

* greens

* yellow

* orange

* random colors

* snapshots

* update colords

* snapshots

* Revert "update animation (#619)" (#620)

This reverts commit 884a20f.

* Feature: switch primary currency (#624)

* select primary currency

* wip number methods

* send ETH withprimary currency fiat

* fiatNumberToTokenMinimalUnit

* tokens working

* avoid exponential and render input

* ethinput doc

* handle value from ethinput

* fix fill max when fiat as primary currency

* clean up of values

* clean render input

* clean renderAsset

* render tokens according to primary currency

* processreadablevalue and fill max

* balances and secondary balances

* snapshots

* small changes

* pick component

* snapshots

* handle periodic numbers

* comments

* Feature: onboarding wizard (#607)

* onboarding wizard component

* rendering on top of stack"

* steps and close tooltips

* fake navigator

* indicator style

* hardcoded step 1 WIP

* step 1 done

* step 2 done

* bullet progress bar

* step 4

* use redux to navigate through onboarding

* step 5

* steps 6 and 7

* got it

* rename tooltip to coachmark

* delete unused file

* transparent styled button

* update step3 to change account label

* skip tutorial button

* handle all onboarding state from redux

* progress bar from array

* doc

* locales

* snapshots

* passing content and onboarding styles

* reorder texts

* update spanish

* render methods

* render onboarding wizard only when first time in app

* IOS styles

* android styles

* snapshots

* browser first

* snapshots

* label padding

* minor comments

* check onboarding on create / import wallet

* sync from extension success

* sync from extension success

* add to entry and login

* snapshots

* feature: allow transactions to be cancelled (#622)

* Improvement: assets detection (#627)

* use collectible contract if image collectible is empty

* bump gaba

* Feature: terms and conditions (#631)

* terms and conditions compoenent

* import from seed

* webview to stack

* locales

* snapshots

* rm unused state

* Feature: Tabs (#623)

* good progress on tabs UI

* tabs "kinda working"

* fix tab selection

* snapshots

* refactor into components

* more refactor

* animations FTW

* adjust values

* fix tests

* fix android UI

* fix bugs

* good progress on multi-webview approach

* working on android and ios

* fix a bunch of bugs

* fix thumbnails

* fix tests

* refactor folder structure

* improve snapshot reliability

* fix tab remounted issue

* clean up

* fix back button ios

* take screenshot before showing tabs

* show real tab count

* bugfixzzz

* code review comments

* dynamic calculation for scrolling

* Feature: opt-in metrics (#632)

* WIP

* optin metrics screen full structure working

* optin screen

* create wallet flow

* entry flow

* import from seed

* sync with extension flow

* docs

* basic logger

* metametrics settings

* navbar

* logoin flow

* snapshots AND ICONS

* update no thanks

* navbar doc

* navbar colors and comment/;

* restore action view

* scrollable optin

* snapshots

* Improvement: gas limit fallback (#633)

* gas limit estimation fallback

* log

* Bugfix: asset overview balance (#635)

* render value on corresponding network

* handle txs loader when switching networks

* snapshots

* svoid balance of undefined

* Bugfix: phishing modal (#637)

* fix ios biometrics permission prompt (#634)

* Feature: import from seed password strength (#639)

* add password strength to import from seed

* snapshots

* padding and jump to password

* Bugfix: collectibles original image (#642)

* bump gaba

* add collectible address

* bump gaba and audit

* Feature: payment request (#641)

* modal payment request

* add qr address modal

* basic stricture done

* rename

* select asset payment request

* basic amount input

* handle payment request navigation

* handle amount

* handle primary currency

* handle primary currency switch

* get crypto amount

* divide primary currency methods

* add buttons

* generate link

* success UI

* better ui

* share and copy to clipboard

* show and close qer modal

* consolidate ui and shgow user tokens

* payment request flow from asset

* handle network assets and link

* handle empty search and empty tokens

* handle not conversion rate

* handle fiat primary currency with no conversion nor exchange rate

* handle decimal places

* consolidate primary currency methods

* fix condition

* docs

* more docs

* qr codes update

* locales

* onbuy coming soon

* fix android icions

* update icons

* snapshots

* on submit next

* handle payment request from qrscanner

* update receive icon

* snapshots

* update qr codes

* update qr and android

* android

* comments

* Swap cent for bounties (#626)

* Swap cent for bounties

* Fix typo

* Fix payment request icon (#645)

* fix icon

* update snapshots

* Feature: WalletConnect support (#643)

* working

* show session prompt

* support for multiple connectors

* persisting sessions and list

* update snapshots

* clean up

* clean-up

* Update WalletConnect.js

* Update animation (#646)

* update animation

* update snapshots

* fix and update assets

* adjust values

* update snapshots

* Bugfix: fiat deeplinks (#648)

* fix button info type color

* fix bug

* drop package

* make overlay tappable on connect modal (#650)

* make overlay tappable on connect modal

* update snapshot

* Bugfix: websites title and icon (#651)

* if on title query for title when adding bookmark

* fix website icon state

* delete didmount

* snapshots

* android navbar

* android navbar

* browser scripts

* Bugfix: android icon (#653)

* downgrade rn vector icons

* copy address from public address

* snapshots

* drop fabric

* space

* Feature: local analytics (#656)

* introduce analytics

* analytics opts

* introduce tracking methods

* track onboarding events

* track navigation events

* common but navigation swipe

* browser view

* dapp view

* wallet view

* rm settings logger

* tramsaction confirm and approval screens

* tramsaction confirm and cancel actions

* transactions signatureS

* transactions signatures doc

* switch accounts

* track login

* track connect

* DRY

* track settings

* snapshots

* id dev log

* remove async storage optin from settings

* drop package-lock

* runafterinteractions for analytics in didmount

* interactionmanager changes

* move tracking to end in send

* analytics

* move to end

* Updated tabs and browser navigation (#658)

* updated tabs and browser navigation

* fix android stuff

* update snapshots

* update snapshots

* Delete comment

* Update index.js

* Update Sync instructions (#660)

* update eng instructions

* update es instructions

* Feature: advanced custom rpc (#661)

* add rpc target chainid ticker and nickname

* use network nickname

* add isETH

* use of ticker

* move settings component to settings

* basic networks settings

* basic network settings

* add and edit forms

* adding custom rpc from network settings

* add block explorer url

* handle action anabled

* validate chainid

* doc and locales
Q

* drawer view in blockexplorer

* handle block explorer from tx detauls

* handle tx unit with ticker

* configure native currency

* if no conversion rate shpiw 0

* handle send from drawer

* handle render from wei

* handle eth input

* action keys

* update snapshots

* create snapshots

* more locales

* conditional rpc rendering in networks sett

* network icon top

* ticker to uppercase

* android ui

* small fixes

* more android

* getticker getblockexoplorer

* parse url name

* bump gaba

* attempt 1 (#665)

* fix approval screen (#662)

* enable 64 bits builds android (#667)

* Bugfix: currency rate config (#666)

* configure native and current currency on engine init

* from copntropller init

* bump gaba

* destructure CurrencyRateController

* Bugfix: some ui fixes (#668)

* tabs thumbnail website icon

* copllectible contract title center

* align onboarding wizard step 5

* align receive button from asset for android

* snapshots

* dont import from rn gesture handler (#669)

* Bugfix: close dropdowns on scan qr (#671)

* close dropdowns

* snapshots

* swipe to dismiss notifications (#670)

* swipe to dismiss notifications

* exact match version

* fix tap and opacity

<!--
Please submit this PR as a draft initially.
Do not mark it as "Ready for review" until the template has been
completely filled out, and PR status checks have passed at least once.
-->

## **Description**

<!--
Write a short description of the changes included in this pull request,
also include relevant motivation and context. Have in mind the following
questions:
1. What is the reason for the change?
2. What is the improvement/solution?
-->

This PR implements
[Worklets](https://github.com/margelo/react-native-worklets-core).
Worklets are small JavaScript functions that can be executed on a
separate JavaScript Thread so they don't clog the main JS Thread.
Perfect for heavy computations and processing.



## **Screenshots/Recordings**

<!-- If applicable, add screenshots and/or recordings to visualize the
before and after of your change. -->

### **Before**

<!-- [screenshots/recordings] -->


https://github.com/user-attachments/assets/ba3be2b7-71b8-4840-8a22-5407fa54a088

### **After**

<!-- [screenshots/recordings] -->


https://github.com/user-attachments/assets/500036ce-252d-48d9-8148-4672618567bf

## **How to use RN Worklets (Threads)**
# runAsync

Purpose: runAsync is used to execute code on a different thread without
blocking the main JS thread.

When to use: Use it to offload functions to a background thread.

Example:

```
import { Worklets } from 'react-native-worklets-core';
...
const fibonacci = (num: number): number => {
  'worklet'
  if (num <= 1) return num;
  let prev = 0, curr = 1;
  for (let i = 2; i <= num; i++) {
    let next = prev + curr;
    prev = curr;
    curr = next;
  }
  return curr;
}

const context = Worklets.defaultContext
const result = await context.runAsync(() => {
  'worklet'
  return fibonacci(50)
})
console.log(`Fibonacci of 50 is ${result}`)
```

# runOnJS
Purpose: runOnJS is used to call a JavaScript function from within a
worklet. Since worklets run on a separate thread, they cannot directly
call JavaScript functions. runOnJS bridges this gap by allowing you to
invoke JavaScript functions on the JavaScript thread.

When to use: Use it when you need to communicate from the worklet thread
back to the JavaScript thread.

Example:
```
import { runOnJS } from 'react-native-worklets-core';
...
const [age, setAge] = useState(30)

function something() {
  'worklet'
  Worklets.runOnJS(() => setAge(50))
}
```

# useWorklet

Purpose: useWorklet is a hook that allows you to define a worklet
function directly within your React component. It ensures that the
function is properly marked as a worklet and can run on the worklet
thread.

When to use: Use this hook when you need to define a function that will
execute on the worklet thread.

Example:
```
import { useWorklet } from 'react-native-worklets-core';

function MyComponent() {
  const myWorklet = useWorklet(() => {
    'worklet';
    console.log('This is running on the worklet thread');
  }, []);

  return (
    <Button title="Run Worklet" onPress={() => myWorklet()} />
  );
}
```

# useRunOnJS
Purpose: useRunOnJS is a hook that allows you to define a JavaScript
function that can be safely called from a worklet. It ensures that the
function is properly wrapped to run on the JavaScript thread when
invoked from the worklet thread.

When to use: Use this hook when you need to call a JavaScript function
from a worklet.

```
import { useRunOnJS } from 'react-native-worklets-core';

function App() {
  const sayHello = useRunOnJS(() => {
    console.log("hello from JS!")
  }, [])

  const worklet = useWorklet('default', () => {
    'worklet'
    console.log("hello from worklet!")
    sayHello()
  }, [sayHello])

  return (
    <Button title="Run Worklet" onPress={() => worklet()} />
  );
}

```

# useSharedValue
Purpose:
useSharedValue is a hook that creates a SharedValue instance, which can
be read from and written to by both the JavaScript thread and the
worklet thread simultaneously.

For arrays and objects, useSharedValue creates a C++-based proxy
implementation, ensuring that all read and write operations on these
data structures are thread-safe.

When to use:
Use useSharedValue when you need to share state between the JavaScript
thread and the worklet thread.

Example:
```
function App() {
  const something = useSharedValue(5)
  const worklet = useWorklet('default', () => {
    'worklet'
    something.value = Math.random()
  }, [something])
}
```

# Separate Threads/Contexts (Worklets.createContext)
Purpose:
Worklets.createContext is a method that allows you to create a separate
thread (context) for running worklets.

Each thread created with createContext operates in isolation, ensuring
that tasks in one thread do not interfere with tasks in another.

When to use:
Use Worklets.createContext when you need to offload heavy computations
or background tasks to multiple separate threads.

```
const context1 = Worklets.createContext('my-new-thread-1')
const context2 = Worklets.createContext('my-new-thread-2')
context1.runAsync(() => {
  'worklet'
  console.log("Hello from context #1!")
  context2.runAsync(() => {
    'worklet'
    console.log("Hello from context #2!")
  })
})
```


# Worklet Examples

WorkletExampleComponent.tsx
```
import React, { useState } from 'react';
import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
import { useRunOnJS, useSharedValue, useWorklet } from 'react-native-worklets-core';

const WorkletExampleComponent = () => {

    const sharedValue = useSharedValue(0);

    const [result, setResult] = useState(0);

    const setResultFromWorklet = useRunOnJS(() => {
        console.log("Calling main JS from worklet!")
        setResult(sharedValue.value)
    }, [])

    const heavyComputationWorklet = useWorklet('default', () => {
        'worklet'
        console.log("Calling worklet!")
        let result = 0;
        for (let i = 0; i < 10000000; i++) {
            result += Math.random();
        }
        sharedValue.value += result;
        setResultFromWorklet()
    }, [sharedValue, setResultFromWorklet])

    const mainJSFunction = () => {
        console.log("hello from main JS function!", sharedValue.value)
        heavyComputationWorklet()
    }

    return (
        <View style={styles.container}>
            <Text style={styles.title}>Worklet Hooks Example</Text>

            <View style={styles.infoBox}>

                <TouchableOpacity style={styles.tertiaryButton} onPress={mainJSFunction}>
                    <Text style={styles.buttonText}>Heavy Computation</Text>
                </TouchableOpacity>
            </View>

            <View style={styles.infoBox}>
                <Text style={styles.messageText}>Result: {result}</Text>
            </View>

            <View style={styles.descriptionBox}>
                <Text style={styles.descriptionText}>
                    This component demonstrates:
                    {'\n'}• useSharedValue: Shared counter between threads
                    {'\n'}• useWorklet: Functions running on worklet thread
                    {'\n'}• useRunOnJS: Safe JS calls from worklets
                </Text>
            </View>
        </View>
    );
};

const styles = StyleSheet.create({
    container: {
        padding: 16,
        backgroundColor: '#fff',
    },
    title: {
        fontSize: 24,
        fontWeight: 'bold',
        textAlign: 'center',
        marginBottom: 16,
    },
    infoBox: {
        marginBottom: 24,
        padding: 16,
        backgroundColor: '#f5f5f5',
        borderRadius: 8,
    },
    counterText: {
        fontSize: 16,
        fontWeight: '600',
        marginBottom: 8,
    },
    messageText: {
        fontSize: 14,
        color: '#666',
    },
    buttonContainer: {
        gap: 12,
    },
    primaryButton: {
        backgroundColor: '#007AFF',
        padding: 16,
        borderRadius: 8,
        alignItems: 'center',
    },
    secondaryButton: {
        backgroundColor: '#34C759',
        padding: 16,
        borderRadius: 8,
        alignItems: 'center',
    },
    tertiaryButton: {
        backgroundColor: '#FF9500',
        padding: 16,
        borderRadius: 8,
        alignItems: 'center',
    },
    buttonText: {
        color: '#fff',
        fontSize: 16,
        fontWeight: '600',
    },
    descriptionBox: {
        padding: 16,
        backgroundColor: '#f0f0f0',
        borderRadius: 8,
    },
    descriptionText: {
        fontSize: 12,
        color: '#666',
        lineHeight: 18,
    },
});

export default WorkletExampleComponent;
```

WorkletExampleFunctions.ts
```
import { Worklets } from 'react-native-worklets-core';

// Example 1: Heavy computation using runAsync
const fibonacci = (num: number): number => {
  'worklet';
  if (num <= 1) return num;
  let prev = 0, curr = 1;
  for (let i = 2; i <= num; i++) {
    let next = prev + curr;
    prev = curr;
    curr = next;
  }
  return curr;
};

export const calculateFibonacci = async (num: number): Promise<number> => {
  const context = Worklets.defaultContext;
  const result = await context.runAsync(() => {
    'worklet';
    return fibonacci(num);
  });
  return result;
};

// Example 2: Array processing on worklet thread
export const processLargeArray = async (data: number[]): Promise<number[]> => {
  const context = Worklets.defaultContext;
  
  return await context.runAsync(() => {
    'worklet';
    // Heavy array processing that would block the UI thread
    return data
      .map(x => x * 2)
      .filter(x => x > 10)
      .map(x => Math.sqrt(x))
      .sort((a, b) => b - a);
  });
};

// Example 3: Using separate contexts for parallel processing
export const parallelProcessing = async (
  data1: number[],
  data2: number[]
): Promise<{result1: number, result2: number}> => {
  const context1 = Worklets.createContext('worker-1');
  const context2 = Worklets.createContext('worker-2');
  
  // Process both arrays in parallel on different threads
  const [result1, result2] = await Promise.all([
    context1.runAsync(() => {
      'worklet';
      console.log('Processing on worker-1');
      return data1.reduce((sum, val) => sum + Math.pow(val, 2), 0);
    }),
    context2.runAsync(() => {
      'worklet';
      console.log('Processing on worker-2');
      return data2.reduce((sum, val) => sum + Math.pow(val, 3), 0);
    })
  ]);
  
  return { result1, result2 };
}; 
```

## **Pre-merge author checklist**

- [x] I’ve followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask Mobile
Coding
Standards](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/CODING_GUIDELINES.md).
- [x] I've completed the PR template to the best of my ability
- [x] I’ve included tests if applicable
- [x] I’ve documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [x] I’ve applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/LABELING_GUIDELINES.md)).
Not required for external contributors.

## **Pre-merge reviewer checklist**

- [x] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [x] I confirm that this PR addresses all acceptance criteria described
in the ticket it closes and includes the necessary testing evidence such
as recordings and or screenshots.

---------

Co-authored-by: Cal Leung <cal.leung@consensys.net>