Method for realizing dApp browser based on webpage technology

Abstract

The invention discloses a dApp browser implementation method based on a webpage technology, and relates to the technical field of dApp browsers. And the dApp is applied to the Wallet Connect network. According to the dApp browser implementation method based on the webpage technology, multiple dApp can be seamlessly embedded in the same page, the fluency and consistency of user experience are improved, page jumping is reduced, it is ensured that a user conducts uninterrupted operation when switching is conducted between different dApp, and in addition, the user experience is improved. By means of cross-platform compatibility, the scheme can provide consistent experience on a desktop and a mobile device, the adaptation problem between different platforms is solved, developers can rapidly expand or integrate new dApp by loading different dApp URLs, core codes do not need to be modified in a large amount, flexibility and expansibility are greatly improved, and the development cost is reduced. And the operation efficiency and the overall experience of the user are improved.

Description

Technical Field

[0001] The present invention relates to the technical field of dApp browsers, and specifically to a method for implementing a dApp browser based on web page technology. Background Art

[0002] The blockchain dApp browser provides the function of accessing decentralized applications. Users can access decentralized applications directly in the dApp browser. Usually, the dApp browser provides the wallet function. Users can create, import, and manage wallets for asset storage and transfer. At the same time, it supports signing and authorization of transactions to ensure asset security.

[0003] The existing dApp browser technology still faces several major problems. The first is that the dApp wallets are mainly provided in the form of Google Chrome plug-ins. This part requires users to first have a browser client that supports the installation of plug-ins. This is still for devices with personal computers. Secondly, users need browser clients like Google Chrome and Microsoft Edge browser plug-ins to use it, but there are still many browsers that do not support plug-in functions, which to a certain extent cannot meet user needs.

[0004] Therefore, in view of this, the existing structure and deficiencies are studied and improved, and a dApp browser implementation method based on web technology is proposed. Summary of the invention

[0005] In view of the deficiencies in the prior art, the present invention provides a dApp browser implementation method based on web page technology, which solves the problems raised in the above background technology.

[0006] To achieve the above objectives, the present invention is implemented through the following technical solutions: a dApp browser implementation method based on web technology, the dApp browser implementation method based on web technology includes a wallet application; a dApp application and a WalletConnect network; Among them, the wallet application is responsible for user account management, wallet management and connecting to dApp; dApp applications, which are embedded in the wallet through iframe and interact with the wallet; The WalletConnect network, which enables secure cross-domain communication between wallets and dApps; The implementation method of the dApp browser based on web technology is specifically as follows: S1. Access the wallet application: The user visits the wallet application's webpage in a normal browser and chooses to log in to an existing account or create a new account. After a successful login, the user enters the wallet's homepage; S2. Wallet access dApp: The user switches to the dApp tab in the wallet and enters the address of the dApp they want to access. The wallet loads the dApp through an iframe. The dApp initiates a login request through the WalletConnect network. The dApp uses the WalletConnect client library to generate a connection request with a wc connection object. The dApp sends the wc object to the wallet parent window through postMessage. The dApp sends a JSON-formatted message object in postMessage. The wallet parent window listens to the message events of the iframe. When the postMessage containing the WalletConnect request is received, the wallet will pop up a confirmation window to prompt the user to approve or reject. S3. Approve the connection: The user approves the connection request, and the wallet sends the approval result back to the dApp through the WalletConnect network to establish a connection; S4. Connection refused: The user refuses, and the wallet returns the rejection information to the dApp via WalletConnect; S5. Wallet transactions: After WalletConnect is established, dApp initiates a transaction request to the wallet, and the wallet signs the transaction based on the user's operation and returns the result.

[0007] Furthermore, in step S1, the homepage of the wallet is used to display information such as balance and transaction records.

[0008] Furthermore, in step S2, the dApp runs in the embedded iframe.

[0009] Furthermore, in step S2, the wc connection object is the WalletConnect connection object.

[0010] Furthermore, in step S2, the message object content in JSON format includes: type: message type, "login_request".

[0011] Furthermore, the dApp browser implementation method based on web technology also includes the following steps: S6. Mobile device pairing: The user can access the webpage of the wallet application in a common browser on a computer or a mobile device and perform the operations from step S1 to step S5. The wallet application on the computer and the wallet application on the mobile device can exist at the same time, and the wallet application on the computer and the wallet application on the mobile device are paired with each other using the network.

[0012] Furthermore, the dApp browser implementation method based on web technology also includes the following steps: S7, mobile terminal password input: When a user accesses the wallet application on a mobile device and initiates a transaction request to the wallet after establishing WalletConnect, he or she needs to enter the payment transaction password. At this time, the versatility of the mobile device itself can be used to realize multiple password payment methods.

