From 5bef683ea76260ffb68039e46e1cec9e15e09aab Mon Sep 17 00:00:00 2001 From: olgakup <16910687+olgakup@users.noreply.github.com> Date: Fri, 28 Mar 2025 11:59:36 -0700 Subject: [PATCH 01/11] feat: swap network select and token amount ui --- .../extension/src/ui/action/styles/color.less | 2 + .../components/swap-network-select/index.vue | 64 ++++------ .../swap-token-amount-input/index.vue | 1 + .../src/ui/action/views/swap/index.vue | 119 ++++++++++++++---- 4 files changed, 119 insertions(+), 67 deletions(-) diff --git a/packages/extension/src/ui/action/styles/color.less b/packages/extension/src/ui/action/styles/color.less index 139ff62c4..b64de1a58 100644 --- a/packages/extension/src/ui/action/styles/color.less +++ b/packages/extension/src/ui/action/styles/color.less @@ -15,6 +15,7 @@ @grayPrimary: rgba(95, 99, 104, 1); @gray01: rgba(95, 99, 104, 0.1); @gray02: rgba(95, 99, 104, 0.2); +@grey08: rgba(0, 0, 0, 0.08); @white07: rgba(255, 255, 255, 0.7); @white09: rgba(255, 255, 255, 0.9); @error: #f4432c; @@ -28,6 +29,7 @@ @buttonBg: #f2f4f7; @hoverItemBg: #f9fafb; @lightBg: #f9fafb; +@lightSurfaceBg: rgba(249, 250, 251, 1); @tipBg: #fff7b2; @overlayBg: rgba(0, 0, 0, 0.3); @introHeaderBg: #f9fafb; diff --git a/packages/extension/src/ui/action/views/swap/components/swap-network-select/index.vue b/packages/extension/src/ui/action/views/swap/components/swap-network-select/index.vue index 6e7431406..2659051e0 100644 --- a/packages/extension/src/ui/action/views/swap/components/swap-network-select/index.vue +++ b/packages/extension/src/ui/action/views/swap/components/swap-network-select/index.vue @@ -1,18 +1,16 @@ @@ -36,14 +34,14 @@ defineProps({ diff --git a/packages/extension/src/ui/action/views/swap/components/swap-token-amount-input/index.vue b/packages/extension/src/ui/action/views/swap/components/swap-token-amount-input/index.vue index 227a4a6d0..c5f1d8a9e 100644 --- a/packages/extension/src/ui/action/views/swap/components/swap-token-amount-input/index.vue +++ b/packages/extension/src/ui/action/views/swap/components/swap-token-amount-input/index.vue @@ -74,6 +74,7 @@ const changeFocus = (newVal: boolean) => { box-sizing: border-box; border-radius: 10px; position: relative; + background-color: @white; &.focus { border: 1px solid @primary; diff --git a/packages/extension/src/ui/action/views/swap/index.vue b/packages/extension/src/ui/action/views/swap/index.vue index ea0b71530..a009d1899 100644 --- a/packages/extension/src/ui/action/views/swap/index.vue +++ b/packages/extension/src/ui/action/views/swap/index.vue @@ -10,26 +10,45 @@
- - + +
+

From

