Metaport

[manuelbarbas]

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:

• Guide users through transferring ERC-20 tokens between your dApp and a dApp on another SKALE chain.
• Guide users through multi-step wraps and transfers between Ethereum, the Europa liquidity Hub, and the Calypso NFT Hub.
• Allow users to bridge tokens from your game on the Nebula Gaming Hub to the Ruby Exchange DEX on Europa Hub.
• Help users quickly unwrap stuck tokens on various chains.

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

3. Configure Metaport Options

====

• You can skip almost all initialization options and set available tokens, chains and theme after Metaport initialization.

• When possible, use bridge configurations below. Otherwise, pay close attention to the tokenKeyname and be sure to match it closely across chains.
  ====

• For custom bridge configurations, see xref:_example_metaport_options[Example Metaport Options section below].

• For applying already used bridge configurations, use the following network configs:
  ** For staging, use https://github.com/skalenetwork/bridge-ui/blob/main/env/staging/metaportConfig.json
  ** For mainnet, use https://github.com/skalenetwork/bridge-ui/blob/main/env/mainnet/metaportConfig.json

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]

Missing functions section

[manuelbarbas]

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