Example Codes in React & TypeScript

In this Section, you will see examples of how to use the functions provided by the SDK to integrate authentication, user management, and Movement transaction execution into your React project. All the example uses TypeScript. However, the SDK can also be used with React and JavaScript in the same way, as shown in the examples.

Functions Overview

// Function Signature -

const signInWithGoogle = (network: MovementNetwork, logEnabled?: boolean) => Promise<SignInWithGoogleReturn>;

This function allows users to sign in with Google using OAuthProvider.

Parameters:

network: The network on which the transaction will be executed. For now, only testnet is supported.
logEnabled (optional): Enable/disable logging. The default is true.

Return Type:

Promise<SignInWithGoogleReturn>:
{ success: true; user: UserData; } if successful.
{ success: false; message: string; } if unsuccessful.

Errors:

The function can throw an error if the sign-in operation fails. The error message is logged if logging is enabled.

Example:

Here is an example of a React component that imports and uses the signInWithGoogle function:

SignInButton.tsx

import React from "react";

// Import the `signInWithGoogle` function from our SDK
import { signInWithGoogle } from "@lyncworld/movement-social-login-sdk";

const SignInButton = () => {

  // Create a function to call the `signInWithGoogle` function
  // and handle your custom sign-in logic
  const handleSignIn = async () => {
    try {
      // Your custom logic before authentication goes here...

      // Use the `signInWithGoogle` method from the SDK to authenticate the user.
      // This function authenticates the user and returns an object that contains
      // a success status and user data or error message based on the result of
      // authentication (refer to above-described documentation for return values)
      const response = await signInWithGoogle(MovementNetwork.Testnet);
      
      // Your custom logic after authentication goes here...
      if (response.success) {
      
        // If authentication is successful, the function will return the user data
        console.log("User data:", response.user);
      } else {
      
        // If authentication fails, the function will return an error message
        // describing why the authentication has failed
        console.log("Error:", response.message);
      }
    } catch (error) {
    
      // Your custom error handling logic goes here...
      console.error("An error occurred:", error);
    }
  };

  return <button onClick={handleSignIn}>Sign in with Google</button>;
};

export default SignInButton;

2. Signing Out a User

// Function Signature -

const signOutUser = (logEnabled?: boolean) => Promise<SignOutUserReturn>;

This function is used to sign a user out of the application. It uses Firebase's signOut function to sign out the user.

Parameters:

logEnabled (optional): Enable/disable logging. The default is true.

Return Type:

Promise<SignOutUserReturn>:
{ success: true; } if successful.
{ success: false; message: string; } if unsuccessful.

Errors:

The function can throw an error if the sign-out operation fails. The error message is logged if logging is enabled.

Example:

Here is an example of a React component that imports and uses the signOutUser function:

SignOutButton.tsx

import React from "react";

// Import the `signOutUser` function from our SDK
import { signOutUser } from "@lyncworld/movement-social-login-sdk";

const SignOutButton = () => {

  // Create a function to call the `signOutUser` function
  // and handle your custom sign-out logic
  const handleSignOut = async () => {
    try {
      // Your custom logic before sign-out goes here...

      // Use the `signOutUser` method from the SDK to sign the user out.
      // This function signs a user out of the application and returns an object that
      // contains a success status and (optionally) an error message based on the
      // result of sign out (refer to above-described documentation for return values)
      const response = await signOutUser();
  
      // Your custom logic after sign-out goes here...
      if (response.success) {
      
        // If sign-out is successful, the function will return `true` for success
        console.log("User signed out successfully");
      } else {
      
        // If sign-out fails, the function will return `false` for success
        // and an error message describing why the sign-out has failed
        console.log("Error:", response.message);
      }
    } catch (error) {
    
      // Your custom error handling logic goes here...
      console.error("An error occurred:", error);
    }
  };

  return <button onClick={handleSignOut}>Sign out</button>;
};

export default SignOutButton;

3. Get the details of a User

// Function Signature -

const getUserData = (email: string, network: MovementNetwork, logEnabled?: boolean) => Promise<GetUserProfileReturn>;

This function is an asynchronous function that fetches a user's profile from the server.

Parameters:

email: The email of the user.
network: The network on which the transaction will be executed. For now, only testnet is supported.
logEnabled (optional): Enable/disable logging. The default is true.

Return Type:

Promise<GetUserProfileReturn>:
{ success: true; data: UserData; } if successful.
{ success: false; data: string; } if unsuccessful.

Errors:

The function can throw an error if the fetch operation fails. The error message is logged if logging is enabled.

Example:

Here is an example of a React component that imports and uses the getUserProfile function:

UserProfileComponent.tsx

import React, { useEffect, useState } from "react";

// Import the `getUserProfile` function from our SDK
import { getUserProfile, MovementNetwork, UserData } from "@lyncworld/movement-social-login-sdk";

