Mobile Apps on Asset Chain

React Native (Expo) demo App

In this section, we are going to build a demo application using React Native, a popular framework for creating mobile apps that work on both iOS and Android platforms. The development environment we will use is Expo, which simplifies the process of building and testing React Native applications by providing tools and services for running the app on devices and emulators without needing to deal with complex setup processes. The application will connect to the Assetchain testnet network. The application will enable users to send test RWA native tokens

https://github.com/xendfinance/assetchain-expo-demo-app.gitgithub.com

Requirements

Before you begin, you need to install the following tools:

• Node (>= v18.17)

• Yarn

• Git

• Metamask(IOS, Android) Ensure you download and install Metamask Wallet on your Target Mobile Device

• Expo go (IOS, Android) Ensure you download and install Expo go App on your Target Mobile Device

Technology Used

• Expo

• Wallet Connect

• Wagmi

Environment Setup

To get started with Asset Chain Mobile Demo App, follow the steps below:

1. Clone this repo & install dependencies

git clone https://github.com/xendfinance/assetchain-expo-demo-app.git
cd assetchain-expo-demo-app
yarn

1. Add enivoronmental Variables. To connect your application to WalletConnect, you'll need to create a project on the WalletConnect Dashboard and obtain the Project ID.

Sign Up or Log In to the WalletConnect Dashboard

• Visit the WalletConnect Dashboard

• If you don't have an account, sign up with your email and create a new account. If you already have an account, log in.

Create a New Project

• After logging in, you’ll see an option to create a new project.

• Click on "Create" and fill in the necessary details, such as the project name

• Once the project is created, you’ll be redirected to the project’s dashboard.

Obtain Your Project ID

• In the project dashboard, you’ll find the Project ID under the project details.

• Copy the Project ID. You will use this ID in your ReactJS project to configure WalletConnect.

Generate .env file to your project root folder by running the command:

$ cp .env.example .env

In your .env file generated set WALLECT_CONNECT_PROJECTID to your Wallet conect project Id

1. Running Application To Start Application, Run the command

yarn start

then, scan the QR code displayed on your terminal using the Expo Go app on your mobile device.

setting up the web3modal

in the entry file (App.tsx)

import "@walletconnect/react-native-compat";
import { WagmiProvider } from "wagmi";
import { RootSiblingParent } from "react-native-root-siblings";
import { assetChainTestnet } from "@wagmi/core/chains";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import {
  createWeb3Modal,
  defaultWagmiConfig,
  Web3Modal,
} from "@web3modal/wagmi-react-native";
import { Application } from "./navigation/app";
import { StatusBar } from "react-native";
import { useFonts } from "expo-font";
import { useEffect } from "react";
import { hideAsync } from "expo-splash-screen";

const queryClient = new QueryClient();

// Get projectId at https://cloud.walletconnect.com
const projectId = process.env.EXPO_PUBLIC_WALLECT_CONNECT_PROJECTID as string;

const metadata = {
  name: "AppKit RN",
  description: "AppKit RN Example",
  url: "https://walletconnect.com",
  icons: ["https://avatars.githubusercontent.com/u/37784886"],
  redirect: {
    native: "YOUR_APP_SCHEME://",
    universal: "YOUR_APP_UNIVERSAL_LINK.com",
  },
};

const chains = [assetChainTestnet] as const;

const wagmiConfig = defaultWagmiConfig({ chains, projectId, metadata });

createWeb3Modal({
  projectId,
  wagmiConfig,
  defaultChain: assetChainTestnet,
});

export default function App() {
  const [loaded] = useFonts({
    SpaceMono: require("./assets/fonts/SpaceMono-Regular.ttf"),
  });

  useEffect(() => {
    if (loaded) {
      hideAsync();
    }
  }, [loaded]);

  if (!loaded) {
    return null;
  }
  return (
    <WagmiProvider config={wagmiConfig}>
      <QueryClientProvider client={queryClient}>
        <RootSiblingParent>
          <Application />
          <StatusBar />
          <Web3Modal />
        </RootSiblingParent>
      </QueryClientProvider>
    </WagmiProvider>
  );
}

The above code Snippet sets up the environment for a project using the WalletConnect. The app initializes a wagmiConfig object using the WalletConnect project ID (Ensure you obtain your project Id from Wallet Connect Cloud) and metadata for the dApp, and configures the Web3Modal interface for connecting external wallets to assetChainTestnet network which is imported from wagmi

To test the application Visit our Faucet to obtain test RWA and USDT tokens