@hackless-project/swap

Hackless sandwich protection

The widget that represents functionality for swapping tokens with protection against sandwich attacks.

Preparing

To run the application with a customized widget, add topLevelAwait: true to the bundler experiments configuration.

Usage

Client key for not commercial users at the moment is: 0daee013e2ffb8794f2dd6eb8337c456f7c90cb9caa89979e7e45cfc448babb2

<div id="swap-widget"></div>

import '@hackless-project/swap/dist/style.css';
import { HacklessSwap } from '@hackless-project/swap';

const Swapper = new HacklessSwap(YOUR_CLIENT_KEY);

Swapper.create('#swap-widget');

// to destroy
Swapper.destroy();

API

create(string | HTMLElement): App | never

Will create vue instance and mount it to passed HTML element or selector will execute error if app were created before.

destroy(): void

Unmount active app and remove it from memory.

isAppCreated(): boolean

Check is app already created.

Customizing

Theme

At the moment we use CSS variables to customize widget appearance. The class .hackless-swapper is used as the root.

Styles loading order must be observed for correct respecification of CSS variables. (In example used await to save loading queue)

await import('@hackless-project/swap/dist/style.css');
await import('PATH_TO_YOUR_THEME')

Scss example of theme. (Could be changed in future). Use services like SCSS to CSS to create css theme.

$clr-black-1: #050506;
$clr-black-2: #1d1d25;
$clr-black-3: #555555;
$clr-black-4: #050506CC;

$clr-white-1: #ededed;
$clr-white-2: #EDEDED19;
$clr-white-3: rgba(237, 237, 237, 0.5);

$clr-yellow-1: #ffc224;
$clr-yellow-2: rgba(255, 194, 36, 0.6);

$clr-red-1: #ff4d4f;
$clr-red-2: #FF4D4F4C;

$clr-green-1: #8BC34A;

.hackless-swapper {
  --color-primary: #{$clr-black-1};
  --color-secondary: #{$clr-black-2};
  --color-base: #{$clr-black-3};
  --color-text: #{$clr-white-1};
  --color-error: #{$clr-red-1};
  --color-error-transparent: #{$clr-red-2};
  --color-active: #{$clr-yellow-1};
  --color-success: #{$clr-green-1};

  .h-button {
    &--figure {
      --base-color-background: #{$clr-yellow-1};
      --base-color-text: #{$clr-black-1};
    }

    &--rounded {
      --base-color-text: #{$clr-black-1};
    }

    &--circle {
      --base-color-background: #{$clr-yellow-1};
      --base-color-text: #{$clr-black-1};
    }

    &--plain {
      --base-color-text-active: #{$clr-yellow-1};
      --base-color-text: #{$clr-white-1};
    }

    &--disabled {
      --base-color-background: #{$clr-black-3};
      --base-color-text: #{$clr-white-3};
    }
  }

  .h-buttons-group {
    --base-color-text: #{$clr-white-1};
    --base-color-separator: #{$clr-black-3};
    --base-color-active: #{$clr-yellow-1};
    --base-color-text-active: #{$clr-black-1};
  }

  .h-checkbox {
    --base-color-box-border: #{$clr-black-3};
    --base-color-box-background: #{$clr-black-1};
    --base-color-box-background-active: #{$clr-yellow-1};
    --base-color-icon: #{$clr-black-1};
    --base-color-text: #{$clr-white-1};
  }

  .h-dropdown {
    --base-color-text: #{$clr-white-1};
    --base-color-text-active: #{$clr-yellow-1};
    --base-color-background: #{$clr-black-1};
    --base-color-border: #{$clr-black-3};
  }

  .h-expand-panel {
    --base-color-text: #{$clr-white-1};
  }

  .h-figure {
    --base-color-background: #{$clr-black-1};
    --base-color-background-hover: #{$clr-yellow-1};

    &--base {
      --base-color-border: #{$clr-black-3};
    }

    &--active {
      --base-color-border: #{$clr-yellow-1};
    }

    &--success {
      --base-color-border: #{$clr-green-1};
    }

    &--error {
      --base-color-border: #{$clr-red-1};
    }
  }

  .h-input {
    --base-color-text-label: #{$clr-white-1};
    --base-color-text-input: #{$clr-white-1};
    --base-color-background: #{$clr-black-1};
    --base-color-text-error: #{$clr-red-1};
  }

  .h-lock {
    --base-color-background: #{$clr-black-4};
    --base-color-text: #{$clr-white-1};
  }

  .h-message {
    &--error {
      --base-color-background: #{$clr-red-2};
      --base-color-text: #{$clr-white-1};
      --base-color-icon: #{$clr-red-1};
    }
    &--info {
      --base-color-background: #{$clr-black-3};
      --base-color-text: #{$clr-white-1};
      --base-color-icon: #{$clr-white-1};
    }
    &--warning {
      --base-color-background: #{$clr-yellow-2};
      --base-color-text: #{$clr-white-1};
      --base-color-icon: #{$clr-white-1};
    }
  }

  .h-progress-circle {
    --base-color-outside: #{$clr-black-2};
    --base-color-inside: #{$clr-yellow-1};
  }

  .h-token-logo {
    --base-color-text: #{$clr-black-1};
    --base-color-background: #{$clr-yellow-1};
  }

  .h-virtual-list {
    --base-color-text-item: #{$clr-white-1};
  }

  .hackless-skeleton-loader {
    --base-color-background: #{$clr-black-3};
  }

  .import-token-card {
    --base-color-text: #{$clr-white-1};
    --base-color-active: #{$clr-yellow-1};
  }
}