Wallets

This page will teach you how to connect and code with wallets on Soroban Dapps.

Connect a Wallet: Freighter

Freighter is a browser extension that allows users to securely store their Stellar accounts and sign transactions. It's a convenient way to manage your Stellar accounts and interact with the Stellar network.

To use Freighter with Soroban Dapps, you will need to enable exmperimental mode. Below are instructions on how to do this:

First, click on the Freighter extension icon in your browser and click on the gear icon in the bottom right corner.

(Settings(⚙️)>Preferences>ENABLE EXPERIMENTAL MODE).

Next, click on the preferences menu.

Then, enable experimental mode by toggling the switch.

Finally, in the case of the example dapps in the Soroban Dapps Challenge, there will often be a "Connect" button on the frontend of the dapps. Ensure that you are connected to the proper network and click on this button to connect your wallet.

Note: You will use Futurenet and the Standalone network throughout these challenges.

Wallet Integration: React

Wallets are an essential part of any dapp. They allow users to interact with the blockchain and sign transactions. In this section, you'll learn how to integrate wallets into your React dapps.

WalletData Component

In the sample Crowdfund dapp, the WalletData component, located in components/molecules/wallet-data/index.tsx, plays a key role in wallet integration. Let's break down the code and understand its functionality:

import React from "react";
import { DropdownSvg } from "../../../assets/icons";
import { useAccount, useIsMounted, useNetwork } from "../../../wallet";
import { ConnectButton } from "../../atoms";
import styles from "./style.module.css";
import Image from "next/image";

export function WalletData() {
  const mounted = useIsMounted();
  const { data: account } = useAccount();
  const { activeChain: chain, chains } = useNetwork();
  const unsupportedChain = chain?.unsupported;

  return (
    <>
      {mounted && account ? (
        <div className={styles.displayData}>
          {chain && (chains.length > 1 || unsupportedChain) && (
            <div className={styles.card}>
              {chain.iconUrl && (
                <Image
                  alt={chain.name ?? "Chain icon"}
                  style={{
                    background: chain.iconBackground,
                  }}
                  height="24"
                  src={chain.iconUrl}
                  width="24"
                />
              )}
              {chain.name ?? chain.id}
            </div>
          )}
          <div className={styles.card}>{account.displayName}</div>
        </div>
      ) : (
        <ConnectButton label="Connect Wallet" />
      )}
    </>
  );
}

Here's a breakdown of the code:

• The mounted variable is obtained using the useIsMounted hook, indicating whether the component is currently mounted or not.

• The useAccount hook is used to fetch the user's account data, and the data property is destructured from the result.

• The useNetwork hook is employed to access information about the active blockchain network and available chains. The activeChain and chains properties are destructured from the result.

• The unsupportedChain variable checks if the active chain is unsupported.

• Conditional rendering is used to display different content based on the component's mount status and the availability of account data.

• If the component is mounted and the account data is available, the user's wallet data is displayed. This includes the chain icon (if available), obtained from chain.iconUrl, and the chain name or ID. The account's display name is also shown.

• If there are multiple chains available or the active chain is unsupported, a chain card with the chain icon and name (or ID) is displayed.

• If the component is not mounted or the account data is not available, a ConnectButton component is rendered, allowing the user to connect their wallet.

Conclusion

In this section, you learned how to integrate wallets into your dapps. You also learned how to use the useAccount and useNetwork hooks to access account and network data. If you want to learn more about Soroban Dapp development, please reach out to us on Discord. We'd love to hear from you!