From 5b424306cbe2fff488493dd0915ddbaed20b2b81 Mon Sep 17 00:00:00 2001
From: Dmitry Kuksenko <lusdjke@gmail.com>
Date: Mon, 3 Apr 2023 12:06:06 +0300
Subject: [PATCH 1/7] feat(widget): LS-1166 fix styles

---
 index.ts                                      |  4 +-
 src/Swap/SwapContainer.vue                    |  4 +-
 src/Swap/styles/swapContainer.scss            |  1 +
 src/Swap/styles/swapInfo.scss                 |  2 +
 .../ReservesContainer/ReservesContainer.vue   | 38 -------------------
 tsconfig.json                                 |  2 -
 6 files changed, 6 insertions(+), 45 deletions(-)

diff --git a/index.ts b/index.ts
index d9abdbf..ff65dd8 100644
--- a/index.ts
+++ b/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 };
\ No newline at end of file
+export { loadWidget };
\ No newline at end of file
diff --git a/src/Swap/SwapContainer.vue b/src/Swap/SwapContainer.vue
index 15fe969..58f8c64 100644
--- a/src/Swap/SwapContainer.vue
+++ b/src/Swap/SwapContainer.vue
@@ -73,7 +73,7 @@
             v-if="!connected"
             type="submit"
             tabindex="5"
-            class="swap__button is-connect"
+            class="swap__button is-connect p-button-primary"
           >
             <span>Connect Wallet</span>
           </p-button>
@@ -81,7 +81,7 @@
             v-else
             type="submit"
             tabindex="5"
-            class="swap__button"
+            class="swap__button p-button-primary"
             :class="[{ 'p-disabled': buttonState.disabled }, priceImpactClass]"
             :disabled="buttonState.disabled"
           >
diff --git a/src/Swap/styles/swapContainer.scss b/src/Swap/styles/swapContainer.scss
index 008106d..63b2ab5 100644
--- a/src/Swap/styles/swapContainer.scss
+++ b/src/Swap/styles/swapContainer.scss
@@ -117,6 +117,7 @@
     height: 54px;
     font-size: 1.1rem;
     font-weight: 500;
+    //background-image: linear-gradient(90deg,#6039b0,#8d29c1 30.44%);
 
     &_warning {
       background: linear-gradient(89.82deg, #e57106 0.08%, #ee5d0c 99.85%);
diff --git a/src/Swap/styles/swapInfo.scss b/src/Swap/styles/swapInfo.scss
index 92f3ace..d061f81 100644
--- a/src/Swap/styles/swapInfo.scss
+++ b/src/Swap/styles/swapInfo.scss
@@ -65,6 +65,8 @@
       padding: 0;
       border: none;
     }
+
+    margin-bottom: 0;
   }
 
   &__header {
diff --git a/src/components/ReservesContainer/ReservesContainer.vue b/src/components/ReservesContainer/ReservesContainer.vue
index 89da5fa..29431d1 100644
--- a/src/components/ReservesContainer/ReservesContainer.vue
+++ b/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">
diff --git a/tsconfig.json b/tsconfig.json
index 2d8a05d..0049c12 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -4,7 +4,6 @@
     "target": "esnext",
     "module": "es2020",
     "strict": true,
-    "jsx": "preserve",
     "moduleResolution": "node",
     "skipLibCheck": true,
     "esModuleInterop": true,
@@ -16,7 +15,6 @@
     "noImplicitAny": true /* Raise error on expressions and declarations with an implied 'any' type. */,
     "strictNullChecks": true /* Enable strict null checks. */,
     "strictFunctionTypes": true /* Enable strict checking of function types. */,
-    "noUnusedLocals": true /* Report errors on unused locals. */,
     "noUnusedParameters": true /* Report errors on unused parameters. */,
     "noImplicitReturns": true /* Report error when not all code paths in function return a value. */,
     "noFallthroughCasesInSwitch": true /* Report errors for fallthrough cases in switch statement. */,

From a605f10048f42aed4612ff34da8e529f9a409095 Mon Sep 17 00:00:00 2001
From: Dmitry Kuksenko <lusdjke@gmail.com>
Date: Mon, 3 Apr 2023 17:42:49 +0300
Subject: [PATCH 2/7] feat(widget): LS-1166 fix styles

---
 src/Swap/SwapContainer.vue                         | 3 ++-
 src/Swap/styles/swapContainer.scss                 | 6 +++++-
 src/Swap/styles/swapInfo.scss                      | 4 ++--
 src/components/SwapConfirm/styles/swapPreview.scss | 1 +
 4 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/src/Swap/SwapContainer.vue b/src/Swap/SwapContainer.vue
index 58f8c64..4b5c2e4 100644
--- a/src/Swap/SwapContainer.vue
+++ b/src/Swap/SwapContainer.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="container">
-    <div class="swap-container">
+    <div class="swap-container {{ insideNativeWallet && 'swap-container-wallet' }} ">
       <form
         class="swap"
         action=""
@@ -150,6 +150,7 @@ const tokensStore = useTokensStore();
 
 const { account } = mainStore;
 const version = computed(() => swapStore.version);
+const insideNativeWallet = computed(() => mainStore.insideNativeWallet);
 
 const stableCurve = computed(() => getCurve('stable', version.value));
 const unstableCurve = computed(() => getCurve('uncorrelated', version.value));
diff --git a/src/Swap/styles/swapContainer.scss b/src/Swap/styles/swapContainer.scss
index 63b2ab5..5a96b1e 100644
--- a/src/Swap/styles/swapContainer.scss
+++ b/src/Swap/styles/swapContainer.scss
@@ -45,6 +45,10 @@
   margin-bottom: 20px;
 }
 
