Mystic-sdk-1 NPM

Mystic Frontend Swap SDK

Add our swap module as a React component

Installation

npm i mystic-sdk-1
yarn add mystic-sdk-1

Setup

To add the Mystic frontend SDK to your website or application, all you need to do is add our React component to your website and associate your Bearer token to it.

First, let's add the React component to your website's UI. Assuming it's a React app, here's what you would add to the page you want the component to be in:

import React from 'react';
import { MysticSdk } from 'mystic-sdk-1';

const SdkPage = () => {
  return (
    <div className="sdk_page">
      <MysticSdk />
    </div>
  );
};

export default SdkPage;

Great, you've added the component! Now, to authenticate your API calls, you'll need to add your Bearer token as a token prop in the component as well. To do so, retrieve your Bearer token from your Admin Dashboard and then add it to your env file / where you are storing your credentials. Once you have done so, import the Bearer token and then pass the token prop in the component, like so:

import React from 'react';
import { MysticSdk } from 'mystic-sdk-1';
import BEARER_TOKEN from '../path';

const SdkPage = () => {
  return (
    <div className="sdk_page">
      <MysticSdk token={BEARER_TOKEN} />
    </div>
  );
};

export default SdkPage;

If you have followed these steps correctly, you will see the Mystic swap module appear on your webpage. You can see it here, it will look like this: Screenshot of swap sdk

Customisation

To change the styles of the MysticSdk component to match your branding, you simply have to override the CSS classes wrapping the component and add your own style to them.

All classes are prefixed with mystic_sdk_, so they don't override your other classes.

Here is an example of how you would change the colour of your listing screen to red:

.mystic_sdk_listing_screen: {
  background-color: red;
}

Happy coding!

// "@imtbl/imx-sdk": "^3.8.0", // "@imtbl/sdk": "^1.23.3",

@emotion/react @emotion/styled @mui/lab @mui/material @mui/types @mui/x-date-pickers @opensea/seaport-js @safe-global/safe-apps-provider @safe-global/safe-apps-sdk @web3-onboard/blocto @web3-onboard/coinbase @web3-onboard/core @web3-onboard/dcent @web3-onboard/enkrypt @web3-onboard/frame @web3-onboard/frontier @web3-onboard/gnosis @web3-onboard/infinity-wallet @web3-onboard/injected-wallets @web3-onboard/ledger @web3-onboard/mew-wallet @web3-onboard/phantom @web3-onboard/taho @web3-onboard/walletconnect @web3-onboard/xdefi @web3-onboard/zeal alchemy-sdk autoprefixer axios crypto-browserify cssnano dayjs emotion-theming ethers formik fs https-browserify moralis os-browserify path-browserify postcss postcss-flexbugs-fixes pretty-bytes process react-blockies react-copy-to-clipboard react-icons react-material-ui-carousel react-toastify react18-input-otp rollup-plugin-import-css stream-browserify stream-http uuid web3 web3-validator yup

@everything-registry/sub-chunk-2238

11 days ago

11 days ago

16 days ago

26 days ago

25 days ago

26 days ago

26 days ago

1 month ago

1 month ago

1 month ago

1 month ago

1 month ago

1 month ago

2 months ago

2 months ago

2 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

5 months ago

5 months ago

5 months ago

5 months ago

6 months ago

5 months ago

6 months ago

5 months ago

5 months ago

5 months ago

6 months ago

7 months ago

5 months ago

6 months ago

7 months ago

5 months ago

6 months ago

6 months ago

5 months ago

6 months ago

6 months ago

6 months ago

7 months ago

5 months ago

6 months ago

7 months ago

6 months ago

7 months ago

5 months ago

5 months ago

6 months ago

5 months ago

6 months ago

6 months ago

5 months ago

5 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

5 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago