feat: add banner

src/components/Button/Button.module.scss

@@ -24,17 +24,17 @@
 }
 
 .primary {
-  background-color: $primary-bg-btn;
-  color: $text-btn-default;
+  background-color: $primary-surface-btn;
+  color: $white-color;
   border: 1px;
   padding: 14.5px 39px;
   border-radius: 99px;
 }
 
 .primary-sm {
-  background-color: $primary-bg-btn;
+  background-color: $primary-surface-btn;
   font-weight: 400;
-  color: $text-btn-default;
+  color: $white-color;
   border: 1px;
   padding: 4px 16px;
   border-radius: 99px;

src/pages/UniversalSwap/Component/ConnectBanner.module.scss

@@ -0,0 +1,132 @@
+@import 'src/styles/themes';
+@import 'src/styles/mixins';
+
+.connectBanner {
+  display: flex;
+  flex-direction: column;
+  background: var(--Colors-Neutral-Surface-card, #18181a);
+  border-radius: var(--Dimension-Corner-Radius-row, 8px);
+  border: 1px solid var(--Colors-Neutral-Border-default, #383b40);
+
+  .top {
+    display: flex;
+    padding: 24px;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 16px;
+    align-self: stretch;
+
+    border-radius: 8px 8px 0 0;
+
+    background-image: url('../../../assets/images/bg_banner.png');
+    background-repeat: no-repeat;
+    background-size: cover;
+    background-position: center center;
+
+    .header {
+      display: flex;
+      align-items: center;
+      gap: 16px;
+
+      color: var(--Colors-Neutral-Text-heading, #f7f7f7);
+      font-size: 18px;
+      font-weight: 600;
+      line-height: 150%; /* 27px */
+
+      .index {
+        color: var(--Colors-Neutral-Text-body, #b4b7bb);
+        font-size: 18px;
+        font-weight: 400;
+        line-height: 150%; /* 27px */
+      }
+    }
+
+    .content {
+      display: flex;
+      align-items: center;
+      gap: 16px;
+      justify-content: space-between;
+
+      width: 100%;
+
+      .left {
+        display: flex;
+        align-items: center;
+        gap: 16px;
+
+        color: var(--Colors-Primary-Surface-highlight, #cbaeff);
+        font-size: 20px;
+        font-weight: 600;
+        line-height: 24px; /* 120% */
+
+        .icon {
+          position: relative;
+
+          svg {
+            z-index: 1;
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+
+            path {
+              stroke: #fff;
+            }
+          }
+        }
+
+        .connected {
+          color: var(--Colors-Neutral-Text-title, #f7f7f7);
+          font-family: 'IBM Plex Sans';
+          font-size: 16px;
+          font-weight: 400;
+          line-height: 24px; /* 150% */
+        }
+      }
+
+      .right {
+        &.hide {
+          visibility: hidden;
+        }
+      }
+    }
+  }
+
+  .bottom {
+    display: flex;
+    padding: 8px 24px;
+    align-items: center;
+    align-self: stretch;
+
+    color: var(--Colors-Neutral-Text-body, #b4b7bb);
+    font-family: 'IBM Plex Sans';
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 20px; /* 142.857% */
+
+    a {
+      display: flex;
+      padding: 4px 8px;
+      justify-content: center;
+      align-items: center;
+      gap: 10px;
+      // border-radius: var(--Dimension-Corner-Radius-button, 8px);
+
+      color: var(--Colors-Primary-Text-action, #b999f3);
+      font-family: 'IBM Plex Sans';
+      font-size: 14px;
+      font-weight: 500;
+      line-height: 20px; /* 142.857% */
+
+      &:hover {
+        opacity: 0.8;
+      }
+
+      svg {
+        path {
+          stroke: #b999f3;
+        }
+      }
+    }
+  }
+}

src/pages/UniversalSwap/Component/ConnectBanner.tsx

@@ -0,0 +1,60 @@
+import React from 'react';
+import styles from './ConnectBanner.module.scss';
+import { ReactComponent as OpenNewTabIcon } from 'assets/icons/open_new_window.svg';
+import { ReactComponent as WalletIcon } from 'assets/icons/wallet-icon.svg';
+import blurIconImg from 'assets/icons/bg_blur_icon.svg';
+import { WalletManagement } from 'components/WalletManagement';
+import useConfigReducer from 'hooks/useConfigReducer';
+import classNames from 'classnames';
+import useWalletReducer from 'hooks/useWalletReducer';
+import { reduceString } from 'libs/utils';
+
+const ConnectBanner = () => {
+  const [walletByNetworks] = useWalletReducer('walletsByNetwork');
+  const [oraiAddress] = useConfigReducer('address');
+  const [metamaskAddress] = useConfigReducer('metamaskAddress');
+  const [tronAddress] = useConfigReducer('tronAddress');
+  const [btcAddress] = useConfigReducer('btcAddress');
+
+  const connectAddress = oraiAddress || metamaskAddress || tronAddress || btcAddress || '';
+
+  const isConnected =
+    walletByNetworks.cosmos || walletByNetworks.bitcoin || walletByNetworks.evm || walletByNetworks.tron;
+
+  return (
+    <div className={styles.connectBanner}>
+      <div className={styles.top}>
+        <div className={styles.header}>
+          <span className={styles.index}>01</span>
+          <span>Connect with Oraichain</span>
+        </div>
+        <div className={styles.content}>
+          <div className={styles.left}>
+            <div className={styles.icon}>
+              <img src={blurIconImg} alt="blurIconImg" />
+              <WalletIcon />
+            </div>
+            <div className={styles.connectTitle}>
+              <span className={classNames({ [styles.connected]: isConnected })}>
+                {isConnected ? 'Hello,' : 'Connect wallet to'}
+              </span>
+              <br />
+              <span>{!isConnected ? 'start your Oraichain journey!' : reduceString(connectAddress, 8, 8)}</span>
+            </div>
+          </div>
+          <div className={classNames(styles.right, { [styles.hide]: isConnected })}>
+            <WalletManagement />
+          </div>
+        </div>
+      </div>
+      <div className={styles.bottom}>
+        <span className={styles.learn}>New to Web3? You can learn from here.</span>
+        <a href="/" target="_blank" rel="noopener noreferrer">
+          Glossary <OpenNewTabIcon />
+        </a>
+      </div>
+    </div>
+  );
+};
+
+export default ConnectBanner;

src/pages/UniversalSwap/Swap/components/InputSwap/InputSwap.module.scss

@@ -73,6 +73,10 @@
 
     .input {
       text-align: right;
+
+      input:disabled {
+        opacity: 1;
+      }
     }
 
     .amount {
@@ -248,8 +252,8 @@
 
       .percent {
         border-radius: 99px;
-        background: #aee67f;
-        color: black;
+        background: $primary-surface-btn;
+        color: white;
         padding: 2px 10px;
 
         opacity: 0.6;

src/pages/UniversalSwap/Swap/index.module.scss

@@ -424,7 +424,7 @@
     }
 
     @include theme {
-      color: theme-get('primary-text-text-link');
+      color: $primary-text-link;
     }
     font-size: 14px;
     font-weight: 600;
@@ -435,7 +435,7 @@
 
       path {
         @include theme {
-          stroke: theme-get('primary-text-text-link');
+          stroke: $primary-text-link;
         }
       }
     }
@@ -599,8 +599,8 @@
   gap: 5px;
 
   @include theme() {
-    background-color: theme-get('primary-1');
-    color: theme-get('neutral-text-text-btn-default');
+    background-color: $primary-surface-btn;
+    color: $white-color;
   }
 
   &.disable {
@@ -610,7 +610,7 @@
     }
   }
 
-  border-radius: 99px;
+  border-radius: 8px;
   padding: 16px;
   font-style: normal;
   font-weight: 600;

src/pages/UniversalSwap/Swap/index.tsx

@@ -21,8 +21,6 @@ import { isMobile } from '@walletconnect/browser-utils';
 import ArrowImg from 'assets/icons/arrow_new.svg';
 import { ReactComponent as SendIcon } from 'assets/icons/send.svg';
 import { ReactComponent as FeeIcon } from 'assets/icons/fee.svg';
-import { ReactComponent as SendDarkIcon } from 'assets/icons/send_dark.svg';
-import { ReactComponent as FeeDarkIcon } from 'assets/icons/fee_dark.svg';
 import { ReactComponent as BookIcon } from 'assets/icons/book_icon.svg';
 import { ReactComponent as IconOirSettings } from 'assets/icons/iconoir_settings.svg';
 import SwitchLightImg from 'assets/icons/switch-new-light.svg';
@@ -682,7 +680,7 @@ const SwapComponent: React.FC<{
               onChange={(val) => setAddressTransfer(val)}
               showPreviewOnBlur
               defaultValue={initAddressTransfer}
-              prefix={theme === 'light' ? <SendIcon /> : <SendDarkIcon />}
+              prefix={<SendIcon />}
               suffix={
                 <div
                   className={cx('paste')}
@@ -724,7 +722,7 @@ const SwapComponent: React.FC<{
           </div>
           <div className={cx('estFee')} onClick={() => setOpenDetail(true)}>
             <div className={cx('label')}>
-              {theme === 'light' ? <FeeIcon /> : <FeeDarkIcon />}
+              <FeeIcon />
               Estimated Fee:
             </div>
             <div className={cx('info')}>

src/pages/UniversalSwap/index.module.scss

@@ -46,6 +46,10 @@
 
   .swap-col {
     &.w60 {
+      display: flex;
+      flex-direction: column;
+      gap: 24px;
+
       width: 100%;
       max-width: 1000px;
       // min-width: 500px;

src/pages/UniversalSwap/index.tsx

@@ -9,6 +9,7 @@ import styles from './index.module.scss';
 import { formatDisplayUsdt } from 'helper/helpers';
 import BuyOraiModal from 'layouts/BuyOraiModal';
 import { ReactComponent as KadoIcon } from 'assets/icons/ic_kado.svg';
+import ConnectBanner from './Component/ConnectBanner';
 const cx = cn.bind(styles);
 
 const Swap: React.FC = () => {
@@ -24,6 +25,7 @@ const Swap: React.FC = () => {
         <HeaderTab openBuyModal={() => setOpenBuy(true)} />
         <div className={cx('swap-container')}>
           <div className={cx('swap-col', 'w60')}>
+            <ConnectBanner />
             <AssetsTab networkFilter={networkFilter.value} openBuyModal={() => setOpenBuy(true)} />
           </div>
           <div className={cx('swap-col', 'w40')}>