eSealing - Connecting browser Wallet

tel · May 10, 2023, 11:41am

Hi!

I would like to recreate a similar button functionality as you have here for connecting the browser wallet. However I am having difficulties finding some source code, apart from the front end React bit, I am looking for the Backend/rust part? Can someone guide me a bit here?

Thanks ind advance!

Zoltan · May 11, 2023, 6:44am

Hello tel

We will get back to you shortly.

Regards,
Concordium Tech Support

Doris · May 11, 2023, 7:20am

The browser wallet is only at the front end (the browser wallet is installed at the user’s browser and also the private keys in the browser wallet are ONLY at the user’s machine). Therefore the backend cannot connect or access the browser wallet to initiate a transaction to be sent via the browser wallet.
The code that is linked to the connect button can be found in the front-end/React part of the project here:

github.com

Concordium/concordium-browser-wallet/blob/main/examples/eSealing/src/eSealing.tsx#L185


      
          const [transactionError, setTransactionError] = useState('');
          const [loadingError, setLoadingError] = useState('');
          
          
const file = useRef<HTMLInputElement | null>(null);
          
          
const [isWaitingForTransaction, setWaitingForUser] = useState(false);
          return (
              <div style={blackCardStyle}>
                  <h1 className="header">Register a file on Concordium</h1>
                  <div className="containerSpaceBetween">
                      <WalletConnectionTypeButton
                          buttonStyle={ButtonStyle}
                          disabledButtonStyle={ButtonStyleDisabled}
                          connectorType={BROWSER_WALLET}
                          connectorName="Browser Wallet"
                          setWaitingForUser={setWaitingForUser}
                          connection={connection}
                          {...props}
                      />
                      <WalletConnectionTypeButton
                          buttonStyle={ButtonStyle}

The eSealing example sends all transactions from the frontend via the Concordium browser wallet (or wallet connect - mobile wallets) to the blockchain, there is no Rust/backend that sends transactions in the eSealing example.

I am happy to point out additional parts in the front end if you need further help with how the “Use Browser Wallet” button works at the front end.

tel · May 11, 2023, 8:10am

Hi!

I might be wrong in my backend expression, but not excactly what I mean.

I am working on building a Python application and would like to use the “connect to browser wallet” button. But the front end bit I will make differently, so I am looking for how to implement the “connection” functionality on its own.
Until now I have used the concordium-client command line commands to run as functions in the app, so I would expect something similar?

Or if I can convert this tsx to python?

Doris · May 11, 2023, 10:16am

We have a list of SDKs that we currently support here:
https://developer.concordium.software/en/mainnet/net/guides/sdks-apis.html#sdks-apis

Python SDK is not among them at the moment, also we have discussed including it and it could be added in the future (no timeline/promise so).

tel · May 11, 2023, 10:31am

So all the connection functionality happens in React in the example?

As I understand this React script (and its siblings) are refering to rust functionality that you have build to support this React script. Is this conceptually correct?

And if so where do I find that code it is refering to?

Thanks for the continous help!

Doris · May 11, 2023, 12:58pm

The browser wallet hosts the private keys corresponding to the accounts of the
user and a https link that points to a server that hosts a Concordium node.

Your front-end code that is run in the browser constructs the transaction object and sends it to the Concordium Wallet for Web. The transaction object is signed by the private key hosted in the Concordium Wallet for Web and transmitted to a server hosted by Conocrdium via HTTPS. This server has access to a Concordium node and converts the request (including the signed transaction object) that comes via HTTPS from the Concordium Wallet for Web to a request that the Concordium node can execute.

tel · May 11, 2023, 1:17pm

I am not sure if I am missing the point, but where do these imports come from? Are they not originating from concordium (in rust)?

import {
    ConnectorType,
    useWalletConnectorSelector,
    WalletConnection,
    WalletConnectionProps,
} from '@concordium/react-components';

Doris · May 11, 2023, 1:20pm

The eSealing example uses the react-components and the wallet-connectors packages from this repo; These components are written in TypeScript:

Since you ask about the BrowserWallet specifically:

github.com

Concordium/concordium-dapp-libraries/blob/main/packages/wallet-connectors/src/BrowserWallet.ts

import { SchemaType, WalletApi, detectConcordiumProvider } from '@concordium/browser-wallet-api-helpers';
import { AccountTransactionPayload, AccountTransactionSignature, AccountTransactionType } from '@concordium/web-sdk';
import {
    SignableMessage,
    TypedSmartContractParameters,
    WalletConnection,
    WalletConnectionDelegate,
    WalletConnector,
} from './WalletConnection';
import { UnreachableCaseError } from './error';

const BROWSER_WALLET_DETECT_TIMEOUT = 2000;

/**
 * Implementation of both {@link WalletConnector} and {@link WalletConnection} for the Concordium Browser Wallet.
 * Implementing both interfaces in the same class is a good fit for this protocol
 * as all interaction with the wallet's API happens through a single stateful client.
 */
export class BrowserWalletConnector implements WalletConnector, WalletConnection {
    readonly client: WalletApi;

This file has been truncated. show original

tel · May 11, 2023, 1:33pm

Thanks a lot! I think that was what I was looking for!