{"id":19610835,"url":"https://github.com/onflow/frw-extension","last_synced_at":"2025-05-13T02:34:03.557Z","repository":{"id":204004970,"uuid":"692942829","full_name":"onflow/FRW-Extension","owner":"onflow","description":"Flow Reference Wallet - Chrome Extension Client","archived":false,"fork":false,"pushed_at":"2025-05-09T04:12:50.000Z","size":28912,"stargazers_count":4,"open_issues_count":68,"forks_count":8,"subscribers_count":14,"default_branch":"dev","last_synced_at":"2025-05-09T04:31:48.796Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://chromewebstore.google.com/detail/flow-wallet/hpclkefagolihohboafpheddmmgdffjm","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/onflow.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":".github/CODEOWNERS","security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2023-09-18T02:45:31.000Z","updated_at":"2025-05-07T12:30:33.000Z","dependencies_parsed_at":null,"dependency_job_id":"45e4a0ea-a39c-4993-bbcc-97343c5eaf5e","html_url":"https://github.com/onflow/FRW-Extension","commit_stats":null,"previous_names":["outblock/frw-extension","onflow/frw-extension"],"tags_count":27,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/onflow%2FFRW-Extension","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/onflow%2FFRW-Extension/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/onflow%2FFRW-Extension/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/onflow%2FFRW-Extension/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/onflow","download_url":"https://codeload.github.com/onflow/FRW-Extension/tar.gz/refs/heads/dev","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253860143,"owners_count":21975220,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-11T10:33:58.841Z","updated_at":"2025-05-13T02:34:03.535Z","avatar_url":"https://github.com/onflow.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"## Contribution\n\nIf you'd like to contribute to the extension, you'll need to install Node.js, pnpm, and get access to the development environment.\n\n### Install Node \u0026 Dependencies\n\n1. Install Node.js version v22.11 or later using a [package manager](https://nodejs.org/en/download/package-manager)\n2. Install pnpm `corepack enable pnpm`\n3. Run `pnpm i` to install dependencies\n\nMac / Linux\n\n```\n# install nvm\ncurl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.1/install.sh | bash\n# Install Node.js version v22.11 or later\nnvm install 22\n\n# Use the version of Node.js specifcied in .nvmrc\nnvm use 22\n# install pnpm\ncorepack enable pnpm\n\n# checkout dev branch\ngit checkout dev\n\n# install dependencies\npnpm i\n```\n\nWindows\n\n```\n# installs fnm (Fast Node Manager)\nwinget install Schniz.fnm\n\n# configure fnm environment\nfnm env --use-on-cd | Out-String | Invoke-Expression\n\n# download and install Node.js\nfnm use --install-if-missing 22\n\n# install pnpm\ncorepack enable pnpm\n\n# install dependencies\npnpm i\n```\n\n### Configure Environment Variables\n\nEnvironment variables are needed to interact with certain services. There are two versions of the .env file: one for development, one for release.\n\n- .env.dev\n- .env.prd\n\nYou should only ever need the development version of the .env file as the release version is built using GitHub Actions. The best thing to do is get a copy of the .env.dev file from a developer and add it to the project but **be sure to remove the `DEV_PASSWORD` variable from the file before sharing it.** Never commit the .env.dev file to the repository.\n\nThe .env.example file includes all the variables that are needed for the extension to work.\n\n### Building for Development\n\n- (Optional) Run `pnpm react-devtools` to open the React DevTools in your browser. If this is running when you start the development build, the extension will include the React DevTools code. The code is downloaded statically and built into the extension as extensions cannot load external scripts.\n- Run `pnpm build:dev` on Mac / Linux, `pnpm winBuild:dev` on Windows. This will build the extension with file watching and console logging.\n- Open Chrome, go to `chrome://extensions`, enable \"Developer mode\", click \"Load unpacked\", and select the `dist` folder.\n\n### Wallets\n\nDuring development, you'll often be unlocking the wallet. As Chrome extensions cannot use many password managers, we have included a way for developers to set a default password for wallets. This password will be pre-filled in the wallet unlock popup when in development mode.\n\nIn .env.dev, set the `DEV_PASSWORD` variable to the password you want to use. This can be any password you want but it must pass the password policy. DO NOT SHARE THIS PASSWORD WITH ANYONE.\n\nYou can then create a wallet or import an existing wallet to start using the extension. If you go to the settings page in the extension, you can turn on Developer Mode which will allow you to switch between mainnet and testnet chains.\n\n### Testing \u0026 development\n\n- `pnpm test` will run the tests in watch mode.\n- As you code, VS Code or Cursor will automatically lint and format your code when you save files.\n- When you check in code using git, the linter will run to check and format your code.\n\n_NOTE: We are working to create a test environment for the extension. This will allow you to test the with emulated transactions and wallets._\n\n### Folder Structure\n\n- `src/` contains the source code for the extension.\n- `_raw/` contains the raw files for the extension.\n- `dist/` contains the built extension.\n- `_locales/` contains the locale files for the extension.\n- `build/` contains the webpack build files for the extension.\n- `__tests__/` contains tests\n\nThe source code is written in TypeScript and uses React on the UI. We have separated the code into the following folders:\n\n- `src/ui/` contains the UI code for the extension popup.\n- `src/background/` contains the background code for the extension service worker.\n- `src/content-script/` contains the content scripts for the extension.\n- `src/shared/` contains the shared utils and types between the different parts of the extension.\n\nThere are lint rules in place to ensure, the background code never includes any UI code, and that the service worker doesn't directly interact with globals such as `window` or `document`.\n\nThe UI communicates with the background service worker using the `chrome.runtime.sendMessage` and `chrome.runtime.onMessage` APIs. There is a WalletController class that handles the communication with the background service worker. This is the main way the UI interacts with the background service worker. The WalletController proxies the wallet methods in the background service worker using messaging to act as controller for the UI.\n\n### Workflow\n\nWe work on the `dev` branch of the repository. Before you start working on the extension, create a branch for the feature you're working on from the `dev` branch. We then have a Github project that co-ordinates features between the iOS, Android, and web extension teams. Please link the issue to the Flow Wallet project and update status as you work on the feature.\n\n1. Always create a new branch from the `dev` branch.\n2. When you're ready to merge your branch into `dev`, create a pull request from your branch to the `dev` branch.\n3. When the pull request is approved, merge it into the `dev` branch.\n4. When you're ready to release a new version of the extension, create a pull request from the `dev` branch to the `master` branch.\n5. When the pull request is approved, merge it into the `master` branch.\n6. When the release is ready to be built, the `master` branch will be built and released to the Chrome Web Store.\n\n### Language\n\nThe extension supports multiple languages. The language files are stored in the `_raw/_locales/` folder. You should put any new strings into these files.\n\n1. Copy `_raw/_locales/en/messages.json` to `_raw/_locales/${localCode}/messages.json` (Find your locale code in [https://en.wikipedia.org/wiki/Language_localisation#Language_tags_and_codes](https://en.wikipedia.org/wiki/Language_localisation#Language_tags_and_codes))\n2. Replace content in `message` property to appropriate locale language\n\nATTENTION: When you create a new key, make sure the key doesen't include space and not duplicated with existing phrase (case insensitive).\n\n## Test Environment Variables\n\nSetup the following environment variables in .env.dev file:\n\n- TEST_PASSWORD: The password for the test wallet\n- TEST_PK_P256: The P256 public key for the test wallet\n- TEST_PK_SECP256K1: The SECP256K1 public key for the test wallet\n\n## Analyzing High Priority Issues\n\nThis repository includes tools to analyze high-priority issues across repositories. To use these tools:\n\n1. Install GitHub CLI if you haven't already:\n\n   ```bash\n   # macOS\n   brew install gh\n\n   # Windows\n   winget install --id GitHub.cli\n\n   ```\n\n2. Login to GitHub CLI with project permissions:\n\n   ```bash\n   pnpm gh:login\n   ```\n\n   Follow the prompts to complete authentication. Make sure to:\n\n   - Choose \"GitHub.com\" for the account\n   - Choose \"HTTPS\" for the protocol\n   - Choose \"Y\" to authenticate Git with your GitHub credentials\n   - Choose \"Login with a web browser\" for authentication method\n\n3. Run the analysis:\n   ```bash\n   pnpm analyze:priority\n   ```\n\nThe analysis will generate several files in the `.github-data` directory:\n\n- `index.html`: Overview of all repositories with high-priority issues\n- For each repository with high-priority issues:\n  - `{repo-name}-bug-heatmap.html`: Interactive visualization of bug hotspots\n  - `{repo-name}-high-priority-report.md`: Detailed markdown report\n  - `{repo-name}-high-priority-changes.json`: Raw data for further analysis\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fonflow%2Ffrw-extension","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fonflow%2Ffrw-extension","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fonflow%2Ffrw-extension/lists"}