From 2a71d3de133f036395204ffaf7b5b9c18fc3775d Mon Sep 17 00:00:00 2001 From: quangdz1704 Date: Fri, 10 May 2024 17:25:02 +0700 Subject: [PATCH] feat: add banner --- src/assets/icons/bg_blur_icon.svg | 18 +++ src/assets/icons/book_icon.svg | 4 +- src/assets/icons/fee.svg | 14 +- src/assets/icons/send.svg | 14 +- src/assets/images/bg_banner.png | Bin 0 -> 17262 bytes src/components/Button/Button.module.scss | 8 +- .../Component/ConnectBanner.module.scss | 132 ++++++++++++++++++ .../UniversalSwap/Component/ConnectBanner.tsx | 60 ++++++++ .../InputSwap/InputSwap.module.scss | 8 +- .../UniversalSwap/Swap/index.module.scss | 10 +- src/pages/UniversalSwap/Swap/index.tsx | 6 +- src/pages/UniversalSwap/index.module.scss | 4 + src/pages/UniversalSwap/index.tsx | 2 + src/styles/_themes.scss | 2 +- src/styles/_variables.scss | 4 +- 15 files changed, 258 insertions(+), 28 deletions(-) create mode 100644 src/assets/icons/bg_blur_icon.svg create mode 100644 src/assets/images/bg_banner.png create mode 100644 src/pages/UniversalSwap/Component/ConnectBanner.module.scss create mode 100644 src/pages/UniversalSwap/Component/ConnectBanner.tsx diff --git a/src/assets/icons/bg_blur_icon.svg b/src/assets/icons/bg_blur_icon.svg new file mode 100644 index 000000000..b34639f10 --- /dev/null +++ b/src/assets/icons/bg_blur_icon.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/assets/icons/book_icon.svg b/src/assets/icons/book_icon.svg index 03fe2da00..bae73baa4 100644 --- a/src/assets/icons/book_icon.svg +++ b/src/assets/icons/book_icon.svg @@ -1,8 +1,8 @@ + stroke="#cbaeff" stroke-width="1.5" stroke-linecap="round" /> + stroke="#cbaeff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" /> \ No newline at end of file diff --git a/src/assets/icons/fee.svg b/src/assets/icons/fee.svg index 5c743c9bd..8476c1d64 100644 --- a/src/assets/icons/fee.svg +++ b/src/assets/icons/fee.svg @@ -1,5 +1,11 @@ - - - - + + + + \ No newline at end of file diff --git a/src/assets/icons/send.svg b/src/assets/icons/send.svg index 6c27eb52b..93255678e 100644 --- a/src/assets/icons/send.svg +++ b/src/assets/icons/send.svg @@ -1,5 +1,11 @@ - - - - + + + + \ No newline at end of file diff --git a/src/assets/images/bg_banner.png b/src/assets/images/bg_banner.png new file mode 100644 index 0000000000000000000000000000000000000000..61d2ee3365f373ca39dde11205f03265347a3f00 GIT binary patch literal 17262 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 literal 0 HcmV?d00001 diff --git a/src/components/Button/Button.module.scss b/src/components/Button/Button.module.scss index 4022215f9..b7e8d4b56 100644 --- a/src/components/Button/Button.module.scss +++ b/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; diff --git a/src/pages/UniversalSwap/Component/ConnectBanner.module.scss b/src/pages/UniversalSwap/Component/ConnectBanner.module.scss new file mode 100644 index 000000000..5c3fd4a6f --- /dev/null +++ b/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; + } + } + } + } +} diff --git a/src/pages/UniversalSwap/Component/ConnectBanner.tsx b/src/pages/UniversalSwap/Component/ConnectBanner.tsx new file mode 100644 index 000000000..5073ae38a --- /dev/null +++ b/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 ( +
+
+
+ 01 + Connect with Oraichain +
+
+
+
+ blurIconImg + +
+
+ + {isConnected ? 'Hello,' : 'Connect wallet to'} + +
+ {!isConnected ? 'start your Oraichain journey!' : reduceString(connectAddress, 8, 8)} +
+
+
+ +
+
+
+
+ New to Web3? You can learn from here. + + Glossary + +
+
+ ); +}; + +export default ConnectBanner; diff --git a/src/pages/UniversalSwap/Swap/components/InputSwap/InputSwap.module.scss b/src/pages/UniversalSwap/Swap/components/InputSwap/InputSwap.module.scss index c249bc14a..9f3d44899 100644 --- a/src/pages/UniversalSwap/Swap/components/InputSwap/InputSwap.module.scss +++ b/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; diff --git a/src/pages/UniversalSwap/Swap/index.module.scss b/src/pages/UniversalSwap/Swap/index.module.scss index a7b492c4e..174d1ea5a 100644 --- a/src/pages/UniversalSwap/Swap/index.module.scss +++ b/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; diff --git a/src/pages/UniversalSwap/Swap/index.tsx b/src/pages/UniversalSwap/Swap/index.tsx index cc2ce0e10..c552e7f15 100644 --- a/src/pages/UniversalSwap/Swap/index.tsx +++ b/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' ? : } + prefix={} suffix={
setOpenDetail(true)}>
- {theme === 'light' ? : } + Estimated Fee:
diff --git a/src/pages/UniversalSwap/index.module.scss b/src/pages/UniversalSwap/index.module.scss index 10386369d..05c07cecf 100644 --- a/src/pages/UniversalSwap/index.module.scss +++ b/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; diff --git a/src/pages/UniversalSwap/index.tsx b/src/pages/UniversalSwap/index.tsx index b397d9d56..e66555a44 100644 --- a/src/pages/UniversalSwap/index.tsx +++ b/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 = () => { setOpenBuy(true)} />
+ setOpenBuy(true)} />
diff --git a/src/styles/_themes.scss b/src/styles/_themes.scss index 84c5de3a3..4ce8a5d45 100644 --- a/src/styles/_themes.scss +++ b/src/styles/_themes.scss @@ -12,7 +12,7 @@ $blue-color: #7e5cc5; $success-color: #00ad26; $error-color: #ff5947; $warning-color: #e01600; -$primary-text-link: #78ca11; +$primary-text-link: #cbaeff; $yellow-brown-color: #ad9c00; $primary-surface-default-light: #e5f7d6; $primary-bg-btn: #aee67f; diff --git a/src/styles/_variables.scss b/src/styles/_variables.scss index 46616b709..1e82f56d8 100644 --- a/src/styles/_variables.scss +++ b/src/styles/_variables.scss @@ -42,11 +42,11 @@ $neutral-surface-search: #f7f7f7; $text: $gray; $label-colour-light: #efefef; -$toggle-colour-light: #5ea402; +$toggle-colour-light: #7332e7; $label-colour: #31332e; $disabled-colour: #ddd; -$toggle-colour: #89a571; +$toggle-colour: #cbaeff; $focus-color: #ff0; $spanish-yellow: #f0b90b;