Using the Iframe Theme

You can customize the iframe integration by passing a theme configuration along with other parameters. Here is an example of how to generate a query string for iframe integration:

Generate

const queryString = generateIframeQueryString({
  name: "brandName",
  [TokenSlugEnums.MATIC]: "0x4557B18E779944BFE9d78A672452331C186a9f48",
  [TokenSlugEnums.LIVEPEER]: "0x4557B18E779944BFE9d78A672452331C186a9f48",
  [TokenSlugEnums.GRAPH]: "0x4557B18E779944BFE9d78A672452331C186a9f48",
  disabledTabs: [TabEnum.SWAP],
  tokens: [TokenSlugEnums.MATIC, TokenSlugEnums.LIVEPEER, TokenSlugEnums.GRAPH],
});

Example Use Case

Here is a professional example of how to integrate the Tenderize SDK iframe into your application. This demonstrates generating a query string for the iframe and embedding it within a React component, including how to add a theme to your iframe.

App.tsx

function App() {
  const queryString = generateIframeQueryString({
    name: "brandName",
    [TokenSlugEnums.MATIC]: "0x4557B18E779944BFE9d78A672452331C186a9f48",
    [TokenSlugEnums.LIVEPEER]: "0x4557B18E779944BFE9d78A672452331C186a9f48",
    [TokenSlugEnums.GRAPH]: "0x4557B18E779944BFE9d78A672452331C186a9f48",
    disabledTabs: [TabEnum.SWAP],
    tokens: [
      TokenSlugEnums.MATIC,
      TokenSlugEnums.LIVEPEER,
      TokenSlugEnums.GRAPH,
    ],
  });
  return (
    <iframe
      src={`https://sdk-sdk.vercel.app?${queryString}`}
      height="660px"
      width="100vw"
      style={{
        border: 0,
        width: "100%",
        minWidth: "300px",
      }}
    />
  );
}

Providing Your Theme Object

Once you pass brandName, provide us with your theme object, and we will store it in our database.

Example Theme Object

To customize the appearance of your SDK theme, provide a theme object that defines the styles. Below is an example theme object:

Theme

export const brandName = {
  spacing: "16px",
  fonts: {
    name: "'Lato', sans-serif",
    familyUrl:
      "https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap",
  },
  colors: {
    lightMode: {
      border: "#eee",
      background: "#ffffff",
      midnight: "#303030",
      white: "#ffffff",
      primary: {
        DEFAULT: "#fd3f0f",
        accent: "#ffffff",
        foreground: "#3d3d3d",
        "500": "#fb923c",
        "400": "#fb923c",
        "300": "#fdba74",
        "200": "#fed7aa",
        "100": "#ffedd5",
      },
      secondary: {
        DEFAULT: "#d1d5db",
        foreground: "#9ca3af",
        accent: "#ffffff",
        "500": "#404040",
      },
      success: {
        DEFAULT: "#f0fdf4",
        foreground: "#166534",
      },
      card: {
        DEFAULT: "#f4f4f5",
      },
      disabled: {
        DEFAULT: "#f3f4f6",
        foreground: "#9ca3af",
      },
      panel: {
        DEFAULT: "#fff7ed",
        foreground: "#FED7CB",
      },
      badge: {
        error: "#ffe4e6",
        errorForeground: "#f87171",
        info: "#fed7aa",
        infoForeground: "#ea580c",
      },
    },
    darkMode: {
      border: "#eee",
      background: "#303030",
      midnight: "#000000",
      white: "#ffffff",
      primary: {
        DEFAULT: "#fd3f0f",
        accent: "#ffffff",
        foreground: "#3d3d3d",
        "500": "#fb923c",
        "400": "#fb923c",
        "300": "#fdba74",
        "200": "#fed7aa",
        "100": "#ffedd5",
      },
      secondary: {
        DEFAULT: "#d1d5db",
        foreground: "#9ca3af",
        accent: "#ffffff",
        "500": "#404040",
      },
      success: {
        DEFAULT: "#f0fdf4",
        foreground: "#166534",
      },
      card: {
        DEFAULT: "#f4f4f5",
      },
      disabled: {
        DEFAULT: "#f3f4f6",
        foreground: "#9ca3af",
      },
      panel: {
        DEFAULT: "#fff7ed",
        foreground: "#FED7CB",
      },
      badge: {
        error: "#ffe4e6",
        errorForeground: "#f87171",
        info: "#fed7aa",
        infoForeground: "#ea580c",
      },
    },
  },
};

For more detailed information on theming, refer to the config page in the documentation.

Note:

⚠️

The example provided is for illustration purposes and may need to be adjusted to fit your specific application requirements.

Default Theme