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 (for all versions)

1. Create a .npmrc and add the following token:

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

1. Add token to meta tag in index.html at the root level of the app

   • this token is origin specific

   • below is the one mentioned for http://localhost:3000

<meta
	http-equiv="origin-trial"
	content="AlU4GUR1ZBasFEUCNe8USkx7GSokITQbNSdgFlU9Zrg6aP+ThjAbiDdKq0gXIdk/agcphCw4k/hxIBcSD4wilQ8AAABneyJvcmlnaW4iOiJodHRwOi8vbG9jYWxob3N0OjMwMDAiLCJmZWF0dXJlIjoiRGlzYWJsZVRoaXJkUGFydHlTdG9yYWdlUGFydGl0aW9uaW5nIiwiZXhwaXJ5IjoxNzI1NDA3OTk5fQ=="
/>

• For creating one for your custom domain, you can click - here

• Then click on register

• Refer this image for more -

  

1. Inside App.js :

App.js

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

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

1. Inside your login component :

import Application from "@tria-sdk/authenticate"
import "@tria-sdk/authenticate/dist/index.css"

1. 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
/>

1. Add craco to your devDependencies using the following npm command:

npm i @craco/craco --save-dev

1. Create a craco.config.js file in the root folder and add the following

module.exports = {
    webpack: {
        configure: (config) => {
            // ...
            const fileLoaderRule = getFileLoaderRule(config.module.rules);
            if(!fileLoaderRule) {
                throw new Error("File loader not found");
            }
            fileLoaderRule.exclude.push(/\.cjs$/);
            // ...
            const scopePluginIndex = config.resolve.plugins.findIndex(
                ({ constructor }) => constructor && constructor.name === 'ModuleScopePlugin'
              );
        
              config.resolve.plugins.splice(scopePluginIndex, 1);
              config['resolve'] = {
                fallback: {     
                    crypto: require.resolve("crypto-browserify"),
                    stream: require.resolve("stream-browserify"),
                    assert: require.resolve("assert"),
                    http: require.resolve("stream-http"),
                    https: require.resolve("https-browserify"),
                    os: require.resolve("os-browserify"),
                    url: require.resolve("url"),
                    zlib: require.resolve("browserify-zlib"),
                },
              }
	    return config;
        }
    }
};



function getFileLoaderRule(rules) {
    for(const rule of rules) {
        if("oneOf" in rule) {
            const found = getFileLoaderRule(rule.oneOf);
            if(found) {
                return found;
            }
        } else if(rule.test === undefined && rule.type === 'asset/resource') {
            return rule;
        }
    }
}

Next JS (for versions higher than 13.0.0)

1. Create a .npmrc and add the following token:

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

1. Add token to meta tag in index.html at the root level of the app

   • this token is origin specific

   • below is the one mentioned for http://localhost:3000

<meta
	http-equiv="origin-trial"
	content="AlU4GUR1ZBasFEUCNe8USkx7GSokITQbNSdgFlU9Zrg6aP+ThjAbiDdKq0gXIdk/agcphCw4k/hxIBcSD4wilQ8AAABneyJvcmlnaW4iOiJodHRwOi8vbG9jYWxob3N0OjMwMDAiLCJmZWF0dXJlIjoiRGlzYWJsZVRoaXJkUGFydHlTdG9yYWdlUGFydGl0aW9uaW5nIiwiZXhwaXJ5IjoxNzI1NDA3OTk5fQ=="
/>

• For creating one for your custom domain, you can click - here

• Then click on register

• Refer this image for more -

• 

1. Inside next.config.js :

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

1. 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" });

1. 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" });

1. Inside your login component :

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

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

import "@tria-sdk/authenticate/dist/index.css"

1. 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 12.x.x)

1. Create a .npmrc and add the following:

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

1. Inside next.config.js :

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

1. Add token to meta tag in index.html at the root level of the app

• this token is origin specific

• below is the one mentioned for http://localhost:3000

<meta
	http-equiv="origin-trial"
	content="AlU4GUR1ZBasFEUCNe8USkx7GSokITQbNSdgFlU9Zrg6aP+ThjAbiDdKq0gXIdk/agcphCw4k/hxIBcSD4wilQ8AAABneyJvcmlnaW4iOiJodHRwOi8vbG9jYWxob3N0OjMwMDAiLCJmZWF0dXJlIjoiRGlzYWJsZVRoaXJkUGFydHlTdG9yYWdlUGFydGl0aW9uaW5nIiwiZXhwaXJ5IjoxNzI1NDA3OTk5fQ=="
/>

• For creating one for your custom domain, you can click - here

• Then click on register

• Refer this image for more -

• 

1. 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" });

1. 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" });

1. Inside your login component :

import {useState, useEffect} from "react";
import "@tria-sdk/authenticate/dist/index.css"

  const [Application2, setApplication2] = useState()
  const [TriaConnectProvider2, setTriaConnectProvider2] = useState()
  
  useEffect(() => {
    const importApplication = async () => {
    
      if (typeof window !== 'undefined') {
        try {
          import { default: Application, TriaConnectProvider } = await import('@tria-sdk/authenticate');
          setApplication2(
          <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
          />
          )
          setTriaConnectProvider2(<TriaConnectProvider/>)
        } catch (error) {
          console.error('Error importing @tria-sdk/authenticate:', error);
        }
      }else{console.log("window is not defined")}
    };

    importApplication();
  }, []);