https://github.com/onflow/wallet-extension-example

An example and guide showing how to build an FCL-compatible wallet extension on Flow.
https://github.com/onflow/wallet-extension-example

chrome-extension flow-blockchain wallet

Last synced: about 1 month ago
JSON representation

An example and guide showing how to build an FCL-compatible wallet extension on Flow.

• Host: GitHub
• URL: https://github.com/onflow/wallet-extension-example
• Owner: onflow
• License: apache-2.0
• Created: 2022-03-04T02:32:50.000Z (almost 3 years ago)
• Default Branch: master
• Last Pushed: 2022-11-01T18:46:19.000Z (about 2 years ago)
• Last Synced: 2024-04-01T16:13:42.412Z (9 months ago)
• Topics: chrome-extension, flow-blockchain, wallet
• Language: JavaScript
• Homepage:
• Size: 4.23 MB
• Stars: 10
• Watchers: 29
• Forks: 13
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE
  • Codeowners: CODEOWNERS

Awesome Lists containing this project

README

        


  
Flow Chrome Extension Wallet Example

  


    An example and guide showing how to build an FCL-compatible wallet extension on Flow.

    


    Read the docs »

    


    


    What is FCL?

    ·

    Report a Bug

  

  


   This guide and sample is based on a winning FLIP Fest submission from the ZayCodes team.

  


## Getting started

Run all commands from the root directory.

### Install

```shell

npm i

```

### Build the extension

```shell

npm run build --workspace fcl-wallet-extension-demo

```

### Add the extension to Chrome

- In Chrome, navigate to `chrome://extensions`

- Enable the "Developer mode" toggle

- Click on "Load unpacked"

- Select the `packages/extension/build` folder

### Refreshing the extension

If you make changes to the code, rebuild the extension with `npm run dev --workspace fcl-wallet-extension-demo` and then click the refresh icon in the Chrome extensions page.

### Start the harness app

The harness is a barebones web app that allows you to

connect to the extension and send transactions.

```sh

npm run start --workspace fcl-harness

```

Open [http://localhost:3000](http://localhost:3000) to view it in the browser.

---

## Build your own wallet

See the full guide to building an extension on Flow [here](docs/index.md).

- [Overview](docs/index.md#overview)

  - [FCL Fundamentals](docs/index.md#fcl-fundamentals)

    - [Discovery](docs/index.md#discovery)

    - [Service Methods](docs/index.md#service-methods)

    - [Wallet Services](docs/index.md#wallet-services)

  - [Browser & Extension Requirements](docs/index.md#browser---extension-requirements)

  - [Key Scripts](docs/index.md#key-scripts)

- [Implementation](docs/index.md#implementation)

  - [Manifest V3 configurations](docs/index.md#manifest-v3-configurations)

  - [FCL Installation & Configuration](docs/index.md#fcl-installation---configuration)

  - [Harness & Testing](docs/index.md#harness---testing)

  - [FCL Discovery](docs/index.md#fcl-discovery)

  - [Account Creation](docs/index.md#account-creation)

  - [FCL Authentication](docs/index.md#fcl-authentication)

  - [FCL Authorization](docs/index.md#fcl-authorization)

  - [Other Services](docs/index.md#other-services)

  - [Transaction History & Event Indexing](docs/index.md#transaction-history---event-indexing)

  - [NFT Viewing & Metadata](docs/index.md#nft-viewing---metadata)

  - [Other Resources](docs/index.md#other-resources)