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)

Create a .npmrc and add the following token:

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

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 -

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"
import "@tria-sdk/authenticate/dist/index.css"

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

Add craco to your devDependencies using the following npm command:

npm i @craco/craco --save-dev

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)

Create a .npmrc and add the following token:

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

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 -

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 }
)

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

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)

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",
    },
};

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 -

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 :

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();
  }, []);

PreviousGetting Started NextDeployment

Last updated 8 months ago

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

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

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; } } }

"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"

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(); }, []);