+.swap-container-wallet {
+  background: transparent;
+}
+
 .carousel-heading {
   font-size: 20px;
   font-weight: 500;
@@ -117,7 +121,7 @@
     height: 54px;
     font-size: 1.1rem;
     font-weight: 500;
-    //background-image: linear-gradient(90deg,#6039b0,#8d29c1 30.44%);
+    background: linear-gradient(90deg, #6E42CA 0%, #8D29C1 100%);
 
     &_warning {
       background: linear-gradient(89.82deg, #e57106 0.08%, #ee5d0c 99.85%);
diff --git a/src/Swap/styles/swapInfo.scss b/src/Swap/styles/swapInfo.scss
index d061f81..3e14673 100644
--- a/src/Swap/styles/swapInfo.scss
+++ b/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;
@@ -65,8 +67,6 @@
       padding: 0;
       border: none;
     }
-
-    margin-bottom: 0;
   }
 
   &__header {
diff --git a/src/components/SwapConfirm/styles/swapPreview.scss b/src/components/SwapConfirm/styles/swapPreview.scss
index 6a7ebca..018412d 100644
--- a/src/components/SwapConfirm/styles/swapPreview.scss
+++ b/src/components/SwapConfirm/styles/swapPreview.scss
@@ -77,6 +77,7 @@
     justify-content: center;
     border: 0;
     height: 44px;
+    background: linear-gradient(90deg, #6E42CA 0%, #8D29C1 100%);
 
     span {
       position: absolute;

From 3e8e9064a42ada8a3473aa3d82874e487d189e4a Mon Sep 17 00:00:00 2001
From: Dmitry Kuksenko <lusdjke@gmail.com>
Date: Mon, 3 Apr 2023 17:49:39 +0300
Subject: [PATCH 3/7] feat(widget): LS-1166 fix styles

---
 src/Swap/SwapInfo.vue                         | 23 ++++++++++++++-----
 .../ContractSwitch/contractSwitch.scss        |  2 +-
 2 files changed, 18 insertions(+), 7 deletions(-)

diff --git a/src/Swap/SwapInfo.vue b/src/Swap/SwapInfo.vue
index 9f556f9..6c2c058 100644
--- a/src/Swap/SwapInfo.vue
+++ b/src/Swap/SwapInfo.vue
@@ -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>
diff --git a/src/components/ContractSwitch/contractSwitch.scss b/src/components/ContractSwitch/contractSwitch.scss
index 9289668..8fd968c 100644
--- a/src/components/ContractSwitch/contractSwitch.scss
+++ b/src/components/ContractSwitch/contractSwitch.scss
@@ -1,6 +1,6 @@
 .list__pool-version-row {
   margin-bottom: 0.5rem;
-  padding: 0 16px;
+  padding: 0 8px;
   font-size: 15px;
   width: 100%;
   display: flex;

From d6c87f95b4f5ab41577668269a64bee4ca337909 Mon Sep 17 00:00:00 2001
From: Dmitry Kuksenko <lusdjke@gmail.com>
Date: Mon, 3 Apr 2023 18:18:00 +0300
Subject: [PATCH 4/7] feat(widget): LS-1166 fix buttons colors

---
 src/Swap/SwapContainer.vue                            |  4 ++--
 src/Swap/styles/swapContainer.scss                    |  8 +++++++-
 src/components/SwapConfirm/styles/swapPreview.scss    |  5 +++++
 src/components/TxSettingsDialog/txSettingsDialog.scss | 10 ++++++++--
 4 files changed, 22 insertions(+), 5 deletions(-)

diff --git a/src/Swap/SwapContainer.vue b/src/Swap/SwapContainer.vue
index 4b5c2e4..fdf5894 100644
--- a/src/Swap/SwapContainer.vue
+++ b/src/Swap/SwapContainer.vue
@@ -73,7 +73,7 @@
             v-if="!connected"
             type="submit"
             tabindex="5"
-            class="swap__button is-connect p-button-primary"
+            class="swap__button is-connect"
           >
             <span>Connect Wallet</span>
           </p-button>
@@ -81,7 +81,7 @@
             v-else
             type="submit"
             tabindex="5"
-            class="swap__button p-button-primary"
+            class="swap__button"
             :class="[{ 'p-disabled': buttonState.disabled }, priceImpactClass]"
             :disabled="buttonState.disabled"
           >
diff --git a/src/Swap/styles/swapContainer.scss b/src/Swap/styles/swapContainer.scss
index 5a96b1e..6fc9f0f 100644
--- a/src/Swap/styles/swapContainer.scss
+++ b/src/Swap/styles/swapContainer.scss
@@ -130,6 +130,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 {
@@ -154,4 +161,3 @@
     }
   }
 }
-
diff --git a/src/components/SwapConfirm/styles/swapPreview.scss b/src/components/SwapConfirm/styles/swapPreview.scss
index 018412d..1eabae9 100644
--- a/src/components/SwapConfirm/styles/swapPreview.scss
+++ b/src/components/SwapConfirm/styles/swapPreview.scss
@@ -79,6 +79,11 @@
     height: 44px;
     background: linear-gradient(90deg, #6E42CA 0%, #8D29C1 100%);
 
+    &:enabled:hover {
+      background: linear-gradient(90deg, #8d6ad5, #6f42ca);
+      color: white;
+    }
+
     span {
       position: absolute;
       margin: auto;
diff --git a/src/components/TxSettingsDialog/txSettingsDialog.scss b/src/components/TxSettingsDialog/txSettingsDialog.scss
index faccc84..9c0933b 100644
--- a/src/components/TxSettingsDialog/txSettingsDialog.scss
+++ b/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;
     }
   }
 

From 91fe545860910f3d6fc5dd3b2892eaaebf560468 Mon Sep 17 00:00:00 2001
From: Dmitry Kuksenko <lusdjke@gmail.com>
Date: Mon, 3 Apr 2023 18:44:50 +0300
Subject: [PATCH 5/7] feat(widget): LS-1166 fix buttons colors

---
 src/Swap/SwapInfo.vue                                      | 2 +-
 src/Swap/styles/swapInfo.scss                              | 6 ++++++
 src/components/ContractSwitch/contractSwitch.scss          | 1 -
 src/components/Steps/SendTransaction/SubmitTransaction.vue | 2 +-
 4 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/src/Swap/SwapInfo.vue b/src/Swap/SwapInfo.vue
index 6c2c058..b90911c 100644
--- a/src/Swap/SwapInfo.vue
+++ b/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"
diff --git a/src/Swap/styles/swapInfo.scss b/src/Swap/styles/swapInfo.scss
index 3e14673..d586c4b 100644
--- a/src/Swap/styles/swapInfo.scss
+++ b/src/Swap/styles/swapInfo.scss
@@ -99,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;
diff --git a/src/components/ContractSwitch/contractSwitch.scss b/src/components/ContractSwitch/contractSwitch.scss
index 8fd968c..c747f2e 100644
--- a/src/components/ContractSwitch/contractSwitch.scss
+++ b/src/components/ContractSwitch/contractSwitch.scss
@@ -1,5 +1,4 @@
 .list__pool-version-row {
-  margin-bottom: 0.5rem;
   padding: 0 8px;
   font-size: 15px;
   width: 100%;
diff --git a/src/components/Steps/SendTransaction/SubmitTransaction.vue b/src/components/Steps/SendTransaction/SubmitTransaction.vue
index 99e8f6f..a698133 100644
--- a/src/components/Steps/SendTransaction/SubmitTransaction.vue
+++ b/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>

From c8038b94ae9acbe82b27f4520d72d6d8fc6b30b7 Mon Sep 17 00:00:00 2001
From: Dmitry Kuksenko <lusdjke@gmail.com>
Date: Wed, 5 Apr 2023 11:24:05 +0300
Subject: [PATCH 6/7] feat(widget): LS-1166 fix widget styles for wallet

---
 src/Swap/SwapContainer.vue                    |  6 +--
 src/Swap/SwapInput.vue                        |  4 +-
 src/Swap/styles/swapContainer.scss            | 47 ++++++++++++++++++-
 src/components/ButtonToken/buttonToken.scss   |  2 +-
 src/components/CurveSwitch/curveSwitch.scss   |  5 ++
 .../ReservesContainer/reservesContainer.scss  |  3 --
 src/composables/useAccountBalance.ts          |  8 ++--
 7 files changed, 60 insertions(+), 15 deletions(-)

diff --git a/src/Swap/SwapContainer.vue b/src/Swap/SwapContainer.vue
index fdf5894..d4f8c12 100644
--- a/src/Swap/SwapContainer.vue
+++ b/src/Swap/SwapContainer.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="container">
-    <div class="swap-container {{ insideNativeWallet && 'swap-container-wallet' }} ">
+    <div class="swap-container" :class="[mainStore.insideNativeWallet.value && 'swap-container-wallet']">
       <form
         class="swap"
         action=""
@@ -141,16 +141,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);
+const insideNativeWallet = computed(() => mainStore.insideNativeWallet.value);
 
 const stableCurve = computed(() => getCurve('stable', version.value));
 const unstableCurve = computed(() => getCurve('uncorrelated', version.value));
diff --git a/src/Swap/SwapInput.vue b/src/Swap/SwapInput.vue
index 409bb7f..4de989c 100644
--- a/src/Swap/SwapInput.vue
+++ b/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;
 });
diff --git a/src/Swap/styles/swapContainer.scss b/src/Swap/styles/swapContainer.scss
index 6fc9f0f..0de5ff5 100644
--- a/src/Swap/styles/swapContainer.scss
+++ b/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,8 +48,48 @@
   margin-bottom: 20px;
 }
 
-.swap-container-wallet {
-  background: transparent;
+.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: 10;
+
+      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 {
diff --git a/src/components/ButtonToken/buttonToken.scss b/src/components/ButtonToken/buttonToken.scss
index f9727ec..9c41302 100644
--- a/src/components/ButtonToken/buttonToken.scss
+++ b/src/components/ButtonToken/buttonToken.scss
@@ -19,7 +19,7 @@
     font-weight: normal !important;
   }
 
-  img {
+  img, .img {
     width: 24px;
     height: 24px;
     margin-right: 0.5rem;
diff --git a/src/components/CurveSwitch/curveSwitch.scss b/src/components/CurveSwitch/curveSwitch.scss
index 1c9d4ec..9217c81 100644
--- a/src/components/CurveSwitch/curveSwitch.scss
+++ b/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;
diff --git a/src/components/ReservesContainer/reservesContainer.scss b/src/components/ReservesContainer/reservesContainer.scss
index e30b26e..b09f53b 100644
--- a/src/components/ReservesContainer/reservesContainer.scss
+++ b/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 {
diff --git a/src/composables/useAccountBalance.ts b/src/composables/useAccountBalance.ts
index 2f4b4a4..9fc44fb 100644
--- a/src/composables/useAccountBalance.ts
+++ b/src/composables/useAccountBalance.ts
@@ -72,12 +72,12 @@ export function useAccountBalance(
         if (resource) {
           isExists.value = true;
           balance.value = +resource.data.coin.value;
-        } else {
-          isExists.value = false;
-          balance.value = 0;
         }
       }
-    } catch (_e) {}
+    } catch (_e) {
+      isExists.value = false;
+      balance.value = 0;
+    }
 
     return {
       balance: balance.value,

From a4b41e0eb93d1603bec9a2562d4589804661b75f Mon Sep 17 00:00:00 2001
From: Dmitry Kuksenko <lusdjke@gmail.com>
Date: Wed, 5 Apr 2023 11:41:35 +0300
Subject: [PATCH 7/7] feat(widget): LS-1166 fix padding

---
 package.json                       |  2 +-
 src/Swap/SwapContainer.vue         | 10 ++++++++--
 src/Swap/styles/swapContainer.scss |  8 +++++++-
 3 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/package.json b/package.json
index 6825370..8590972 100644
--- a/package.json
+++ b/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": [
diff --git a/src/Swap/SwapContainer.vue b/src/Swap/SwapContainer.vue
index d4f8c12..f8318bb 100644
--- a/src/Swap/SwapContainer.vue
+++ b/src/Swap/SwapContainer.vue
@@ -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
diff --git a/src/Swap/styles/swapContainer.scss b/src/Swap/styles/swapContainer.scss
index 0de5ff5..0618346 100644
--- a/src/Swap/styles/swapContainer.scss
+++ b/src/Swap/styles/swapContainer.scss
@@ -69,7 +69,7 @@
       position: absolute;
       top: -70px;
       right: 64px;
-      z-index: 10;
+      z-index: 9;
 
       button {
         width: 44px;
@@ -86,6 +86,7 @@
       }
     }
 
+
     .swap__row:last-of-type {
       padding: 0 16px 8px;
     }
@@ -152,6 +153,11 @@
     &--no-padding {
       padding: 0;
     }
+
+    &--extra-padding {
+      padding-left: 16px;
+      padding-right: 16px;
+    }
   }
 
   &__button {