React.js

Installing Tria SDK on React.js, on all latest major versions.

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

.npmrc

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

2. Add token to the meta tag in index.html at the root level of your app (Local):

This token is origin specific
Below is the one mentioned for http://localhost:3000

Meta tag in index.html

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

2.1 Add the token to your web app on a custom domain.

Head to https://developer.chrome.com/origintrials/#/view_trial/-8517432795264450559
Register for DisableThirdPartyStoragePartitioning Trial.
Refer to the image below.

Registering the token

3. Inside App.js:

App.js

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

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

4. Inside your login component:

Login Component

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

5. In your login component, add this inside return:

Return logic, inside of the login component

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

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

devDependencies

npm i @craco/craco --save-dev

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

Craco.config.js file in the root folder

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

Need support? Join our Discord, or send us an email at [email protected].