onflow / fcl-discovery Goto Github PK
View Code? Open in Web Editor NEWHome Page: https://fcl-discovery.onflow.org
License: Apache License 2.0
Home Page: https://fcl-discovery.onflow.org
License: Apache License 2.0
Show active pairings via a label like 'installed' and sort to the top if paired for any WC wallet.
Currently, there is no mechanism for error monitoring. Need to add one.
Update missing docs like license, contributing, etc.
Wallets who add themselves to Discovery may also eventually be discoverable through different plugins. We currently filter out duplicates since we needed a way to handle an extension being sent from FCL and an extension having added themselves to show as uninstalled. Service and metadata fields are also starting to become bloated since install links are required for different platforms. It's time to rethink how this is structured.
Problem:
The current design of the discovery page is not very appealing to developers and often doesn't fit well design-wise into dapps. We should also take advantage of local storage to offer a more appealing user experience, especially for new users to crypto who may not understand what a wallet is.
Solution:
I mocked up a design that aims to do the following:
Note:
When developing locally with emulator and using the Discovery API, you cannot test the UI you are building around authentication because you need to point directly at the dev wallet running in the emulator instead of services returned from testnet and mainnet.
Create an endpoint for emulator and return "Dev Wallet" as a service if emulator services are requested. This service's endpoint will point to the dev wallet localhost url running in the emulator.
https://fcl-discovery.onflow.org/local/authn
https://fcl-discovery.onflow.org/api/local/authn
There should also be a way to override the port if dev wallet is running on a different port than that setup by the emulator. To do this, let's add a query param to the url for port:
https://fcl-discovery.onflow.org/local/authn?port=8702
https://fcl-discovery.onflow.org/api/local/authn?port=8702
Developer message on how to configure is not showing on testnet
To support bug onflow/fcl-js#936, we need to use the new WalletUtils config passed. Also, would be good to switch to JSON post with body instead of query params.
localStorage is not available in incognito and discovery should fallback to sessionStorage in order to avoid this
Like with other Discovery features, we need to know at which version FCL will begin sending plugin services. We need to:
We need installed extensions to show in any environment because you may have an extension not listed in Discovery services you want to use, you are developing with a wallet that has a network switcher, or you are developing a wallet locally you want to test. If you have say an extension that supports testnet and mainnet in your browser, but does not work with emulator it will still show in Discovery because you have chosen as a user to install it. This is confusing to people who may not know this or have forgotten extensions they have and see them listed when running locally but they don't work.
There are now a lot services that are listed in Discovery and more are coming. There is currently a scroll for the iFrame/rpc, but we need a more versatile and better looking solution across other methods like pop/rpc and tab/rpc for when a large number of services are listed. We need a UI update to address this.
This also needs to address the issue of layout for when a service may have multiple sub-services (e.g. WalletConnect has different pairings for each wallet).
Upgrade FCL to v1
This was recently released, and it needs to be surfaced in discovery.
Documentation required on how to add a new wallet to be included in Discovery.
Should note to:
Currently, you have to manually run prettier to fix code. This should run automatically.
Currently, anyone can inject an extension wit FCL and have it show in Discovery. We want to only show wallets that have been merged into the Discovery services list to show in Discovery.
After getting the extensions from FCL, filter out any extensions that are listed with platform: "web/extension"
unless that service object is included in the Discovery service list.
The following guides do no mention setting the authn.include in order to get dapper wallet to work with standard discovery. This leads to people creating a lot of code for things that could just work out of of the box. Please update
If an app points directly to the root of Discovery they may be confused that it's not working. It's not clear that they are pointing to the wrong path.
Add route options for iFrame and put more information on the page.
Starting in FCL 1.0, extensions will now come from client config. See this PR
Setup CI for repo
In order to track analytics of who is using FCL-Discovery, and which applications they're using it with, we should enable Google Analytics support.
We should track:
Right now an extension has to be installed to show in Discovery. Let's:
client.config.supportedStrategies
Images are fine for the UI version of the Discovery, but when returned on the API relative links won't work.
Discovery service pipes have some updates that we should test with older versions of FCL
In order to support the following view:
We need to collect wallet information from available Flow wallets native to iOS and Android. They should provide the same information as they do on WC such as universal, deep links, etc. and we can serve this via the API.
The API should filter based on user-agent such that a native dapp can show just Flow WC wallets and nothing else OR if they don't have WC configured, the safari browser can be used instead.
The app changes based on FCL version and configuration. Need to figure out a more thorough test plan around changing configuration and version.
Discovery is checking for version in config, except that's only available on the next release.
Solution:
fclVersion
if it doesn't exist on config.clientPairings are known client side and need to be sent to Discovery and displayed as a selectable service
Version check with semver isn't working on alpha
Upgrade to:
Next 12
React 18
Setup sandboxnet as a network option so that wallets can add themselves to services list if they support it
Currently, routes look like this:
Environment | Example |
---|---|
Mainnet | http://localhost:3002/authn |
Testnet | http://localhost:3002/testnet/authn |
Local | http://localhost:3002/local/authn |
Environment | Example |
---|---|
Mainnet | http://localhost:3002/api/authn |
Testnet | http://localhost:3002/api/testnet/authn |
Local | http://localhost:3002/api/local/authn |
Add mainnet an explicit mainnet path for both API and UI to support if it is specified.
http://localhost:3002/mainnet/authn
http://localhost:3002/api/mainnet/authn
Not all wallets support all functionality an app needs. For a better user experience, apps need the ability to only list wallets as options if they have the said support. This way a user doesn't wind up using a wallet with limited functionality only to find out later they can't complete actions in the application.
Add a property to services called optIn
. This means that when a wallet with limited functionality registers their service they should mark it as an opt-in wallet. We will not return opt-in wallets by default, but if an app wants to show a specific wallet they can explicitly say so in their FCL config by specifying the service account address:
import { config } from "@onflow/fcl"
config({
"accessNode.api": "https://access-testnet.onflow.org",
"discovery.authn.endpoint": "https://fcl-discovery.onflow.org/api/testnet/authn",
"discovery.authn.optIn": ["0x123"]
})
FCL then turns that filter into a query param for the API which we can then filter on. We need to create the filtering functionality from those query params.
If a plugin service has added itself to Discovery, show the service rather than the plugin method. This would work similar to extensions in that any extension will work with Discovery, but if an extension has added itself to the service list then we can show the uninstalled extension as an option as well.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.