+ +
+ + +
+ +
- +
- + /> --> - + /> --> - + /> -->
@@ -134,6 +153,7 @@ import SwapLooking from './components/swap-loading/index.vue'; import SwapErrorPopup from './components/swap-error/index.vue'; import SendAddressInput from './components/send-address-input.vue'; import SendContactsList from './components/send-contacts-list.vue'; +// import SwapAddressInput from './components/swap-address-input/index.vue'; import { getAccountsByNetworkName } from '@/libs/utils/accounts'; import { AccountsHeaderData } from '../../types/account'; import { getNetworkByName } from '@/libs/utils/networks'; @@ -228,6 +248,9 @@ const errors = ref({ }); const bestProviderQuotes = ref([]); +const fromAccount = ref( + props.accountInfo.selectedAccount!, +); /** Receiver address (address that will be receiving the swap output) */ const address = ref(''); @@ -942,22 +965,64 @@ const sendAction = async () => { } &__wrap { - padding: 0 32px; + padding: 8px 20px; + margin: 0; display: flex; - justify-content: center; - align-items: center; + justify-content: stretch; + align-items: stretch; flex-direction: column; width: 100%; box-sizing: border-box; height: calc(~'100% - 172px'); + overflow-y: auto; + gap: 4px; + position: relative; + &__container { + padding: 16px; + // background-color: green; + background-color: @lightSurfaceBg; + border-radius: 20px; + flex: 1; + h2 { + font-weight: 700; + font-size: 16px; + line-height: 20px; + letter-spacing: 0.15px; + margin-bottom: 8px; + margin-top: 0px; + } + } + &__row { + display: flex; + justify-content: stretch; + align-items: stretch; + margin-bottom: 8px; + gap: 8px; + } + // &__test { + // flex: 1; + // background-color: @white; + // height: 100px; + // } } &__arrows { - padding: 8px 0; + padding: 4px; text-align: center; font-size: 0; - display: block; + display: flex; + align-items: center; + justify-content: center; text-decoration: none; + background-color: @white; + border-radius: 12px; + width: 28px; + height: 28px; + border: 1px solid @grey08; + position: absolute; + top: 50%; + left: 50%; + transform: translateX(-50%) translateY(-50%); } &__buttons { From 5d32ad1628016fd6e0decca39919c587fc2a60a7 Mon Sep 17 00:00:00 2001 From: olgakup <16910687+olgakup@users.noreply.github.com> Date: Wed, 2 Apr 2025 15:33:45 -0700 Subject: [PATCH 02/11] devop: seletc adr btn ui --- .../components/app-select-address/index.vue | 199 ++++++++++++++++++ .../ui/action/icons/common/warning-icon.vue | 23 ++ .../components/swap-network-select/index.vue | 43 ++-- .../src/ui/action/views/swap/index.vue | 28 ++- 4 files changed, 267 insertions(+), 26 deletions(-) create mode 100644 packages/extension/src/ui/action/components/app-select-address/index.vue create mode 100644 packages/extension/src/ui/action/icons/common/warning-icon.vue diff --git a/packages/extension/src/ui/action/components/app-select-address/index.vue b/packages/extension/src/ui/action/components/app-select-address/index.vue new file mode 100644 index 000000000..20adccc53 --- /dev/null +++ b/packages/extension/src/ui/action/components/app-select-address/index.vue @@ -0,0 +1,199 @@ + + + + + diff --git a/packages/extension/src/ui/action/icons/common/warning-icon.vue b/packages/extension/src/ui/action/icons/common/warning-icon.vue new file mode 100644 index 000000000..16df6890b --- /dev/null +++ b/packages/extension/src/ui/action/icons/common/warning-icon.vue @@ -0,0 +1,23 @@ + + + diff --git a/packages/extension/src/ui/action/views/swap/components/swap-network-select/index.vue b/packages/extension/src/ui/action/views/swap/components/swap-network-select/index.vue index 2659051e0..a2c97f73d 100644 --- a/packages/extension/src/ui/action/views/swap/components/swap-network-select/index.vue +++ b/packages/extension/src/ui/action/views/swap/components/swap-network-select/index.vue @@ -1,17 +1,23 @@ diff --git a/packages/extension/src/ui/action/styles/color.less b/packages/extension/src/ui/action/styles/color.less index b64de1a58..5c72e40bd 100644 --- a/packages/extension/src/ui/action/styles/color.less +++ b/packages/extension/src/ui/action/styles/color.less @@ -16,6 +16,7 @@ @gray01: rgba(95, 99, 104, 0.1); @gray02: rgba(95, 99, 104, 0.2); @grey08: rgba(0, 0, 0, 0.08); +@grey16: rgba(242, 244, 247, 1); @white07: rgba(255, 255, 255, 0.7); @white09: rgba(255, 255, 255, 0.9); @error: #f4432c; diff --git a/packages/extension/src/ui/action/views/swap/components/swap-network-select/index.vue b/packages/extension/src/ui/action/views/swap/components/swap-network-select/index.vue index a2c97f73d..8d8d4046b 100644 --- a/packages/extension/src/ui/action/views/swap/components/swap-network-select/index.vue +++ b/packages/extension/src/ui/action/views/swap/components/swap-network-select/index.vue @@ -98,8 +98,8 @@ defineProps({ } } &__arrow { - justify-self: end; margin-left: auto; + min-width: 24px; } } diff --git a/packages/extension/src/ui/action/views/swap/index.vue b/packages/extension/src/ui/action/views/swap/index.vue index 311d064e9..b2749ec53 100644 --- a/packages/extension/src/ui/action/views/swap/index.vue +++ b/packages/extension/src/ui/action/views/swap/index.vue @@ -13,7 +13,6 @@

From

