skalenetwork / docs.skale.space

https://docs.skale.space/
MIT License
1 stars 2 forks source link

Metaport #58

Closed manuelbarbas closed 5 months ago

manuelbarbas commented 10 months ago

Metaport

Metaport is a Javascript/Typescript customizable IMA bridge widget embeddable into any web application. It enables SKALE network developers an easy way to guide users through executing IMA bridge transactions throughout the SKALE Network and with Ethereum.

Some of the possible usages are:

Screenshot 2023-12-22 at 16 35 05

To test out a playground environment, check out https://testnet.portal.skale.space/

Implementation Example

  1. Package Install

    npm install --save @skalenetwork/metaport@1.1.0-beta.0
  2. Implementation

You can import Metaport into any modern web application (Vue/React/Angular/etc). Add empty div with metaport id in the root page of your application:

<div id='metaport'></div>

Import Metaport library and init the object:

import { Metaport } from '@skalenetwork/metaport';

const metaport = new Metaport(METAPORT_OPTIONS);
  1. Configure Metaport Options

====

Implementation in SSR (Server-Side Rendering)

Metaport has browser-only build. To use it in an application that uses server-side rendering you need to adapt it using trick described here.

Here is an example of Metaport import & usage in Next.js app with SSR:

// in react component

const [metaport, setMetaport] = React.useState();

async function loadMetaport() {
    const Metaport = (await import('@skalenetwork/metaport')).Metaport;
    setMetaport(new Metaport({
      openOnLoad: true,
      skaleNetwork: 'staging',
      chains: ['mainnet', 'chainName1'],
      tokens: {'mainnet': {'eth': {}}}
    }));
}

useEffect(() => {
    loadMetaport();
}, []);

useEffect(() => {
    if (metaport) {
      console.log('metaport widget initialized');
    }
}, [metaport]);

Example Metaport Options

const metaport = new Metaport({
    openOnLoad: true, // Open Metaport on load (optional, default = false)
    openButton: false, // Show open/close action button (optional, default = true)
    autoLookup: false, // Automatic token lookup for M2S tokens (default = true)
    mainnetEndpoint: MAINNET_ENDPOINT, // Ethereum Mainnet endpoint, required only for M2S or S2M transfers (optional, default = null)
    skaleNetwork: 'staging3', // SKALE network that will be used - mainnet, staging, or staging3 (optional, default = mainnet)
    debug: false, // Enable debug mode (optional, default = false)
    chains: [ // List of SKALE Chains that will be available in the Metaport UI (default = [])
        'chainName1',
        'chainName2',
        'chainName3'
    ],
    chainsMetadata: { // Chain name aliases that will be displayed in the UI (optional, default = {})
        'chainName1': {
            alias: 'Europa SKALE Chain', // optional
            minSfuelWei: '27000000000000', // optional
            faucetUrl: '[FAUCET_URL]' // optional
        },
        ...
    },
    tokens: { // List of tokens that will be available in the Metaport UI (default = {})
        'chainName2': { // chain name where token origin deployed (mainnet or SKALE Chain name)
            'erc20': { // token type (erc20 and eth are supported)
                '_[TOKEN_SYMBOL]_[TOKEN_ORIGIN_ADDRESS]': { // token keyname (composed from token symbol and origin token address)
                    'name': 'TOKEN_NAME1', // token display name
                    'address': '0x0357', // token origin address
                    'symbol': '[TOKEN_SYMBOL]' // token symbol
                    'cloneSymbol': 'CTST' // optional, symbol of the clone token
                    'iconUrl': 'https://example.com/my_token_icon.png', // optional
                    'decimals': '6' // optional (default = '18')
                }               
            }
        }
    },
    theme: { // custom widget theme (default = dark SKALE theme)
        primary: '#00d4ff', // primary accent color for action buttons
        background: '#0a2540', // background color
        mode: 'dark' // theme type - dark or light
    }
});

Other Examples

See https://github.com/Dirt-Road-Development/skale-metaport-demo-cra

manuelbarbas commented 10 months ago

Missing functions section

manuelbarbas commented 10 months ago

What is: Tool Language: Javascript, Typescript Target: Web