[0013] Furthermore, in step S7, the versatility of the mobile device itself can be used to implement a variety of password payment methods, including using a camera for facial recognition as a payment transaction password, manually entering a payment transaction password using a virtual keyboard, and using fingerprint recognition as a payment transaction password.

[0014] Furthermore, the dApp browser implementation method based on web technology also includes the following steps: S8. Enter password on the computer: When a user conducts a transaction on a computer, the wallet application on the computer is automatically paired with the wallet application on the mobile device through the network. When the password input interface pops up on the computer, the facial recognition interface or fingerprint recognition interface automatically pops up on the mobile device. The user only needs to perform facial recognition or fingerprint recognition on the mobile device to complete the password input on the computer on the mobile device.

[0015] Furthermore, in step S8 and step S6, the pairing process of the wallet application on the computer and the wallet application on the mobile terminal is as follows: Mobile terminals, such as smartphones, are electronic devices that can be carried around. When a user triggers a pop-up transaction interface on the computer and needs to enter a payment password, the wallet application on the mobile terminal uploads its own number on the Internet, and at the same time, the wallet application on the computer terminal searches for its own number on the Internet. When the same number occurs, the wallet application on the mobile terminal and the wallet application on the computer terminal automatically connect to interact.

[0016] The present invention provides a dApp browser implementation method based on web page technology, which has the following beneficial effects: 1. This dApp browser implementation method based on web technology enables multiple dApps to be seamlessly embedded in the same page, improving the fluidity and consistency of the user experience, reducing page jumps, and ensuring uninterrupted operation when users switch between different dApps. In addition, cross-platform compatibility enables this solution to provide a consistent experience on desktop and mobile devices, solving the adaptation problem between different platforms. By loading different dApp URLs, developers can quickly expand or integrate new dApps without making a lot of modifications to the core code, greatly improving flexibility and scalability, and improving user operation efficiency and overall experience.

[0017] 2. This dApp browser implementation method based on web technology pairs and interacts the wallet application on the computer with the wallet application on the mobile terminal through the network. When the user makes a transaction payment on the computer terminal, the wallet application on the mobile terminal can automatically call out the fingerprint recognition window interface or the facial recognition window interface, thereby using the mobile terminal electronic device as an external device of the computer terminal device to more conveniently input the transaction password without the user having to manually input multiple strings of password characters on the computer terminal. BRIEF DESCRIPTION OF THE DRAWINGS

[0018] Figure 1 A schematic diagram of a wallet access dApp process of a dApp browser implementation method based on web page technology of the present invention; Figure 2 This is a schematic diagram of a computer-side wallet transaction payment process for a dApp browser implementation method based on web technology in the present invention. DETAILED DESCRIPTION

[0019] The following embodiments of the present invention are described in further detail in conjunction with the accompanying drawings and examples. The following examples are used to illustrate the present invention, but are not intended to limit the scope of the present invention.

[0020] like Figure 1 As shown, the present invention provides a technical solution: a dApp browser implementation method based on web page technology, the dApp browser implementation method based on web page technology includes a wallet application; a dApp application and a WalletConnect network; Among them, the wallet application is responsible for user account management, wallet management and connecting to dApp; dApp applications, which are embedded in the wallet through iframe and interact with the wallet; The WalletConnect network, which enables secure cross-domain communication between wallets and dApps; The implementation method of the dApp browser based on web technology is specifically as follows: S1. Access the wallet application: The user visits the wallet application's webpage in a normal browser and chooses to log in to an existing account or create a new account. After a successful login, the user enters the wallet's homepage, which is used to display information such as balance and transaction records. S2. Wallet access dApp: The user switches to the dApp tab in the wallet and enters the address of the dApp they want to access. The wallet loads the dApp through the iframe method. The dApp runs in the embedded iframe. The dApp initiates a login request through the WalletConnect network. The dApp uses the WalletConnect client library to generate a connection request and attaches a wc connection object. The wc connection object is the WalletConnect connection object. The dApp sends the wc object to the wallet parent window through postMessage. The dApp sends a JSON-formatted message object in postMessage. The JSON-formatted message object content includes: type: message type, "login_request". The wallet parent window listens to the iframe message event. When receiving the postMessage containing the WalletConnect request, the wallet will pop up a confirmation window to prompt the user to approve or reject. S3. Approve the connection: The user approves the connection request, and the wallet sends the approval result back to the dApp through the WalletConnect network to establish a connection; S4. Connection refused: The user refuses, and the wallet returns the rejection information to the dApp via WalletConnect; S5. Wallet transactions: After WalletConnect is established, dApp initiates a transaction request to the wallet, and the wallet signs the transaction based on the user's operation and returns the result.

[0021] Based on the above description, the present invention enables multiple dApps to be seamlessly embedded in the same page, improving the fluidity and consistency of the user experience, reducing page jumps, and ensuring uninterrupted operation when users switch between different dApps. In addition, cross-platform compatibility enables this solution to provide a consistent experience on desktop and mobile devices, solving the adaptation problem between different platforms. By loading different dApp URLs, developers can quickly expand or integrate new dApps without making a lot of modifications to the core code, greatly improving flexibility and scalability, and improving users' operating efficiency and overall experience.

[0022] like Figure 2As shown, the dApp browser implementation method based on web technology also includes the following steps: S6. Mobile device pairing: The user can access the webpage of the wallet application in a common browser on a computer or mobile device and perform the operations from step S1 to step S5. The wallet application on the computer and the wallet application on the mobile device can exist at the same time, and the wallet application on the computer and the wallet application on the mobile device are paired with each other using the network; The method for implementing a dApp browser based on web technology also includes the following steps: S7, mobile terminal password input: When a user accesses the wallet application on a mobile device and initiates a transaction request to the wallet after establishing WalletConnect, he needs to enter the payment transaction password. At this time, the versatility of the mobile device itself can be used to realize a variety of password payment methods, including using the camera for facial recognition as the payment transaction password, manually entering the payment transaction password using the virtual keyboard, and using fingerprint recognition as the payment transaction password; The method for implementing a dApp browser based on web technology also includes the following steps: S8. Enter password on the computer: Since it is difficult for computers to be equipped with facial recognition cameras and fingerprint recognition structures as commonly used on mobile devices, payment transaction passwords can only be entered manually on computers. Manual password entry is more cumbersome than facial recognition and fingerprint recognition. Therefore, when users conduct transactions on computers, the wallet application on the computer automatically pairs with the wallet application on the mobile terminal through the network. When the password input interface pops up on the computer, the facial recognition interface or fingerprint recognition interface automatically pops up on the mobile device. Users only need to perform facial recognition or fingerprint recognition on the mobile device to complete the password input on the computer on the mobile terminal. In the above steps, the pairing process between the wallet application on the computer and the wallet application on the mobile terminal is as follows: Mobile terminals, such as smartphones, are electronic devices that can be carried around. When a user triggers a pop-up transaction interface on the computer and needs to enter a payment password, the wallet application on the mobile terminal uploads its own number on the Internet, and at the same time, the wallet application on the computer terminal searches for its own number on the Internet. When the same number occurs, the wallet application on the mobile terminal and the wallet application on the computer terminal automatically connect to interact.

[0023] Based on the above description, the present invention pairs and interacts the wallet application on the computer with the wallet application on the mobile terminal through the network. When the user makes a transaction payment on the computer terminal, the wallet application on the mobile terminal can automatically call out the fingerprint recognition window interface or the facial recognition window interface, thereby using the mobile terminal electronic device as an external device of the computer terminal device to more conveniently input the transaction password without the user having to manually input multiple strings of password characters on the computer terminal.

[0024] In summary, when using the dApp browser implementation method based on web technology, the user first visits the webpage of the wallet application in a normal browser, and then chooses to log in to an existing account or create a new account. After successful login, the user enters the homepage of the wallet, which is used to display information such as balance and transaction records; The user switches to the dApp tab in the wallet and enters the address of the dApp they want to access. The wallet loads the dApp through the iframe method. The dApp runs in the embedded iframe. The dApp initiates a login request through the WalletConnect network. The dApp uses the WalletConnect client library to generate a connection request and attaches a wc connection object. The wc connection object is the WalletConnect connection object. The dApp sends the wc object to the wallet parent window through postMessage. The dApp sends a JSON-formatted message object in postMessage. The JSON-formatted message object content includes: type: message type, "login_request". The wallet parent window listens to the iframe message event. When receiving the postMessage containing the WalletConnect request, the wallet will pop up a confirmation window to prompt the user to approve or reject. If the user approves the connection request, the wallet will send the approval result back to the dApp through the WalletConnect network to establish the connection. If the user rejects the request, the wallet will return the rejection information to the dApp through WalletConnect. After WalletConnect is established, dApp initiates a transaction request to the wallet, and the wallet signs the transaction based on the user's operation and returns the result; When a user accesses the wallet application on a mobile device and initiates a transaction request to the wallet after establishing WalletConnect, he needs to enter the payment transaction password. At this time, the versatility of the mobile device itself can be used to realize a variety of password payment methods, including using the camera for facial recognition as the payment transaction password, manually entering the payment transaction password using the virtual keyboard, and using fingerprint recognition as the payment transaction password; When a user conducts a transaction on a computer, the wallet application on the computer is automatically paired with the wallet application on the mobile device through the network. When the password input interface pops up on the computer, the facial recognition interface or fingerprint recognition interface automatically pops up on the mobile device. The user only needs to perform facial recognition or fingerprint recognition on the mobile device to complete the password input on the computer on the mobile device.

