BridgeWebViewContainer

UIViewRepresentable wrapper for the persistent NEAR Connect WebView

BridgeWebViewContainer

BridgeWebViewContainer is a SwiftUI UIViewRepresentable that wraps the persistent WKWebView owned by NEARWalletManager. This allows the same WebView instance to be shown and hidden across different sheets without losing JavaScript state or the near-connect wallet session.

Declaration

public struct BridgeWebViewContainer: UIViewRepresentable

Overview

This component is primarily used internally by WalletBridgeSheet, but you can use it directly if you need custom UI layouts around the wallet WebView.

The key benefit of BridgeWebViewContainer is that it preserves the WebView’s state across different presentations. The WebView instance remains in memory and maintains its JavaScript context, ensuring wallet sessions persist even when the UI is dismissed and re-presented.

Initialization

webView · WKWebView · required

The persistent WKWebView instance from NEARWalletManager.bridgeWebView

public init(webView: WKWebView)

Usage

Basic Usage with NEARWalletManager

import SwiftUI
import NEARConnect

struct CustomWalletView: View {
    @EnvironmentObject var walletManager: NEARWalletManager
    
    var body: some View {
        VStack {
            Text("Custom Wallet Interface")
                .font(.headline)
                .padding()
            
            BridgeWebViewContainer(webView: walletManager.bridgeWebView)
                .frame(height: 500)
            
            Button("Close") {
                walletManager.showWalletUI = false
            }
            .padding()
        }
    }
}

Custom Sheet with BridgeWebViewContainer

struct MyCustomWalletSheet: View {
    @EnvironmentObject var walletManager: NEARWalletManager
    @Environment(\.dismiss) private var dismiss
    
    var body: some View {
        NavigationView {
            VStack(spacing: 0) {
                if !walletManager.isBridgeReady {
                    ProgressView("Loading wallet...")
                        .frame(maxWidth: .infinity, maxHeight: .infinity)
                } else {
                    BridgeWebViewContainer(webView: walletManager.bridgeWebView)
                }
            }
            .navigationTitle("NEAR Wallet")
            .navigationBarTitleDisplayMode(.inline)
            .toolbar {
                ToolbarItem(placement: .navigationBarTrailing) {
                    Button("Cancel") {
                        walletManager.cleanUpOnDismiss()
                        dismiss()
                    }
                }
            }
        }
    }
}

Implementation Details

The container handles WebView lifecycle and layout:

1. View Creation: Wraps the WebView in a UIView container with proper sizing
2. Layout: Configures autoresizing masks for flexible width/height
3. Safe Area: Disables content inset adjustment for full-screen display
4. Re-parenting: Safely moves the WebView between containers when the view updates

The WebView instance is owned by NEARWalletManager and should not be released or modified outside of the manager. The container simply presents it in the SwiftUI view hierarchy.

Technical Notes

WebView Persistence

The same WKWebView instance can be safely moved between different BridgeWebViewContainer instances. SwiftUI’s updateUIView method ensures the WebView is correctly re-parented when needed.

JavaScript State

Because the WebView persists across presentations:

• Wallet connections remain active
• JavaScript variables and state are preserved
• No need to reload the near-connect library
• Faster subsequent operations

Memory Management

The WebView is retained by NEARWalletManager for its entire lifetime. The container only holds a reference and does not manage the WebView’s lifecycle.

When to Use

Use BridgeWebViewContainer when:

• You need a custom wallet UI layout
• You want to embed the wallet in a specific screen design
• You need more control over the presentation flow

Use WalletBridgeSheet when:

• You want the standard full-screen wallet experience (recommended)
• You don’t need custom UI around the wallet
• You want automatic flow management

Related APIs

• NEARWalletManager - Main wallet manager class
• WalletBridgeSheet - Ready-to-use wallet sheet component
• Wallet Connection - Guide to connecting wallets