Application

Follow these steps to import Tria Onboarding SDK into your dapp:

Installation

npm

npm i -f @tria-sdk/authenticate@latest
npm i -f @tria-sdk/connect@latest

yarn

yarn add @tria-sdk/authenticate@latest
yarn add @tria-sdk/connect@latest

React JS (all versions)

Create a .npmrc and add the following:

//registry.npmjs.org/:_authToken=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
registry=https://registry.npmjs.org/

Inside App.js :

App.js

import { useTriaConnector } from "@tria-sdk/connect";

const { globalData } = useTriaConnector({ authUrl: "https://auth.tria.so", walletUrl:"https://wallet.tria.so" });

Inside your login component :

import Application from "@tria-sdk/authenticate"

In your login component, add this inside return :

<Application
	  logo="your_logo" //example: "https://fusion_x.logo.svg"
	  dappName="your_dapp_name" //example: "Fusion X"
	  dappDomain={window.parent.origin}
	  primaryColor="your_dapp_primary_color" //example: "#FFFFFF"
	  defaultChain="your_desired_default_chain" //example: "FUSE"
	  supportedChains={["chain1", "chain2"]} //example: {["POLYGON", "MUMBAI"]}
	  uiType="yes" // for external wallets 	
	  darkMode = {true} //for enabling dark mode
          buttonPosition={x:200, y:200} //for draggable wallet
/>

Next JS ( for versions higher than 13.0.0)

Create a .npmrc and add the following:

//registry.npmjs.org/:_authToken=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
registry=https://registry.npmjs.org/

Inside next.config.js :

const nextConfig = {
      experimental: {
        esmExternals: "loose",
    },
};

Inside _app.js (in case Next JS App Directory is disabled)

_app.js

import { useTriaConnector } from "@tria-sdk/connect";

const { globalData } = useTriaConnector({ authUrl: "https://auth.tria.so", walletUrl:"https://wallet.tria.so" });

Inside page.js (in case Next JS App Directory is enabled)

page.js

import { useTriaConnector } from "@tria-sdk/connect";

const { globalData } = useTriaConnector({ authUrl: "https://auth.tria.so", walletUrl:"https://wallet.tria.so" });

Inside your login component :

"use client"; //add this to the top of your login component

const Application = dynamic(
    () => import("@tria-sdk/authenticate"),
    { ssr: false }
)

In your login component, add this inside return :

<Application
	  logo="your_logo" //example: "https://fusion_x.logo.svg"
	  dappName="your_dapp_name" //example: "Fusion X"
	  dappDomain={window.parent.origin}
	  primaryColor="your_dapp_primary_color" //example: "#FFFFFF"
	  defaultChain="your_desired_default_chain" //example: "FUSE"
	  supportedChains={["chain1", "chain2"]} //example: {["POLYGON", "MUMBAI"]}
	  uiType="yes" // for external wallets 	
	  darkMode = {true} //for enabling dark mode
          buttonPosition={x:200, y:200} //for draggable wallet
/>