Merge pull request #12 from pontem-network/feature-LS-1166-fix-styles

Feature ls 1166 fix styles for pontem - wallet

index.ts

@@ -1,8 +1,6 @@
 import { loadWidget } from "./loader";
 export { LiquidSwapWidget } from './main';
 
-import widgetStyles from './src/styles/index.scss?inline';
-
 loadWidget('liquidswap-widget');
 
-export { loadWidget, widgetStyles };
+export { loadWidget };

package.json

@@ -1,6 +1,6 @@
 {
  "name": "@pontem/liquidswap-widget",
- "version": "0.2.7",
+ "version": "0.2.8",
  "homepage": "https://github.com/pontem-network/liquidswap-widget#readme",
  "description": "LiquidSwap widget as custom web component",
  "files": [

src/Swap/SwapContainer.vue

@@ -1,6 +1,6 @@
 <template>
  <div class="container">
- <div class="swap-container">
+ <div class="swap-container" :class="[mainStore.insideNativeWallet.value && 'swap-container-wallet']">
  <form
  class="swap"
  action=""
@@ -40,14 +40,20 @@
  <div class="swap__row">
  <SwapInput mode="to" />
  </div>
- <div v-if="tokensChosen && !curveType" class="swap__row">
+ <div
+ v-if="tokensChosen && !curveType"
+ class="swap__row"
+ :class="[mainStore.insideNativeWallet.value && 'swap__row--extra-padding']">
  <PInlineMessage class="mt-1" :class="'curve-warning'" severity="warn"
  >Caution: make sure the pair you are trading should be stable or
  uncorrelated. i.e USDC/USDT is stable and USDC/BTC is
  uncorrelated</PInlineMessage
  >
  </div>
- <div v-show="tokensChosen && !curveType" class="swap__row">
+ <div
+ v-show="tokensChosen && !curveType"
+ class="swap__row"
+ :class="[mainStore.insideNativeWallet.value && 'swap__row--extra-padding']">
  <CurveSwitch mode="swap" />
  </div>
  <div
@@ -141,15 +147,14 @@ import { CURVE_STABLE_V05, CURVE_STABLE } from '@/constants/constants';
 import { getCurve, getShortCurveFromFull } from '@/utils/contracts';
 import { TVersionType } from "@/types";
 
-
 const mainStore = useStore();
 const poolsStore = usePoolsStore();
 const swapStore = useSwapStore();
 const tokensStore = useTokensStore();
 
-
 const { account } = mainStore;
 const version = computed(() => swapStore.version);
+const insideNativeWallet = computed(() => mainStore.insideNativeWallet.value);
 
 const stableCurve = computed(() => getCurve('stable', version.value));
 const unstableCurve = computed(() => getCurve('uncorrelated', version.value));

src/Swap/SwapInfo.vue

@@ -21,7 +21,7 @@
  </span>
  </div>
  </template>
- <div class="list">
+ <div class="list list--bottom-border">
  <div class="list__item">
  <span>Expected Output</span>
  <span v-if="swap.isUpdatingRate"
@@ -62,7 +62,17 @@
  <span v-if="swap.isUpdatingRate"
  ><i class="pi pi-spin pi-spinner" style="font-size: 12px"
  /></span>
- <span v-else :class="priceImpactClass">{{ priceImpact }}%</span>
+ <span
+ v-else
+ class="swap-info__price-impact-wrapper"
+ :class="priceImpactClass"
+ >
+ <img
+ v-if="priceImpactState !== 'normal'"
+ src="@/assets/alert-white.svg"
+ class="mr-1"
+ /><span class="-white">{{ priceImpact }}%</span></span
+ >
  </div>
  </div>
  </div>
@@ -99,6 +109,7 @@ const slippageToken = computed(() =>
 );
 
 const priceImpact = computed(() => swap.priceImpactFormatted);
+const priceImpactState = computed(() => swap.priceImpactState);
 
 const rateTokens = useCurrencyFormat(1, fromToken, { useBridge: true });
 const outputTokens = useCurrencyFormat(toAmount, toToken, { useBridge: true });
@@ -123,10 +134,10 @@ const activeIndex = computed({
 });
 
 const priceImpactClass = computed(() => {
- return +priceImpact.value < 0.2
- ? '-green'
- : +priceImpact.value < 0.5
- ? '-yellow'
- : '-red';
+ return swap.priceImpactState === 'normal'
+  ? 'swap-info__price-impact-wrapper_success'
+  : swap.priceImpactState === 'warning'
+  ? 'swap-info__price-impact-wrapper_warning'
+  : 'swap-info__price-impact-wrapper_alert';
 });
 </script>

src/Swap/SwapInput.vue

@@ -42,7 +42,7 @@
  Loading balance ...
  </template>
  <template v-else>
- <span v-if="tokenBalance.isExists.value || props.mode === 'from'"
+ <span v-if="isTokenExisted"
  >Balance:
  <span class="cursor-pointer" @click="onClickMaxBalance">{{
  tokenBalance.formatted.value
@@ -104,6 +104,8 @@ const secondaryToken = swapStore[props.mode === 'to' ? 'fromCurrency' : 'toCurre
 
 const tokenBalance = useCurrentAccountBalance(token, { useSuffix: false });
 
+const isTokenExisted = computed(() => tokenBalance.isExists.value);
+
 const isUpdating = computed(() => {
  return props.mode !== swapStore.interactiveField && swapStore.isUpdatingRate;
 });

src/Swap/styles/swapContainer.scss

@@ -8,6 +8,9 @@
  border: none;
  cursor: pointer;
  width: 30px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
 
  .config-icon {
  display: block;
@@ -45,6 +48,51 @@
  margin-bottom: 20px;
 }
 
+.container .swap-container-wallet {
+ @media (max-width: 400px) {
+ background: transparent;
+ position: relative;
+
+ .swap__header {
+ padding: 0;
+ height: 0;
+ > span {
+ display: none;
+ }
+ }
+
+ .swap-input {
+ margin: 0 8px;
+ }
+
+ .swap__settings {
+ position: absolute;
+ top: -70px;
+ right: 64px;
+ z-index: 9;
+
+ button {
+ width: 44px;
+ height: 44px;
+ border-radius: 8px;
+ background: rgba(28, 28, 51, 1);
+
+ &:active {
+ background: #3E3E52;
+ > svg {
+ stroke: rgba(212, 196, 237, 1);
+ }
+ }
+ }
+ }
+
+
+ .swap__row:last-of-type {
+ padding: 0 16px 8px;
+ }
+ }
+}
+
 .carousel-heading {
  font-size: 20px;
  font-weight: 500;
@@ -105,6 +153,11 @@
  &--no-padding {
  padding: 0;
  }
+
+ &--extra-padding {
+ padding-left: 16px;
+ padding-right: 16px;
+ }
  }
 
  &__button {
@@ -117,6 +170,7 @@
  height: 54px;
  font-size: 1.1rem;
  font-weight: 500;
+ background: linear-gradient(90deg, #6E42CA 0%, #8D29C1 100%);
 
  &_warning {
  background: linear-gradient(89.82deg, #e57106 0.08%, #ee5d0c 99.85%);
@@ -125,6 +179,13 @@
  &_alert {
  background: linear-gradient(89.82deg, #d75050 0.08%, #c62828 99.85%);
  }
+
+ transition: all .25s ease-in-out;
+
+ &:enabled:hover {
+ background: linear-gradient(90deg, #8d6ad5, #6f42ca);
+ color: white;
+ }
  }
 
  &__toggle {
@@ -149,4 +210,3 @@
  }
  }
 }
-

src/Swap/styles/swapInfo.scss

@@ -35,6 +35,8 @@
 
 .swap-info-tab {
  .p-accordion-tab {
+ margin-bottom: 0;
+
  &.p-accordion-tab-active {
  .p-accordion-header-link {
  background: #24243a !important;
@@ -97,10 +99,16 @@
  row-gap: 8px;
  padding: 0 16px;
 
+ &--bottom-border {
+ border-bottom: 1px solid #2d2942;
+ padding-bottom: 8px;
+ }
+
  &__item {
  display: flex;
  font-weight: 400;
  font-size: 14px;
+ align-items: center;
 
  span:last-child {
  margin-left: auto;

src/components/ButtonToken/buttonToken.scss

@@ -19,7 +19,7 @@
  font-weight: normal !important;
  }
 
- img {
+ img, .img {
  width: 24px;
  height: 24px;
  margin-right: 0.5rem;

src/components/ContractSwitch/contractSwitch.scss

@@ -1,6 +1,5 @@
 .list__pool-version-row {
- margin-bottom: 0.5rem;
- padding: 0 16px;
+ padding: 0 8px;
  font-size: 15px;
  width: 100%;
  display: flex;

src/components/CurveSwitch/curveSwitch.scss

@@ -8,6 +8,11 @@
  border-radius: 57px;
  width: 100%;
 
+ @media (max-width: 768px) {
+ flex-direction: column;
+ border-radius: 20px;
+ }
+
  &__switch {
  display: flex;
  flex-direction: row;

src/components/ReservesContainer/ReservesContainer.vue

@@ -49,44 +49,6 @@
  </div>
  </PAccordionTab>
  </PAccordion>
-<!-- <div v-if="hasReserves" class="reserves-container">-->
-<!-- <div class="reserves-header">-->
-<!-- <span class="reserves-heading">Currency Reserves</span>-->
-<!-- </div>-->
-<!-- <div class="reserves-content">-->
-<!-- <div class="reserves-row">-->
-<!-- <div class="swap-tokens__symbol">-->
-<!-- <TokenIcon-->
-<!-- :logo="fromTokenEntity?.logo"-->
-<!-- :type="fromTokenEntity?.type"-->
-<!-- class="img"-->
-<!-- size="24"-->
-<!-- />-->
-<!-- {{ titleForTokenSymbol(fromTokenEntity) }}-->
-<!-- </div>-->
-<!-- <span>-->
-<!-- {{ reserveFrom.formatted.value }}-->
-<!-- </span>-->
-<!-- </div>-->
-<!-- <div class="reserves-row">-->
-<!-- <div class="swap-tokens__symbol">-->
-<!-- <TokenIcon-->
-<!-- :logo="toTokenEntity?.logo"-->
-<!-- :type="toTokenEntity?.type"-->
-<!-- class="img"-->
-<!-- size="24"-->
-<!-- />-->
-<!-- {{ titleForTokenSymbol(toTokenEntity) }}-->
-<!-- </div>-->
-<!-- <span-->
-<!-- :class="{-->
-<!-- 'insufficient-reserves': props.type == 'swap' && store.convertError,-->
-<!-- }"-->
-<!-- >{{ reserveTo.formatted.value }}</span-->
-<!-- >-->
-<!-- </div>-->
-<!-- </div>-->
-<!-- </div>-->
 </template>
 
 <script setup lang="ts">

src/components/ReservesContainer/reservesContainer.scss

@@ -3,9 +3,6 @@
  min-height: 50px;
  border-radius: 24px;
  color: white;
- background: var(--surface-card);
- box-shadow: rgb(0 0 0 / 1%) 0px 0px 1px, rgb(0 0 0 / 4%) 0px 4px 8px,
- rgb(0 0 0 / 4%) 0px 16px 24px, rgb(0 0 0 / 1%) 0px 24px 32px;
  margin-bottom: 16px;
 
  .insufficient-reserves {

src/components/Steps/SendTransaction/SubmitTransaction.vue

@@ -77,7 +77,7 @@
  </div>
  </div>
  <div class="dialog-step__footer mt-4">
- <p-button class="justify-content-center w-full" @click="onComplete">
+ <p-button class="justify-content-center swap-tokens__button w-full" @click="onComplete">
  {{ isSuccess ? 'Close' : 'Dismiss' }}
  </p-button>
  </div>

src/components/SwapConfirm/styles/swapPreview.scss

@@ -77,6 +77,12 @@
  justify-content: center;
  border: 0;
  height: 44px;
+ background: linear-gradient(90deg, #6E42CA 0%, #8D29C1 100%);
+
+ &:enabled:hover {
+ background: linear-gradient(90deg, #8d6ad5, #6f42ca);
+ color: white;
+ }
 
  span {
  position: absolute;

src/components/TxSettingsDialog/txSettingsDialog.scss

@@ -43,12 +43,18 @@
  height: 32px;
  padding: 3px 16px;
  font-size: 0.875rem;
+ background: linear-gradient(90deg, #6E42CA 0%, #8D29C1 100%);
+ border: none;
+
+
  &--action {
  height: 32px;
  padding: 3px 16px;
  font-size: 0.875rem;
- background: #43395B;
- border: none;
+ }
+ &:enabled:hover {
+ background: linear-gradient(90deg, #8d6ad5, #6f42ca);
+ color: white;
  }
  }