In-app Browser

[hieudd]

Overview

In-app Browser is a simple browser with Substrate and EVM Provider and allows DApp interaction like on Mobile via extension. We prepare to create this browser with react-native-browser with some simple UI. From common mobile browsers, We can connect SubWallet Mobile with deep-link.

Concept

User Flow

graph TD
    FMB(From mobile browsers like Chrome/Safari/Firefox...)
    FSWA(From SubWallet App)
    FMB --Deep link--> OSWMB(Open DApp on SubWallet Mobile Browser)
    FSWA --> OSWMB
    OSWMB --> ODA(Open DApp with Injected Substrate/EVM provider)

DApp - WebRunner interaction

sequenceDiagram
    DApp->>+Wallet Provider: Perform method
    Wallet Provider->>+SubWalletMobile: Send request (origin, tabId)
    SubWalletMobile->>+WebRunner: Forward request (origin, tabId)
    WebRunner->>-SubWalletMobile: Response request (origin, tabId)
    SubWalletMobile->>-Wallet Provider: Forward response (origin, tabId)
    Wallet Provider->>-DApp: Async resolve/reject

Stage 1: Research (2022-08-24)

• [x] Interaction flow
• [x] Mobile App Browser
• [x] Deep link
• [x] Test Implementation
  • [x] Simple Mobile App Browser: input address, back, forward, reload...
  • [x] Make sure that interaction like web-runner is ok
  • [x] Test to inject EVM provider with name window.ethereum on Moonbeams app

Stage 2: Basic Implementation (2022-09-10)

• [x] Open application with deep-link
• [x] Inject Substrate Provider
• [x] Inject EVM Provider
• [x] Block Phishing site
• [x] Website Access (in #13)
• [x] Implement browser UI/UX
• [x] Confirmation popups
  • [x] Redux store for confirmation popup
  • [x] Create hook for handle all confirmation types
  • [x] Confirmation base screen
  • [x] Confirmation specify screen
  • [x] Authorizations
  • [x] Import Metadata
  • [x] Sign substrate transaction
  • [x] Send EVM transaction
  • [x] Sign EVM transaction
• [x] WebRunner Issues:
  • [x] Need API (message) to unsubcribe existed handler in webrunner

    Stage 3: Full Implementation

• Deep-link: subwallet:// and link.subwallet.app://
  • [x] Deep link after intalls app
  • Register deep-link with app-store & play store to make sure that link to install the repository (Implement in #106)

• 107

• [x] Advance features for mobile browser
  • [x] Predefined Dapps
  • [x] Bookmark and favorites
  • [x] Multi-tab interactions

[lw-cdm]

• View header
  • Will open search modal if pressing
• View body
  • Overview mode
  • Show all tabs as thumbnails
  • Current tab
  • Home page
    • Show favorite sites
  • Show current website page
• View bottom bar
  • Overview mode
  • Close All button
  • Create new tab button
  • Close: return to current tab mode
  • Current tab
  • Back button: back to the previous site in history of current tab
  • Forward button: forward to the next site in history of current tab
  • Search button: Open Search modal
  • Overview tab button: show the number of all tabs, if press will open Search modal
  • Home button: Open the default site
  • More actions button:
    • Create new tab
    • Reload current tab
    • Open in browser
    • Add to favorite
• Search modal
  • Predefine all known Dapps

[lw-cdm]

• Deep link:
  • Research:
  • What deep link can do for mobile app
  • How to integrate with mobile app
  • Problems:
  • The flow of Deep link
  • Deep link URI Standard
  • When user presses the URI
    • If user install SW app => redirect to the corresponding screen
    • If not => redirect to SW app site on Google Play/Apple Store
    • If possible: after user install the app, continue to redirect to the corresponding screen
  • Most Important: Step to implement deep link
  • Link to not install app
  • Link to existed app
  • Params size?
• Browser:
  • Detail: https://github.com/Koniverse/SubWallet-Mobile/issues/18#issuecomment-1186719644
  • Research:
  • Check the browser in other apps
  • Refer to Metamask mobile app
  • How to make home page
  • Problems:
  • Browser flow
  • Save favorite sites
  • Save tabs state:
    • How many tabs
    • The current activated tab
    • Order of the tabs
    • Current site opens on the tab
  • Most Important: Simple browser with basic features:
  • Input address, back, forward..., store address in redux
• Inject Substrate Provider
• Inject EVM Provider:
  • Research:
  • The dapp connection flow in SW extension.
  • Problem:
  • Dapp connection flow
  • Connect between the browser webview and the webrunner webview
• Most Important:
  • Create interaction with mobile app like web-runner
  • Implement simple interaction
  • Inject Substrate/EVM Provider

[lw-cdm]

• Deep link:
  1. Config for Android / IOS: https://reactnavigation.org/docs/deep-linking/
  2. Setup links with react-navigation: https://reactnavigation.org/docs/configuring-links
  3. To check whether to open the app or going to app store, follow one of the methods below:
     • Do it on server site: link
     • Setup Dynamic Links with firebase:
     • Dynamic Links Installation
     • Dynamic Links Config

[sokol142]

Version test: V0.1.6 (Build 42) Device test: IP 8 Plus (15.5)

Bugs

• [x] Showing incorrect fee of transaction history after the user performs a transfer on the browser Steps:
  1. Open the app
  2. Hit on Browser and visit to Subconnect page (connect.subwallet.app)
  3. On Subconnect page, perform send transaction successfully
  4. Close page
  5. Go to the transaction history of the sender account in step 3 then observe transaction history displayed

Actual: Showing incorrect fee of transaction history

• [x] Not scroll to the input field when signing the transaction
• [x] Not show request permission popup when clicking on "Request permission" if the user select Cancel connection

Steps:

1. Open the app
2. Hit on Browser and visit to Subconnect page (connect.subwallet.app)
3. Select SubWallet (EVM) to connect then hit on Cancel action on popup connect
4. Stand on Subconnect page, click on "Request permission" button

Actual: Not show request permission popup Expected: Show request permission popup

[sokol142]

Version test: v0.1.7 (55) Device test: IP 8 Plus (15.5)

Please check issues:

• [x] Crash app when user approve transaction from Moonbeam app (https://apps.moonbeam.network)
• [x] Can not see the buttons on Approve transaction screen while the keyboard is showing

[sokol142]

Version test: v0.1.7 (57) Device test: IP 8 Plus (15.5)

Please check issue:

• [x] Do not display information on in-app browser

Steps:

1. Open the app
2. Go to Browser tab then visit to "connect.subwallet.app"
3. Touch on the multiple-tabs button then open "connect.subwallet.app" again
4. Touch on X icon button to back to home
5. Touch on multiple-tabs button again
6. View the above 2 tabs in turn

Actual: 1/2 page is blank page

[sokol142]

Version test: v0.1.7 (62) Device test: IP 8 Plus (15.5)

Check issues:

• [x] Open the empty dapp in case the user visits the app via deep-link (subwallet://browser?url=https%3A%2F%2Fconnect.subwallet.app%2F)

Case 1: Have no dapp browser on the Manage dApp Access screen yet Steps:

1. From Chrome/Safari/another app, touch on the deep-link to visit dapp on the SubWallet app
2. Observe the SubWallet app

Actual: Open the empty dapp Expected: Open the dapp to connect

Case 2: Have no account yet Steps:

1. From Chrome/Safari/another app, touch on the deep-link to visit dapp on the SubWallet app
2. Observe the SubWallet app

Actual: Open the empty dapp Expected: Open the Getting Started screen

• [x] Showing logo of the dApp incorrect in case of user visits dapp via deep-link

Steps:

1. Open the SubWallet app
2. Go to Browser tab then connected to Polkadot js apps successfully
3. Back to Homepage
4. Visit to the SubConnect page via deep-link (subwallet://browser?url=https%3A%2F%2Fconnect.subwallet.app%2F)
5. Touch on Multi-tabs button then obser logo of the dapp displayed

Actual: Showing incorrect logo (SubConnect page showing "Polkadot js app" site logo) https://user-images.githubusercontent.com/102292476/193496099-181b6ccd-3787-4646-81b1-5493ac2eaa0c.MP4

Expected: Show correct logo

• [x] The confirmation popup overwrites the enter PIN screen

• Expected: Enter PIN successfully, then show confirmation popup

[sokol142]

Version test: v0.1.7 (63)

Validation passed