Embeddable Components

Latest Version: 1.1.4

Usage

Use in any webpage!

In the head, add...

<script>
  window.tlConfig = {
    mode: "light", // or "dark"
    appName: "My Cool App",
    appDescription: "My cool app's description",
    walletConnectProjectId: "wallet-connect-id",
    rpcUrls: {
      ethereum: "", // defaults to https://ethereum-rpc.publicnode.com
      shape: "",    // defaults to https://mainnet.shape.network
      base: "",     // defaults to https://base-rpc.publicnode.com
      arbitrum: ""  // defaults to https://arbitrum-one-rpc.publicnode.com
    }
  }
</script>
<script type="module" crossorigin src="https://cdn.transientlabs.xyz/embeds/v[version]/index.js"></script>
<link rel="stylesheet" crossorigin href="https://cdn.transientlabs.xyz/embeds/v[version]/index.css">

In the body add...

<style>
  /* add any style overrides here*/
</style>
<tl-connect-button variant="outline"></tl-connect-button>
<tl-auction chain-id="8453" contract-address="0x2b4b2d47c8db371b006e3df14245c12193a185dc" token-id="1"
  auction-house-address="0x6f66b95a0c512f3497fb46660e0bc3b94b989f8d"></tl-auction>

Style Overrides

You need to add the style overrides in the body You'll override css variables for main colors and style. There are also classes that you can override for more control (advanced).

CSS Variables:

:root {
  --radius: 0.5rem;
  --title-font: "Inter";
  --body-font: "Inter";
  --mono-font: "Roboto Mono";
  --border-width: 2px;
  --background: oklch(1 0 0);
  --foreground: oklch(0.141 0.005 285.823);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.141 0.005 285.823);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.141 0.005 285.823);
  --primary: oklch(0.21 0.006 285.885);
  --primary-foreground: oklch(0.985 0 0);
  --secondary: oklch(0.967 0.001 286.375);
  --secondary-foreground: oklch(0.21 0.006 285.885);
  --muted: oklch(0.967 0.001 286.375);
  --muted-foreground: oklch(0.552 0.016 285.938);
  --accent: oklch(0.967 0.001 286.375);
  --accent-foreground: oklch(0.21 0.006 285.885);
  --destructive: oklch(0.577 0.245 27.325);
  --border: oklch(0.21 0.006 285.885);
  --input: oklch(0.92 0.004 286.32);
  --dialog: oklch(0.21 0.006 285.885);
  --ring: oklch(0.705 0.015 286.067);
  --chart-1: oklch(0.646 0.222 41.116);
  --chart-2: oklch(0.6 0.118 184.704);
  --chart-3: oklch(0.398 0.07 227.392);
  --chart-4: oklch(0.828 0.189 84.429);
  --chart-5: oklch(0.769 0.188 70.08);
  --sidebar: oklch(0.985 0 0);
  --sidebar-foreground: oklch(0.141 0.005 285.823);
  --sidebar-primary: oklch(0.21 0.006 285.885);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.967 0.001 286.375);
  --sidebar-accent-foreground: oklch(0.21 0.006 285.885);
  --sidebar-border: oklch(0.92 0.004 286.32);
  --sidebar-ring: oklch(0.705 0.015 286.067);
}

.dark {
  --background: oklch(0.141 0.005 285.823);
  --foreground: oklch(0.985 0 0);
  --card: oklch(0.21 0.006 285.885);
  --card-foreground: oklch(0.985 0 0);
  --popover: oklch(0.21 0.006 285.885);
  --popover-foreground: oklch(0.985 0 0);
  --primary: oklch(0.92 0.004 286.32);
  --primary-foreground: oklch(0.21 0.006 285.885);
  --secondary: oklch(0.274 0.006 286.033);
  --secondary-foreground: oklch(0.985 0 0);
  --muted: oklch(0.274 0.006 286.033);
  --muted-foreground: oklch(0.705 0.015 286.067);
  --accent: oklch(0.274 0.006 286.033);
  --accent-foreground: oklch(0.985 0 0);
  --destructive: oklch(0.704 0.191 22.216);
  --border: oklch(0.985 0 0);
  --input: oklch(1 0 0 / 15%);
  --dialog: oklch(0.985 0 0);
  --ring: oklch(0.552 0.016 285.938);
  --chart-1: oklch(0.488 0.243 264.376);
  --chart-2: oklch(0.696 0.17 162.48);
  --chart-3: oklch(0.769 0.188 70.08);
  --chart-4: oklch(0.627 0.265 303.9);
  --chart-5: oklch(0.645 0.246 16.439);
  --sidebar: oklch(0.21 0.006 285.885);
  --sidebar-foreground: oklch(0.985 0 0);
  --sidebar-primary: oklch(0.488 0.243 264.376);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.274 0.006 286.033);
  --sidebar-accent-foreground: oklch(0.985 0 0);
  --sidebar-border: oklch(1 0 0 / 10%);
  --sidebar-ring: oklch(0.552 0.016 285.938);
}

Custom Class Overrides:

.tl-address-display
.tl-dialog-overlay
.tl-dialog-content
.tl-dialog-header
.tl-dialog-footer
.tl-dialog-title
.tl-dialog-description
.tl-dialog-action
.tl-dialog-cancel
.tl-dialog-close
.tl-input
.tl-title-3
.tl-title-4
.tl-paragraph
.tl-caption
.tl-button-default
.tl-button-destructive
.tl-button-outline
.tl-button-secondary
.tl-button-ghost
.tl-button-link
.tl-button-size-default
.tl-button-size-sm
.tl-button-size-lg
.tl-button-size-icon
.tl-connect-button
.tl-auction-root
.tl-auction-top-section
.tl-auction-price-label
.tl-auction-price-display
.tl-auction-highest-bidder-section
.tl-auction-highest-bidder-display
.tl-auction-button-group
.tl-auction-submit-bid-button
.tl-auction-buy-now-button
.tl-auction-settle-button
.tl-auction-connect-button
.tl-auction-duration-caption
.tl-auction-bottom-text-section
.tl-auction-view-on-transient-text
.tl-auction-bids-caption
.tl-auction-history-title
.tl-auction-history-group
.tl-auction-history-bid
.tl-auction-history-list-entry
.tl-auction-history-cancel-entry
.tl-auction-history-bid-entry
.tl-auction-history-settle-entry
.tl-auction-history-buy-now-entry
.tl-auction-empty-state-container
.tl-auction-bid-title
.tl-auction-bid-root
.tl-auction-bid-input-group
.tl-auction-bid-input
.tl-auction-bid-button
.tl-auction-min-bid
.tl-auction-tx-title
.tl-auction-tx-dialog-root
.tl-auction-tx-spinner
.tl-auction-tx-text
.tl-auction-countdown-root
.tl-auction-countdown-text-group
.tl-auction-countdown-label
.tl-auction-countdown-time

Custom Events

You can listen to custom events that get fired by the apps in order to make custom logic. Each event has custom data passed in the detail field

tl-wallet-connect
tl-wallet-disconnect
tl-auction-bid
tl-buy-now
tl-auction-settle

PreviousOnchain Art NextSupported Blockchains

Last updated 1 day ago