npm package: @hackless-project/swap
Description: Widget to swap tokens via private mining. That should protect users from sandwich attacks.
Latest version: 3.1.1

# 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`

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

```js
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)
```js
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](https://jsonformatter.org/scss-to-css) to create css theme.

```scss
$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};
  }
}
```