[0025] The embodiments of the present invention are given for the purpose of illustration and description, and are not intended to be exhaustive or to limit the invention to the disclosed forms. Many modifications and variations will be apparent to those of ordinary skill in the art. The embodiments are selected and described in order to better illustrate the principles and practical applications of the present invention and to enable those of ordinary skill in the art to understand the present invention and thereby design various embodiments with various modifications suitable for specific uses.

Claims

1. A dApp browser implementation method based on web page technology, characterized in that: The dApp browser implementation method based on web technology includes a wallet application; a dApp application and a WalletConnect network; Among them, the wallet application is responsible for user account management, wallet management and connecting to dApp; dApp applications, which are embedded in the wallet through iframe and interact with the wallet; The WalletConnect network, which enables secure cross-domain communication between wallets and dApps; The implementation method of the dApp browser based on web technology is specifically as follows: S1. Access the wallet application: The user visits the wallet application's webpage in a normal browser and chooses to log in to an existing account or create a new account. After a successful login, the user enters the wallet's homepage; S2. Wallet access dApp: The user switches to the dApp tab in the wallet and enters the address of the dApp they want to access. The wallet loads the dApp through an iframe. The dApp initiates a login request through the WalletConnect network. The dApp uses the WalletConnect client library to generate a connection request with a wc connection object. The dApp sends the wc object to the wallet parent window through postMessage. The dApp sends a JSON-formatted message object in postMessage. The wallet parent window listens to the message events of the iframe. When the postMessage containing the WalletConnect request is received, the wallet will pop up a confirmation window to prompt the user to approve or reject. S3. Approve the connection: The user approves the connection request, and the wallet sends the approval result back to the dApp through the WalletConnect network to establish a connection; S4. Connection refused: The user refuses, and the wallet returns the rejection information to the dApp via WalletConnect; S5. Wallet transactions: After WalletConnect is established, dApp initiates a transaction request to the wallet, and the wallet signs the transaction based on the user's operation and returns the result.

2. A dApp browser implementation method based on web technology according to claim 1, characterized in that: In step S1, the homepage of the wallet is used to display information such as balance and transaction records.

3. A dApp browser implementation method based on web technology according to claim 1, characterized in that: In step S2, the dApp runs in the embedded iframe.

4. A dApp browser implementation method based on web technology according to claim 1, characterized in that: In step S2, the wc connection object is the WalletConnect connection object.

5. The method for implementing a dApp browser based on web technology according to claim 1, characterized in that: In step S2, the message object content in JSON format includes: type: message type, "login_request".

6. A dApp browser implementation method based on web technology according to claim 1, characterized in that: The dApp browser implementation method based on web technology also includes the following steps: S6. Mobile device pairing: The user can access the webpage of the wallet application in a common browser on a computer or a mobile device and perform the operations from step S1 to step S5. The wallet application on the computer and the wallet application on the mobile device can exist at the same time, and the wallet application on the computer and the wallet application on the mobile device are paired with each other using the network.

7. A dApp browser implementation method based on web technology according to claim 6, characterized in that: The dApp browser implementation method based on web technology also includes the following steps: S7, mobile terminal password input: When a user accesses the wallet application on a mobile device and initiates a transaction request to the wallet after establishing WalletConnect, he or she needs to enter the payment transaction password. At this time, the versatility of the mobile device itself can be used to realize multiple password payment methods.

8. A dApp browser implementation method based on web technology according to claim 7, characterized in that: In step S7, the versatility of the mobile device itself can be used to implement a variety of password payment methods, including using a camera for facial recognition as a payment transaction password, manually entering a payment transaction password using a virtual keyboard, and using fingerprint recognition as a payment transaction password.

9. A dApp browser implementation method based on web technology according to claim 7, characterized in that: The dApp browser implementation method based on web technology also includes the following steps: S8. Enter password on the computer: When a user conducts a transaction on a computer, the wallet application on the computer is automatically paired with the wallet application on the mobile device through the network. When the password input interface pops up on the computer, the facial recognition interface or fingerprint recognition interface automatically pops up on the mobile device. The user only needs to perform facial recognition or fingerprint recognition on the mobile device to complete the password input on the computer on the mobile device.

10. A dApp browser implementation method based on web technology according to claim 9, characterized in that: In step S8 and step S6, the pairing process of the wallet application on the computer and the wallet application on the mobile terminal is as follows: Mobile terminals, such as smartphones, are electronic devices that can be carried around. When a user triggers a pop-up transaction interface on the computer and needs to enter a payment password, the wallet application on the mobile terminal uploads its own number on the Internet, and at the same time, the wallet application on the computer terminal searches for its own number on the Internet. When the same number occurs, the wallet application on the mobile terminal and the wallet application on the computer terminal automatically connect to interact.

Images