You're Invited:Meet the Socket Team at BlackHat and DEF CON in Las Vegas, Aug 7-8.RSVP
Socket
Socket
Sign inDemoInstall

mystic-sdk-1

Package Overview
Dependencies
Maintainers
1
Versions
195
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

mystic-sdk-1

Add our swap module as a React component


Version published
Weekly downloads
22
decreased by-86.34%
Maintainers
1
Created
Weekly downloads
 

Readme

Source

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",

FAQs

Package last updated on 16 Apr 2024

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc