If your app is not using React, have no fear, the web component version of the Skip:Go Widget is here!

In order to use the web-component, you can either import it from @skip-go/widget-web-component or use a script tag or cdn link.

It is recommended to lazy load this javascript bundle as it comes pre-bundled with all of its dependencies. This means it’ll take some time to load, especially if including it directly inside your bundle in a dev environment.

If you’re importing the package via npm you will need to make sure that node has enough memory allocated to it to be able to load it using something like this NODE_OPTIONS=--max-old-space-size=32384

import('@skip-go/widget-web-component');

or

<body>
  <!-- This is the recommended way to import it via script tag -->
  <script
    async
    src="https://unpkg.com/@skip-go/widget-web-component/build/index.js"
    type="module"
  ></script>
</body>

Voilà! you can now use the swap-widget web-component as <swap-widget></swap-widget>. The props for the web component are the same as SwapWidgetProps except that all props are passed to the web-component via attributes in kebab-case as strings or stringified objects. Example below:

<div style="width:450px;height:820px;">
  <swap-widget
    theme='{
      "backgroundColor": "#191A1C",
      "textColor": "#E6EAE9",
      "borderColor": "#363B3F",
      "brandColor": "#FF4FFF",
      "highlightColor": "#1F2022"
    }'
    default-route='{
      "srcChainID": "osmosis-1",
      "srcAssetDenom": "ibc/1480b8fd20ad5fcae81ea87584d269547dd4d436843c1d20f15e00eb64743ef4"
    }'
  ></swap-widget>
</div>
Configuration OptionsExperimental Features