-
-
Date: Wed, 9 Apr 2025 17:26:02 -0700 Subject: [PATCH 04/11] swap: slect address without external --- .../components/app-select-address/index.vue | 132 +++++++++++++++--- .../src/ui/action/views/swap/index.vue | 4 +- 2 files changed, 117 insertions(+), 19 deletions(-) diff --git a/packages/extension/src/ui/action/components/app-select-address/index.vue b/packages/extension/src/ui/action/components/app-select-address/index.vue index eab4bb371..909c04ab4 100644 --- a/packages/extension/src/ui/action/components/app-select-address/index.vue +++ b/packages/extension/src/ui/action/components/app-select-address/index.vue @@ -40,17 +40,36 @@

{{ titleInbutton }}

+
+
+ +
+ + +
-

{{ searchedTitle }}

+

{{ myAccountsTitle }}

import { computed, PropType, ref, watchEffect, onMounted } from 'vue'; import SwitchArrow from '@action/icons/header/switch_arrow.vue'; -import { EnkryptAccount } from '@enkryptcom/types'; +import { EnkryptAccount, NetworkNames } from '@enkryptcom/types'; import { getAccountsByNetworkName } from '@/libs/utils/accounts'; import { BaseNetwork } from '@/types/base-network'; import WarningIcon from '@/ui/action/icons/common/warning-icon.vue'; @@ -74,11 +93,14 @@ import AppDialog from '@/ui/action/components/app-dialog/index.vue'; import scrollSettings from '@/libs/utils/scroll-settings'; import CustomScrollbar from '@action/components/custom-scrollbar/index.vue'; import AddressItem from './components/address-item.vue'; +import { debounce } from 'lodash'; +import { Network } from 'bitcoinjs-lib'; + const props = defineProps({ - network: { - type: Object as PropType, - required: true, - }, + // network: { + // type: Object as PropType, + // required: true, + // }, titleInbutton: { type: String, default: 'Select Address', @@ -91,6 +113,18 @@ const props = defineProps({ type: Boolean, default: true, }, + networkName: { + type: String as PropType, + required: false, + }, + identicon: { + type: Function, + default: () => '', + }, + isValidSearchAddress: { + type: Boolean, + default: () => false, + }, }); /** ------------------- @@ -99,20 +133,24 @@ const props = defineProps({ const selectedAddress = defineModel('selected-address', { default: undefined, }); + const isLoadingAccounts = ref(true); const displayAccounts = ref([]); const loadAccounts = async () => { - isLoadingAccounts.value = true; - displayAccounts.value = await getAccountsByNetworkName(props.network.name); - isLoadingAccounts.value = false; + if (props.networkName) { + isLoadingAccounts.value = true; + console.log('name', props.networkName); + displayAccounts.value = await getAccountsByNetworkName(props.networkName); + isLoadingAccounts.value = false; + } }; onMounted(() => { loadAccounts(); }); watchEffect(() => { - if (props.network) { + if (props.networkName) { loadAccounts(); } }); @@ -156,7 +194,7 @@ const displaySelectedSubtext = computed(() => { }); const displayIdenticon = computed(() => { if (selectedAddress.value) { - return props.network?.identicon(selectedAddress.value); + return props.identicon(selectedAddress.value); } return undefined; }); @@ -173,13 +211,41 @@ const openDialog = () => { isOpened.value = true; }; -const searchedTitle = computed(() => { +const myAccountsTitle = computed(() => { // if (props.hasExternalAccounts) { // return `My ${props.network.name} Accounts`; // } // return 'Select Address'; - return `My ${props.network.name_long} Accounts`; + return `My ${props.networkName} Accounts`; +}); +/** ------------------- + * Search + -------------------*/ +const search = ref(''); +const emit = defineEmits<{ + (e: 'update:search', search: string): void; +}>(); + +const searchIdenticon = computed(() => { + if (search.value && props.isValidSearchAddress) { + return props.identicon(search.value); + } + return undefined; +}); + +const searchAccounts = computed(() => { + if (search.value) { + return displayAccounts.value.filter( + account => + account.name.toLowerCase().includes(search.value.toLowerCase()) || + account.address.toLowerCase().includes(search.value.toLowerCase()), + ); + } + return displayAccounts.value; }); +const checkValidSearchAddress = debounce(() => { + emit('update:search', search.value); +}, 200); From ec8d20a89cef551b6a46d69ba2da9644a761a529 Mon Sep 17 00:00:00 2001 From: olgakup <16910687+olgakup@users.noreply.github.com> Date: Mon, 14 Apr 2025 16:13:11 -0700 Subject: [PATCH 07/11] devop: add loading states --- .../extension/src/ui/action/styles/theme.less | 12 ++ .../components/address-item.vue | 0 .../components/swap-address-select}/index.vue | 37 +++--- .../components/swap-network-select/index.vue | 29 +++-- .../swap-token-amount-input/index.vue | 18 ++- .../components/swap-token-select/index.vue | 45 +++---- .../src/ui/action/views/swap/index.vue | 110 +++++++++++++----- 7 files changed, 172 insertions(+), 79 deletions(-) rename packages/extension/src/ui/action/{components/app-select-address => views/swap/components/swap-address-select}/components/address-item.vue (100%) rename packages/extension/src/ui/action/{components/app-select-address => views/swap/components/swap-address-select}/index.vue (95%) diff --git a/packages/extension/src/ui/action/styles/theme.less b/packages/extension/src/ui/action/styles/theme.less index 4f03d08ef..b578810ba 100644 --- a/packages/extension/src/ui/action/styles/theme.less +++ b/packages/extension/src/ui/action/styles/theme.less @@ -8,3 +8,15 @@ -ms-user-select: none; user-select: none; } +.skeleton { + animation: skeleton-loading 1s linear infinite alternate; +} + +@keyframes skeleton-loading { + 0% { + background-color: @gray01; + } + 100% { + background-color: @lightSurfaceBg; + } +} diff --git a/packages/extension/src/ui/action/components/app-select-address/components/address-item.vue b/packages/extension/src/ui/action/views/swap/components/swap-address-select/components/address-item.vue similarity index 100% rename from packages/extension/src/ui/action/components/app-select-address/components/address-item.vue rename to packages/extension/src/ui/action/views/swap/components/swap-address-select/components/address-item.vue diff --git a/packages/extension/src/ui/action/components/app-select-address/index.vue b/packages/extension/src/ui/action/views/swap/components/swap-address-select/index.vue similarity index 95% rename from packages/extension/src/ui/action/components/app-select-address/index.vue rename to packages/extension/src/ui/action/views/swap/components/swap-address-select/index.vue index 399bbb17a..a59b49a12 100644 --- a/packages/extension/src/ui/action/components/app-select-address/index.vue +++ b/packages/extension/src/ui/action/views/swap/components/swap-address-select/index.vue @@ -1,7 +1,12 @@ From c56abdebc8595801ed9610e1bf1a6b99644c316e Mon Sep 17 00:00:00 2001 From: olgakup <16910687+olgakup@users.noreply.github.com> Date: Mon, 14 Apr 2025 16:21:10 -0700 Subject: [PATCH 09/11] devop: external --- .../views/swap/components/swap-address-select/index.vue | 4 ---- packages/extension/src/ui/action/views/swap/index.vue | 2 +- 2 files changed, 1 insertion(+), 5 deletions(-) diff --git a/packages/extension/src/ui/action/views/swap/components/swap-address-select/index.vue b/packages/extension/src/ui/action/views/swap/components/swap-address-select/index.vue index a59b49a12..74b493084 100644 --- a/packages/extension/src/ui/action/views/swap/components/swap-address-select/index.vue +++ b/packages/extension/src/ui/action/views/swap/components/swap-address-select/index.vue @@ -212,10 +212,6 @@ const openDialog = () => { }; const myAccountsTitle = computed(() => { - // if (props.hasExternalAccounts) { - // return `My ${props.network.name} Accounts`; - // } - // return 'Select Address'; return `My ${props.networkName} Accounts`; }); /** ------------------- diff --git a/packages/extension/src/ui/action/views/swap/index.vue b/packages/extension/src/ui/action/views/swap/index.vue index 518ea1d77..93a711a0a 100644 --- a/packages/extension/src/ui/action/views/swap/index.vue +++ b/packages/extension/src/ui/action/views/swap/index.vue @@ -59,7 +59,7 @@ :identicon="fromSelectedNetwork.identicon" :is-valid-search-address="false" title="Swap from account" - :has-external-accounts="false" + :has-external-accounts="true" >
Date: Mon, 14 Apr 2025 16:30:34 -0700 Subject: [PATCH 10/11] chore: cleanup --- .../src/ui/action/views/swap/index.vue | 115 +----------------- 1 file changed, 3 insertions(+), 112 deletions(-) diff --git a/packages/extension/src/ui/action/views/swap/index.vue b/packages/extension/src/ui/action/views/swap/index.vue index 93a711a0a..c8406cdeb 100644 --- a/packages/extension/src/ui/action/views/swap/index.vue +++ b/packages/extension/src/ui/action/views/swap/index.vue @@ -34,7 +34,6 @@ :token="fromToken" :autofocus="true" :error-message="errors.inputAmount" - @update:input-max="setMax" @toggle:select="toggleFromToken" @update:value="inputAmountFrom" /> @@ -66,56 +65,15 @@ v-if="fromToken" :value="fromAmount || ''" :token="fromToken" - :autofocus="true" + :autofocus="false" :error-message="errors.inputAmount" - @update:input-max="setMax" - @toggle:select="toggleFromToken" + @toggle:select="toggleToToken" @update:value="inputAmountFrom" />
- - - - - -
-
([]); -const fromAccount = ref( - props.accountInfo.selectedAccount!, -); /** Receiver address (address that will be receiving the swap output) */ const address = ref(''); /** Is the receiver address valid */ const addressIsValid = ref(true); -const isOpenSelectContact = ref(false); -const addressInput = ref(); const toAccounts = ref([]); const fetchingTokens = ref(true); @@ -299,14 +247,7 @@ const isLooking = ref(false); const swapMax = ref(false); const reverseFromAndTo = () => { - console.log('Reverse from and to'); - // const from = fromToken.value; - // const to = toToken.value; - // fromToken.value = to; - // toToken.value = from; - // const fromAmountVal = fromAmount.value; - // fromAmount.value = toAmount.value; - // toAmount.value = fromAmountVal; + console.log('Reverse from and to token and amount'); }; let api: Web3Eth | Connection; @@ -468,10 +409,6 @@ const setToTokens = () => { ); }; -const setMax = () => { - fromAmount.value = new SwapToken(fromToken.value!).getBalanceReadable(); -}; - const inputAddress = (text: string) => { const debounceResolve = debounce(() => { nameResolver @@ -491,10 +428,6 @@ const inputAddress = (text: string) => { isValidToAddress(); }; -const toggleSelectContact = () => { - isOpenSelectContact.value = !isOpenSelectContact.value; -}; - /** * Check whether the receiver address is a valid on the network * @@ -798,11 +731,6 @@ const inputAmountFrom = async (newVal: string) => { swapMax.value = false; errors.value.inputAmount = ''; }; -const selectAccount = (account: string) => { - address.value = account; - isValidToAddress(); - isOpenSelectContact.value = false; -}; const toggleToNetwork = () => { toNetworkOpen.value = !toNetworkOpen.value; @@ -1084,46 +1012,9 @@ const sendAction = async () => { box-sizing: border-box; background-color: @white; - // &-cancel { - // width: 140px; - // } - &-send { width: 100%; } } - - // .send-address-input { - // margin: 8px 0 8px 0; - // width: 100%; - // } } - - From 8c2502fec06925bac1af940f96fa87a443558334 Mon Sep 17 00:00:00 2001 From: olgakup <16910687+olgakup@users.noreply.github.com> Date: Mon, 14 Apr 2025 17:12:35 -0700 Subject: [PATCH 11/11] feat: larg swap button in menu --- .../ui/action/components/app-menu/index.vue | 73 ++++++++++++++++++- .../action/icons/actions/swap-multicolor.vue | 36 +++++++++ 2 files changed, 108 insertions(+), 1 deletion(-) create mode 100644 packages/extension/src/ui/action/icons/actions/swap-multicolor.vue diff --git a/packages/extension/src/ui/action/components/app-menu/index.vue b/packages/extension/src/ui/action/components/app-menu/index.vue index ce5d1c027..1b7d11aa2 100644 --- a/packages/extension/src/ui/action/components/app-menu/index.vue +++ b/packages/extension/src/ui/action/components/app-menu/index.vue @@ -40,6 +40,7 @@ +
+ + + { (appMenuRef.value as HTMLElement).style.background = `radial-gradient(137.35% 97% at 100% 50%, rgba(250, 250, 250, 0.94) 0%, rgba(250, 250, 250, 0.96) 28.91%, rgba(250, 250, 250, 0.98) 100%), linear-gradient(180deg, ${newGradient} 80%, #684CFF 100%)`; }; + +/** ------------------ + * Swap Button + ------------------*/ +const route = useRoute(); +const router = useRouter(); +const openSwap = () => { + try { + router.push({ + name: 'swap', + params: { + id: route.params.id, + }, + }); + } catch (e) { + console.error('Error opening swap:', e); + } +};