# PolkadotExtensionWebView

Allows you to load any web dApp in a WebView and inject the hot-wallet that is present in the c# code into the javascript app via the <https://github.com/polkadot-js/extension>.

## How it works

Each polkadot web based application uses [Polkadot.js extension](https://github.com/polkadot-js/extension) to connect a browser extension wallet (like Talisman extension, ...). This approach is highly recommended, because anyone with a compatible browser extension wallet can connect to the web based dApp without exposing their seed-phrase.

The way these browser extensions establish a connection is simple: They use javascript injection technique to inject their own "wallet code" that allows access to the seed-phrase, signing logic, etc...

That means PlutoFramework needs to do the same thing. It takes the web dApp javascript code and it injects its own code with the "wallet code" exactly according to the Polkadot.js extension specification.

The difference is that this "wallet code" actually does not contain any wallet, nor a signing code. It injects a javascript code that allows a hybrid code communication between javascript and C#. So, the injected code only acts as a wallet, but the actually wallet code is written in c# as part of the PlutoFramework and it uses [HybridWebView](https://learn.microsoft.com/en-us/dotnet/maui/user-interface/controls/hybridwebview?view=net-maui-10.0) to communicate between c# and javascript languages.

## Usage

```xml
xmlns:webview="clr-namespace:PlutoFramework.Components.WebView;assembly=PlutoFramework"
...
<webview:PolkadotExtensionWebView
    AbsoluteLayout.LayoutBounds="0.5, 0.5, 1, 1"
    AbsoluteLayout.LayoutFlags="All"
    Source="<dapp_url>"/>
```

Or you can also use the ExtensionWebViewPage to display the website in a fullscreen browser page:

```csharp
using PlutoFramework.Components.WebView;
// ...

var dAppUrl = "<dapp_url>";

await Shell.Current.Navigation.PushAsync(new ExtensionWebViewPage(dAppUrl));
```

## Allow origin

<figure><img src="https://1720293510-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F7cPs2j0GvSzYIyVs3t35%2Fuploads%2Fr0hoxaBMJU5wi8Ehjj3N%2Fimage.png?alt=media&#x26;token=1f686580-b49d-4112-9292-8db7d76ca786" alt="" width="312"><figcaption></figcaption></figure>

Before actually using the wallet code, user needs to confirm that they want to connect to the web dApp.

If you as a developer trust certain origins (like your own websites), you can include them in the ResourceDictionary:

```xml
<x:Array x:Key="AllowedOrigins" Type="{x:Type x:String}">
    <x:String>https://polkadot.js.org/apps/</x:String>
    <x:String>your dApp</x:String>
</x:Array>
```

## ExtensionWebViewPage

<figure><img src="https://1720293510-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F7cPs2j0GvSzYIyVs3t35%2Fuploads%2FUsHzXrbw2QgpuN11iUVC%2Fimage.png?alt=media&#x26;token=da361847-8b2f-4b04-bcb6-1f15704e8cb6" alt="" width="315"><figcaption><p>Polkassembly example</p></figcaption></figure>

The ExtensionWebViewPage can be used if you want a default browser experience, where users can:

* Navigate back at any time
* See the actual URL of the website
* Search for any other website
* Reload