How to connect a Phantom wallet to my Flutter web app?

Issue

I’ve been trying unsuccesfully to connect a Flutter web app to a Phantom wallet. No pub.dev packages have been released in order to accomplish this and can’t figure out how to do it with dart-js interop.

Wondering if someone already figured it out?

Solution

I have a (crude) working piece of code that could be useful for somebody trying to accomplish the same:

// web/index.html

<script src="../lib/wallet.js" />

// wallet.js

class ClientWallet {

    constructor() {
        this.pubKey = '';
    }

    async connect() {
        const resp = await window.solana.connect();
        this.pubKey = resp.publicKey.toString();
    }

    address() {
        return this.pubKey;
    }

    disconnect() {
        window.solana.disconnect();
    }
}

var walletModule = { ClientWallet: ClientWallet };

// main.dart

import 'package:js/js.dart';
import 'package:js/js_util.dart';

@JS('walletModule.ClientWallet')
class ClientWallet {
  external Future<void> connect();
  external void disconnect();
  external String get pubKey;
}

Future<void> connectWallet() async {
  ClientWallet wallet = ClientWallet();
  await promiseToFuture(wallet.connect());
}

And then for connecting simply call connectWallet(). This works for me for the Phantom wallet, now I’m trying to integrate the Solana Dart package for signing a transaction.

Answered By – ggiurca

Answer Checked By – Candace Johnson (FlutterFixes Volunteer)