const UserProfileComponent = () => {

  // React state to set user's data return by the `getUserProfile` function
  const [userProfile, setUserProfile] = useState<UserData | null>(null);

  useEffect(() => {
  
    // Create a function to call the `getUserProfile` function
    // and handle your custom fetching logic here
    const fetchUserProfile = async () => {
      // Your custom logic before fetching the details goes here...

      // Use the `getUserProfile` method from the SDK to fetch the user details.
      // This function checks for the user with the specified email and network and
      // returns an object that contains a success status and user data or an error
      // message based on the existance of user in our database.
      const response = await getUserProfile("test@example.com", MovementNetwork.Testnet);
      
      // Your custom logic after fetching the details goes here...
      if (response.success) {

        // If the request is successful, the function will return the user data
        // Set the returned data to the react state defined above.
        setUserProfile(response.data);
      } else {
      
        // If the request fails, the function will return an error message
        // describing why the request has failed
        console.error(response.message);
      }
    };

    // Call the function on the page load to get the data of the user
    fetchUserProfile();
  }, []);

  return (
    <div>
      {userProfile && (
        <div>
          <h2>{userProfile.name}</h2>
          <p>{userProfile.email}</p>
          {/* Render other user profile data as needed */}
        </div>
      )}
    </div>
  );
};

export default UserProfileComponent;

4. Generic Transactions on Movement Networks

// Function Signature

const movementTransaction = (args: MovementTransactionFuncArgs, logEnabled?: boolean) => Promise<MovementTransactionReturn>;

This is an asynchronous function that executes a generic Movement transaction.

Parameters:

args (MovementTransactionFuncArgs): The arguments for the generic Movement transaction. It is an object that includes the following properties:
- email (string): The email of the user.
- network (MovementNetwork): The network on which the transaction will be executed. For now, only testnet is supported.
- accountAddress (string): The wallet address of the currently signed-in user.
- contractAddress (string): The contract address.
- contractName (string): The contract name.
- functionName (string): The function name.
- arguments (Array): The arguments for the transaction. Each argument is an object that includes the following properties:
  - argument (string): The argument used by the function.
  - type (TransactionArgumentTypes): The type of the argument. It can be TransactionArgumentTypes.String, TransactionArgumentTypes.Number, TransactionArgumentTypes.ByteArray, or TransactionArgumentTypes.Signature.
  - usePaymaster (optional): Enable/disable the use of paymaster. The default is false. If you enable Paymaster, the transaction will be sponsored. Also, if the wallet doesn't exist, it will be created automatically before the transaction.
logEnabled (optional): Enable/disable logging. The default is true.

Return Type:

Promise<MovementTransactionReturn>:
{ success: true; data: MovementTransactionData; } if successful.
{ success: false; data: string; } if unsuccessful.

Errors:

The function can throw an error if the transaction fails. The error message is logged if logging is enabled.

Example:

Here is an example of a React component that imports and uses the movementTransaction function to perform a simple movement transaction:

TransactionComponent.tsx

import React, { useState } from "react";

// Import the `movementTransaction` function from our SDK
import { movementTransaction, MovementNetwork, MovementTransactionData } from "@lyncworld/movement-social-login-sdk";

const TransactionComponent = () => {
  // React state to set transaction response data return by the `movementTransaction` function
  const [transactionResult, setTransactionResult] = useState<MovementTransactionData | null>(null);

  // Create a function to call the `movementTransaction` function
  // and handle your custom logics here
  const executeTransaction = async () => {
    // Your custom logic before sending the transaction goes here...
    
    // Sample arguments required by the `movementTransaction` function to process a transaction
    const transactionArgs = {
      email: "user@example.com", // Email id of the sender
      network: MovementNetwork.Testnet, // Network on which the transaction will execute
      accountAddress: "0x0000", // The wallet address of the sender
      contractAddress: "0x30b16e76bbd67b41387a33de68ab489fec1ecab210c1b06413121e5da7ba839f", // Contract address of the deployed contract on the Movement network specified above
      contractName: "lync_contract", // Name of the contract
      functionName: "hit", // Name of the function to be executed
      arguments: [], // Arguments required by the function to be executed
      usePaymaster: true, // Optional. If true, the transaction fee will be sponsored by the Lync, else the transaction fee will be paid by the sender
    };

    try {
      // Use the `movementTransaction` method from the SDK to send the transaction.
      // This function will initiate and execute a transaction on the specified
      // Movement network and returns an object that contains a success status
      // and transaction result or an error message based on the success of execution of
      // the transaction.
      const response = await movementTransaction(transactionArgs);
      
      // Your custom logic after execution of the transaction goes here...
      if (response.success) {

        // If the request is successful, the function will return the transaction data
        // Set the returned data to the react state defined above.
        setTransactionResult(response.data);
      } else {
      
        // If the request fails, the function will return an error message
        // describing why the request has failed
        console.error(response.message);
      }
    } catch (error) {
    
      // Your custom error handling logic goes here...
      console.error("Error executing transaction:", error);
    }
  };

  return (
    <div>
      <button onClick={executeTransaction}>Execute Transaction</button>
      {transactionResult && (
        <div>
          <h2>Transaction Result:</h2>
          <p>Success: {transactionResult.success.toString()}</p>
          <p>Data: {JSON.stringify(transactionResult.data)}</p>
        </div>
      )}
    </div>
  );
};

export default TransactionComponent;

PreviousUsing the SDK NextTypes Used in the Methods Provided by the SDK

Last updated 4 months ago

Functions Overview

1. Authenticating user with Google Sign-In

Parameters:

Return Type:

Errors:

Example:

2. Signing Out a User

Parameters:

Return Type:

Errors:

Example:

3. Get the details of a User

Parameters:

Return Type:

Errors:

4. Generic Transactions on Movement Networks

Parameters:

Return Type:

Errors:

Example: