From 2d9f813c12d68ddea6ca6421a05bce52e0337d35 Mon Sep 17 00:00:00 2001 From: clayzenx Date: Mon, 30 Jan 2023 13:01:27 +0700 Subject: [PATCH 01/95] warn fix --- components/landing/Promoted.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/landing/Promoted.vue b/components/landing/Promoted.vue index e443cdcaf..66a6f5f0c 100644 --- a/components/landing/Promoted.vue +++ b/components/landing/Promoted.vue @@ -3,7 +3,7 @@ SectionTitle.section-title {{ $t('Promotions') }} el-carousel(indicator-position="outside" arrow="never" :interval="7000") - el-carousel-item(v-for="promo in promoted" :key="promo") + el-carousel-item(v-for="promo in promoted" :key="promo.id") promo(:promo="promo") spacer From 1ddf979e0271aeb2be20b0758027b966186619ef Mon Sep 17 00:00:00 2001 From: clayzenx Date: Mon, 30 Jan 2023 15:08:04 +0700 Subject: [PATCH 02/95] Routes --- components/AlcorContainer.vue | 0 components/swap/SwapTabs.vue | 0 pages/swap2.vue | 26 +++++++++++++++++++++++ pages/swap2/manage-liquidity.vue | 4 ++++ pages/swap2/swap-tokens.vue | 36 ++++++++++++++++++++++++++++++++ 5 files changed, 66 insertions(+) create mode 100644 components/AlcorContainer.vue create mode 100644 components/swap/SwapTabs.vue create mode 100644 pages/swap2.vue create mode 100644 pages/swap2/manage-liquidity.vue create mode 100644 pages/swap2/swap-tokens.vue diff --git a/components/AlcorContainer.vue b/components/AlcorContainer.vue new file mode 100644 index 000000000..e69de29bb diff --git a/components/swap/SwapTabs.vue b/components/swap/SwapTabs.vue new file mode 100644 index 000000000..e69de29bb diff --git a/pages/swap2.vue b/pages/swap2.vue new file mode 100644 index 000000000..1e015f823 --- /dev/null +++ b/pages/swap2.vue @@ -0,0 +1,26 @@ + + + diff --git a/pages/swap2/manage-liquidity.vue b/pages/swap2/manage-liquidity.vue new file mode 100644 index 000000000..9f76af78e --- /dev/null +++ b/pages/swap2/manage-liquidity.vue @@ -0,0 +1,4 @@ + diff --git a/pages/swap2/swap-tokens.vue b/pages/swap2/swap-tokens.vue new file mode 100644 index 000000000..2409dcc63 --- /dev/null +++ b/pages/swap2/swap-tokens.vue @@ -0,0 +1,36 @@ + + + From c6f80c41158e67d063da5719716142e8c79da84b Mon Sep 17 00:00:00 2001 From: clayzenx Date: Tue, 31 Jan 2023 12:26:23 +0700 Subject: [PATCH 03/95] Swap form --- components/AlcorContainer.vue | 12 ++++ components/AlcorSelect.vue | 0 components/LangOption.vue | 7 +- components/MarketRow.vue | 21 +++--- components/ThemeOption.vue | 1 + components/TokenOption.vue | 20 ++++++ components/elements/ElementSelect.vue | 6 +- pages/swap2.vue | 100 +++++++++++++++++++++++--- pages/swap2/swap-tokens.vue | 2 +- 9 files changed, 144 insertions(+), 25 deletions(-) create mode 100644 components/AlcorSelect.vue create mode 100644 components/TokenOption.vue diff --git a/components/AlcorContainer.vue b/components/AlcorContainer.vue index e69de29bb..3f9e3d7e4 100644 --- a/components/AlcorContainer.vue +++ b/components/AlcorContainer.vue @@ -0,0 +1,12 @@ + + + diff --git a/components/AlcorSelect.vue b/components/AlcorSelect.vue new file mode 100644 index 000000000..e69de29bb diff --git a/components/LangOption.vue b/components/LangOption.vue index 4d563b4a2..a4c329e40 100644 --- a/components/LangOption.vue +++ b/components/LangOption.vue @@ -1,5 +1,9 @@ @@ -14,7 +15,7 @@ import ChevronIcon from '@/components/ChevronIcon' export default { components: { ChevronIcon }, - props: ['options', 'selected'] + props: ['options', 'selected', 'keyProps'] } @@ -55,7 +56,6 @@ export default { .element-item { cursor: pointer; - width: 260px; box-sizing: border-box; padding: 5px 10px; line-height: inherit; diff --git a/pages/swap2.vue b/pages/swap2.vue index 1e015f823..a85dc17a2 100644 --- a/pages/swap2.vue +++ b/pages/swap2.vue @@ -1,26 +1,104 @@ + + diff --git a/pages/swap2/swap-tokens.vue b/pages/swap2/swap-tokens.vue index 2409dcc63..b98d7a969 100644 --- a/pages/swap2/swap-tokens.vue +++ b/pages/swap2/swap-tokens.vue @@ -1,5 +1,5 @@ @@ -15,7 +15,7 @@ import ChevronIcon from '@/components/ChevronIcon' export default { components: { ChevronIcon }, - props: ['options', 'selected', 'keyProps'] + props: ['options', 'selected', 'keyField', 'disableList'] } diff --git a/pages/swap2.vue b/pages/swap2.vue index a85dc17a2..e584da9bf 100644 --- a/pages/swap2.vue +++ b/pages/swap2.vue @@ -2,21 +2,31 @@ .d-flex.gap-32.w-100 alcor-container.pool-form.d-flex.flex-column.gap-32 alcor-tabs.swap-tabs(:links="true" :tabs="tabs") - element-select.token-select(:options="tokens" keyProps="quote_name") + element-select.token-select(:options="tokens" keyField="quote_name" :disableList="true") template(#preOptions) - el-input(v-model='search' placeholder="Search by name or contract" clearable) - template(#option="{ option }") - token-option(:token="option" @click="changeSelected") + el-input(v-model='search' placeholder="Search by name or contract" clearable style="width: 370px") + recycle-scroller(:emit-update="true" class="scroller" :items="tokensFiltered" :item-size="45" keyField="symbol") + template(v-slot="{ item: token }") + .token.d-flex.justify-content-between.align-items-center.p-2 + .d-flex.gap-8.align-items-center + token-image(:src="$tokenLogo(token.symbol, token.contract)" height="25") + .fs-16 {{ token.quote_name }} + .text-muted.small {{ token.contract }} + + //.ml-auto(v-if="user") + span.text-muted {{ token.balance | commaFloat }} + template(#selected) .d-flex.gap-8.align-items-center.px-2 - el-input(v-model='inputAmount' :placeholder="0.0" clearable) + el-input(type="number" v-model='inputAmount' :placeholder="0.0" clearable) token-image(:src='$tokenLogo(inputToken.quote_name, inputToken.contract)') - .disable {{ inputToken.quote_name }} + .fs-18.disable {{ inputToken.quote_name }} nuxt-child + + diff --git a/pages/swap2.vue b/pages/swap2.vue index e584da9bf..3ea709241 100644 --- a/pages/swap2.vue +++ b/pages/swap2.vue @@ -1,61 +1,39 @@ @@ -103,18 +52,6 @@ export default { .pool-form { width: 405px; - .el-dropdown-menu.element-options { - top: 60px; - } - - .el-input { - font-size: 16px; - } - - .token:hover { - background-color: red; - } - .swap-tabs { gap: 0px; background: var(--btn-alternative); @@ -132,7 +69,7 @@ export default { } &::after { - transition: none; + display: none; } &.active { @@ -140,8 +77,7 @@ export default { background: var(--btn-active); &::after { - background: var(--btn-active); - transition: none; + display: none; } } } From 845e16894fdbc173ccafa3ad2cb5b95b731998cb Mon Sep 17 00:00:00 2001 From: clayzenx Date: Fri, 3 Feb 2023 14:46:59 +0700 Subject: [PATCH 30/95] Swap form --- assets/main.scss | 4 +++ components/TokenSelect.vue | 22 ++++---------- components/swap/SelectToken.vue | 26 ++++++++++------- pages/swap2.vue | 51 +++++++++++++++++++++++++++++++-- pages/swap2/swap-tokens.vue | 2 +- 5 files changed, 74 insertions(+), 31 deletions(-) diff --git a/assets/main.scss b/assets/main.scss index fa66a2925..dbb103646 100755 --- a/assets/main.scss +++ b/assets/main.scss @@ -1101,3 +1101,7 @@ a { .rot-90 { transform: rotate(90deg) !important; } + +.text-decoration-underline { + text-decoration: underline; +} diff --git a/components/TokenSelect.vue b/components/TokenSelect.vue index 6ef0d551a..0b3c3b0da 100644 --- a/components/TokenSelect.vue +++ b/components/TokenSelect.vue @@ -1,6 +1,6 @@ diff --git a/pages/swap2/swap-tokens.vue b/pages/swap2/swap-tokens.vue index b98d7a969..43e36f662 100644 --- a/pages/swap2/swap-tokens.vue +++ b/pages/swap2/swap-tokens.vue @@ -1,7 +1,7 @@ diff --git a/components/bridge/BridgeForm.vue b/components/bridge/BridgeForm.vue index c5158aa92..49a3fc896 100644 --- a/components/bridge/BridgeForm.vue +++ b/components/bridge/BridgeForm.vue @@ -1,123 +1,133 @@ From 115590bea5dac7c918d5456e2cf88dca462903e5 Mon Sep 17 00:00:00 2001 From: clayzenx Date: Tue, 7 Feb 2023 17:17:14 +0700 Subject: [PATCH 53/95] Add Liquidity Modal --- assets/main.scss | 7 +++ components/TokenSelect.vue | 5 +- components/modals/AddLiquidity.vue | 95 ++++++++++++++++++++++++++++++ components/modals/ModalsDialog.vue | 2 + pages/swap2/manage-liquidity.vue | 10 +++- store/modal.js | 6 ++ 6 files changed, 122 insertions(+), 3 deletions(-) create mode 100644 components/modals/AddLiquidity.vue diff --git a/assets/main.scss b/assets/main.scss index 7ab5d94db..9d16faf0e 100755 --- a/assets/main.scss +++ b/assets/main.scss @@ -957,6 +957,10 @@ a { font-size: 24px; } +.br-4 { + border-radius: 4px; +} + .gap-8 { gap: 8px; } @@ -1043,6 +1047,9 @@ a { color: var(--text-contrast) !important; } +.grey-border { + border: 1px solid var(--border-color); +} .active-border { border: 1px solid var(--main-green); height: fit-content; diff --git a/components/TokenSelect.vue b/components/TokenSelect.vue index 0b3c3b0da..8404e343a 100644 --- a/components/TokenSelect.vue +++ b/components/TokenSelect.vue @@ -17,7 +17,7 @@ element-select.token-select(:options="[1]" :disableList="true") .d-flex.gap-8.align-items-center.pr-2 el-input.amount(v-model.number="amountValue" @blur="blur" type="number" :placeholder="0.0" :clearable="!disabled" :disabled="disabled") token-image(:src='$tokenLogo(token.symbol, token.contract)' height="24") - .fs-24.color-default {{ token.symbol }} + .fs-24.color-default.text-nowrap {{ token.symbol }} + + + diff --git a/components/modals/ModalsDialog.vue b/components/modals/ModalsDialog.vue index 4ed4cd135..4f6e4548f 100644 --- a/components/modals/ModalsDialog.vue +++ b/components/modals/ModalsDialog.vue @@ -17,6 +17,7 @@ import MakeBid from '~/components/modals/MakeBid' import Transfer from '~/components/modals/Transfer' import RemoveFriend from '~/components/modals/RemoveFriend' import AddFriend from '~/components/modals/AddFriend' +import AddLiquidity from '~/components/modals/AddLiquidity' import Trade from '~/components/modals/Trade' import BlockUser from '~/components/modals/BlockUser' import Assets from '~/components/modals/Assets' @@ -35,6 +36,7 @@ export default { Transfer, RemoveFriend, AddFriend, + AddLiquidity, Trade, BlockUser, Assets, diff --git a/pages/swap2/manage-liquidity.vue b/pages/swap2/manage-liquidity.vue index b42dc3b29..969ab282e 100644 --- a/pages/swap2/manage-liquidity.vue +++ b/pages/swap2/manage-liquidity.vue @@ -12,7 +12,7 @@ alcor-button(orange) i.el-icon-arrow-right span Migrate - alcor-button(access) + alcor-button(access @click="openAddLiqidityModal") i.el-icon-circle-plus-outline span New Position .d-flex.justify-content-between.align-items-center.mt-2 @@ -24,10 +24,10 @@ template(#row="{ item }") pre {{ item }} - diff --git a/store/modal.js b/store/modal.js index 723154038..3b7cdf1bf 100644 --- a/store/modal.js +++ b/store/modal.js @@ -17,6 +17,12 @@ export const actions = { context && commit('setModalContext', context) }, + addLiquidity({ commit }, context) { + commit('setCurrent', 'add-liquidity') + commit('setVisible', true) + context && commit('setModalContext', context) + }, + assets({ commit }, context) { commit('setCurrent', 'assets') commit('setVisible', true) From a1508e4b83805e098c5915b2579076b8294ba4bb Mon Sep 17 00:00:00 2001 From: Avral Date: Tue, 7 Feb 2023 16:34:59 +0300 Subject: [PATCH 54/95] add element select & scrollbar & tag --- components/alcor-element/input/index.js | 8 + .../input/src/calcTextareaHeight.js | 103 ++ components/alcor-element/input/src/input.vue | 462 ++++++++ components/alcor-element/scrollbar/index.js | 8 + components/alcor-element/scrollbar/src/bar.js | 106 ++ .../alcor-element/scrollbar/src/main.js | 138 +++ .../alcor-element/scrollbar/src/util.js | 34 + .../alcor-element/select/navigation-mixin.js | 58 + .../alcor-element/select/option-group.vue | 61 + components/alcor-element/select/option.vue | 188 +++ .../alcor-element/select/select-dropdown.vue | 75 ++ components/alcor-element/select/select.vue | 1006 +++++++++++++++++ components/alcor-element/tag/index.js | 8 + components/alcor-element/tag/src/tag.vue | 66 ++ components/bridge/BridgeForm.vue | 51 +- package.json | 2 +- yarn.lock | 8 +- 17 files changed, 2371 insertions(+), 11 deletions(-) create mode 100644 components/alcor-element/input/index.js create mode 100644 components/alcor-element/input/src/calcTextareaHeight.js create mode 100644 components/alcor-element/input/src/input.vue create mode 100644 components/alcor-element/scrollbar/index.js create mode 100644 components/alcor-element/scrollbar/src/bar.js create mode 100644 components/alcor-element/scrollbar/src/main.js create mode 100644 components/alcor-element/scrollbar/src/util.js create mode 100644 components/alcor-element/select/navigation-mixin.js create mode 100644 components/alcor-element/select/option-group.vue create mode 100644 components/alcor-element/select/option.vue create mode 100644 components/alcor-element/select/select-dropdown.vue create mode 100644 components/alcor-element/select/select.vue create mode 100644 components/alcor-element/tag/index.js create mode 100644 components/alcor-element/tag/src/tag.vue diff --git a/components/alcor-element/input/index.js b/components/alcor-element/input/index.js new file mode 100644 index 000000000..0f2400ef6 --- /dev/null +++ b/components/alcor-element/input/index.js @@ -0,0 +1,8 @@ +import ElInput from './src/input' + +/* istanbul ignore next */ +ElInput.install = function(Vue) { + Vue.component(ElInput.name, ElInput) +} + +export default ElInput diff --git a/components/alcor-element/input/src/calcTextareaHeight.js b/components/alcor-element/input/src/calcTextareaHeight.js new file mode 100644 index 000000000..d7872ec6c --- /dev/null +++ b/components/alcor-element/input/src/calcTextareaHeight.js @@ -0,0 +1,103 @@ +let hiddenTextarea + +const HIDDEN_STYLE = ` + height:0 !important; + visibility:hidden !important; + overflow:hidden !important; + position:absolute !important; + z-index:-1000 !important; + top:0 !important; + right:0 !important +` + +const CONTEXT_STYLE = [ + 'letter-spacing', + 'line-height', + 'padding-top', + 'padding-bottom', + 'font-family', + 'font-weight', + 'font-size', + 'text-rendering', + 'text-transform', + 'width', + 'text-indent', + 'padding-left', + 'padding-right', + 'border-width', + 'box-sizing' +] + +function calculateNodeStyling(targetElement) { + const style = window.getComputedStyle(targetElement) + + const boxSizing = style.getPropertyValue('box-sizing') + + const paddingSize = + parseFloat(style.getPropertyValue('padding-bottom')) + + parseFloat(style.getPropertyValue('padding-top')) + + const borderSize = + parseFloat(style.getPropertyValue('border-bottom-width')) + + parseFloat(style.getPropertyValue('border-top-width')) + + const contextStyle = CONTEXT_STYLE.map( + (name) => `${name}:${style.getPropertyValue(name)}` + ).join(';') + + return { contextStyle, paddingSize, borderSize, boxSizing } +} + +export default function calcTextareaHeight( + targetElement, + minRows = 1, + maxRows = null +) { + if (!hiddenTextarea) { + hiddenTextarea = document.createElement('textarea') + document.body.appendChild(hiddenTextarea) + } + + let { + paddingSize, + borderSize, + boxSizing, + contextStyle + } = calculateNodeStyling(targetElement) + + hiddenTextarea.setAttribute('style', `${contextStyle};${HIDDEN_STYLE}`) + hiddenTextarea.value = targetElement.value || targetElement.placeholder || '' + + let height = hiddenTextarea.scrollHeight + const result = {} + + if (boxSizing === 'border-box') { + height = height + borderSize + } else if (boxSizing === 'content-box') { + height = height - paddingSize + } + + hiddenTextarea.value = '' + let singleRowHeight = hiddenTextarea.scrollHeight - paddingSize + + if (minRows !== null) { + let minHeight = singleRowHeight * minRows + if (boxSizing === 'border-box') { + minHeight = minHeight + paddingSize + borderSize + } + height = Math.max(minHeight, height) + result.minHeight = `${minHeight}px` + } + if (maxRows !== null) { + let maxHeight = singleRowHeight * maxRows + if (boxSizing === 'border-box') { + maxHeight = maxHeight + paddingSize + borderSize + } + height = Math.min(maxHeight, height) + } + result.height = `${height}px` + hiddenTextarea.parentNode && + hiddenTextarea.parentNode.removeChild(hiddenTextarea) + hiddenTextarea = null + return result +} diff --git a/components/alcor-element/input/src/input.vue b/components/alcor-element/input/src/input.vue new file mode 100644 index 000000000..c11c82db7 --- /dev/null +++ b/components/alcor-element/input/src/input.vue @@ -0,0 +1,462 @@ + + diff --git a/components/alcor-element/scrollbar/index.js b/components/alcor-element/scrollbar/index.js new file mode 100644 index 000000000..177c0a04b --- /dev/null +++ b/components/alcor-element/scrollbar/index.js @@ -0,0 +1,8 @@ +import Scrollbar from './src/main' + +/* istanbul ignore next */ +Scrollbar.install = function(Vue) { + Vue.component(Scrollbar.name, Scrollbar) +} + +export default Scrollbar diff --git a/components/alcor-element/scrollbar/src/bar.js b/components/alcor-element/scrollbar/src/bar.js new file mode 100644 index 000000000..cd6752fbb --- /dev/null +++ b/components/alcor-element/scrollbar/src/bar.js @@ -0,0 +1,106 @@ +import { on, off } from 'element-ui/src/utils/dom' +import { renderThumbStyle, BAR_MAP } from './util' + +/* istanbul ignore next */ +export default { + name: 'Bar', + + props: { + vertical: Boolean, + size: String, + move: Number + }, + + computed: { + bar() { + return BAR_MAP[this.vertical ? 'vertical' : 'horizontal'] + }, + + wrap() { + return this.$parent.wrap + } + }, + + render(h) { + const { size, move, bar } = this + + return ( +
+
+
+ ) + }, + + methods: { + clickThumbHandler(e) { + // prevent click event of right button + if (e.ctrlKey || e.button === 2) { + return + } + this.startDrag(e) + this[this.bar.axis] = + e.currentTarget[this.bar.offset] - + (e[this.bar.client] - + e.currentTarget.getBoundingClientRect()[this.bar.direction]) + }, + + clickTrackHandler(e) { + const offset = Math.abs( + e.target.getBoundingClientRect()[this.bar.direction] - + e[this.bar.client] + ) + const thumbHalf = this.$refs.thumb[this.bar.offset] / 2 + const thumbPositionPercentage = + ((offset - thumbHalf) * 100) / this.$el[this.bar.offset] + + this.wrap[this.bar.scroll] = + (thumbPositionPercentage * this.wrap[this.bar.scrollSize]) / 100 + }, + + startDrag(e) { + e.stopImmediatePropagation() + this.cursorDown = true + + on(document, 'mousemove', this.mouseMoveDocumentHandler) + on(document, 'mouseup', this.mouseUpDocumentHandler) + document.onselectstart = () => false + }, + + mouseMoveDocumentHandler(e) { + if (this.cursorDown === false) return + const prevPage = this[this.bar.axis] + + if (!prevPage) return + + const offset = + (this.$el.getBoundingClientRect()[this.bar.direction] - + e[this.bar.client]) * + -1 + const thumbClickPosition = this.$refs.thumb[this.bar.offset] - prevPage + const thumbPositionPercentage = + ((offset - thumbClickPosition) * 100) / this.$el[this.bar.offset] + + this.wrap[this.bar.scroll] = + (thumbPositionPercentage * this.wrap[this.bar.scrollSize]) / 100 + }, + + mouseUpDocumentHandler(e) { + this.cursorDown = false + this[this.bar.axis] = 0 + off(document, 'mousemove', this.mouseMoveDocumentHandler) + document.onselectstart = null + } + }, + + destroyed() { + off(document, 'mouseup', this.mouseUpDocumentHandler) + } +} diff --git a/components/alcor-element/scrollbar/src/main.js b/components/alcor-element/scrollbar/src/main.js new file mode 100644 index 000000000..fd1f2f037 --- /dev/null +++ b/components/alcor-element/scrollbar/src/main.js @@ -0,0 +1,138 @@ +// reference https://github.com/noeldelgado/gemini-scrollbar/blob/master/index.js + +import { + addResizeListener, + removeResizeListener +} from 'element-ui/src/utils/resize-event' +import scrollbarWidth from 'element-ui/src/utils/scrollbar-width' +import { toObject } from 'element-ui/src/utils/util' +import Bar from './bar' + +/* istanbul ignore next */ +export default { + name: 'ElScrollbar', + + components: { Bar }, + + props: { + native: Boolean, + wrapStyle: {}, + wrapClass: {}, + viewClass: {}, + viewStyle: {}, + noresize: Boolean, // 如果 container 尺寸不会发生变化，最好设置它可以优化性能 + tag: { + type: String, + default: 'div' + } + }, + + data() { + return { + sizeWidth: '0', + sizeHeight: '0', + moveX: 0, + moveY: 0 + } + }, + + computed: { + wrap() { + return this.$refs.wrap + } + }, + + render(h) { + let gutter = scrollbarWidth() + let style = this.wrapStyle + + if (gutter) { + const gutterWith = `-${gutter}px` + const gutterStyle = `margin-bottom: ${gutterWith}; margin-right: ${gutterWith};` + + if (Array.isArray(this.wrapStyle)) { + style = toObject(this.wrapStyle) + style.marginRight = style.marginBottom = gutterWith + } else if (typeof this.wrapStyle === 'string') { + style += gutterStyle + } else { + style = gutterStyle + } + } + const view = h( + this.tag, + { + class: ['el-scrollbar__view', this.viewClass], + style: this.viewStyle, + ref: 'resize' + }, + this.$slots.default + ) + const wrap = ( +
+ {[view]} +
+ ) + let nodes + + if (!this.native) { + nodes = [ + wrap, + , + + ] + } else { + nodes = [ +
+ {[view]} +
+ ] + } + return h('div', { class: 'el-scrollbar' }, nodes) + }, + + methods: { + handleScroll() { + const wrap = this.wrap + + this.moveY = (wrap.scrollTop * 100) / wrap.clientHeight + this.moveX = (wrap.scrollLeft * 100) / wrap.clientWidth + }, + + update() { + let heightPercentage, widthPercentage + const wrap = this.wrap + if (!wrap) return + + heightPercentage = (wrap.clientHeight * 100) / wrap.scrollHeight + widthPercentage = (wrap.clientWidth * 100) / wrap.scrollWidth + + this.sizeHeight = heightPercentage < 100 ? heightPercentage + '%' : '' + this.sizeWidth = widthPercentage < 100 ? widthPercentage + '%' : '' + } + }, + + mounted() { + if (this.native) return + this.$nextTick(this.update) + !this.noresize && addResizeListener(this.$refs.resize, this.update) + }, + + beforeDestroy() { + if (this.native) return + !this.noresize && removeResizeListener(this.$refs.resize, this.update) + } +} diff --git a/components/alcor-element/scrollbar/src/util.js b/components/alcor-element/scrollbar/src/util.js new file mode 100644 index 000000000..40f98a7f3 --- /dev/null +++ b/components/alcor-element/scrollbar/src/util.js @@ -0,0 +1,34 @@ +export const BAR_MAP = { + vertical: { + offset: 'offsetHeight', + scroll: 'scrollTop', + scrollSize: 'scrollHeight', + size: 'height', + key: 'vertical', + axis: 'Y', + client: 'clientY', + direction: 'top' + }, + horizontal: { + offset: 'offsetWidth', + scroll: 'scrollLeft', + scrollSize: 'scrollWidth', + size: 'width', + key: 'horizontal', + axis: 'X', + client: 'clientX', + direction: 'left' + } +} + +export function renderThumbStyle({ move, size, bar }) { + const style = {} + const translate = `translate${bar.axis}(${move}%)` + + style[bar.size] = size + style.transform = translate + style.msTransform = translate + style.webkitTransform = translate + + return style +} diff --git a/components/alcor-element/select/navigation-mixin.js b/components/alcor-element/select/navigation-mixin.js new file mode 100644 index 000000000..4800f525b --- /dev/null +++ b/components/alcor-element/select/navigation-mixin.js @@ -0,0 +1,58 @@ +export default { + data() { + return { + hoverOption: -1 + } + }, + + computed: { + optionsAllDisabled() { + return this.options + .filter((option) => option.visible) + .every((option) => option.disabled) + } + }, + + watch: { + hoverIndex(val) { + if (typeof val === 'number' && val > -1) { + this.hoverOption = this.options[val] || {} + } + this.options.forEach((option) => { + option.hover = this.hoverOption === option + }) + } + }, + + methods: { + navigateOptions(direction) { + if (!this.visible) { + this.visible = true + return + } + if (this.options.length === 0 || this.filteredOptionsCount === 0) return + if (!this.optionsAllDisabled) { + if (direction === 'next') { + this.hoverIndex++ + if (this.hoverIndex === this.options.length) { + this.hoverIndex = 0 + } + } else if (direction === 'prev') { + this.hoverIndex-- + if (this.hoverIndex < 0) { + this.hoverIndex = this.options.length - 1 + } + } + const option = this.options[this.hoverIndex] + if ( + option.disabled === true || + option.groupDisabled === true || + !option.visible + ) { + this.navigateOptions(direction) + } + this.$nextTick(() => this.scrollToOption(this.hoverOption)) + } + } + } +} diff --git a/components/alcor-element/select/option-group.vue b/components/alcor-element/select/option-group.vue new file mode 100644 index 000000000..8ad1c1c32 --- /dev/null +++ b/components/alcor-element/select/option-group.vue @@ -0,0 +1,61 @@ + + + diff --git a/components/alcor-element/select/option.vue b/components/alcor-element/select/option.vue new file mode 100644 index 000000000..cbfa31df0 --- /dev/null +++ b/components/alcor-element/select/option.vue @@ -0,0 +1,188 @@ + + + diff --git a/components/alcor-element/select/select-dropdown.vue b/components/alcor-element/select/select-dropdown.vue new file mode 100644 index 000000000..d227a46ab --- /dev/null +++ b/components/alcor-element/select/select-dropdown.vue @@ -0,0 +1,75 @@ + + + diff --git a/components/alcor-element/select/select.vue b/components/alcor-element/select/select.vue new file mode 100644 index 000000000..6123ffe4c --- /dev/null +++ b/components/alcor-element/select/select.vue @@ -0,0 +1,1006 @@ + + + diff --git a/components/alcor-element/tag/index.js b/components/alcor-element/tag/index.js new file mode 100644 index 000000000..9de387cc0 --- /dev/null +++ b/components/alcor-element/tag/index.js @@ -0,0 +1,8 @@ +import ElTag from './src/tag' + +/* istanbul ignore next */ +ElTag.install = function(Vue) { + Vue.component(ElTag.name, ElTag) +} + +export default ElTag diff --git a/components/alcor-element/tag/src/tag.vue b/components/alcor-element/tag/src/tag.vue new file mode 100644 index 000000000..d8437f97c --- /dev/null +++ b/components/alcor-element/tag/src/tag.vue @@ -0,0 +1,66 @@ + diff --git a/components/bridge/BridgeForm.vue b/components/bridge/BridgeForm.vue index 49a3fc896..8538f67b4 100644 --- a/components/bridge/BridgeForm.vue +++ b/components/bridge/BridgeForm.vue @@ -80,8 +80,24 @@ client-only el-input(type="number" placeholder="Amount" v-model="formData.amount" :disabled="inProgress") span.max-btn.pointer(@click="setMax") MAX + alcor-select-two.network-select( + :value="formData.asset" + :disabled="inProgress" + placeholder="IBC Token" + filterable + ) + alcor-option-two(value=1) + span option1 + + alcor-option-two(value=2) + span option2 + + // el-option(v-for="asset in this.$store.getters['ibcBridge/availableAssets']") + // TokenImage(:src="$tokenLogo(asset.symbol, asset.sourceTokenContract)" height="25") + // .ml-2 {{ asset.symbol }} + //el-dropdown(trigger="click" :disabled="(!source && !destination) || inProgress") - el-dropdown(trigger="click") + //el-dropdown(trigger="click").alcor-select alcor-button.choise-asset-btn .d-flex.justify-content-between.align-items-center.w-100 .d-flex.gap-8.align-items-center(v-if="!formData.asset") @@ -91,7 +107,6 @@ client-only span {{ formData.asset.symbol }} i.el-icon-arrow-down - el-dropdown-menu(slot='dropdown') el-dropdown-item(v-for="asset in this.$store.getters['ibcBridge/availableAssets']") .d-flex.justify-content-between.align-items-center.w-100(@click="setAsset(asset)") @@ -132,10 +147,16 @@ client-only + + From 21faa456cd891947c4c20d7dde8ec8aa8c03fb38 Mon Sep 17 00:00:00 2001 From: Avral Date: Wed, 8 Feb 2023 00:30:19 +0300 Subject: [PATCH 56/95] update bridge --- .../alcor-element/button/button-group.vue | 10 + components/alcor-element/button/button.vue | 239 ++++++++++++++++++ components/bridge/BridgeForm.vue | 230 +++++++++-------- components/bridge/BridgeSlider.vue | 4 +- config.js | 2 +- plugins/localStorage.js | 2 +- plugins/mixins.js | 21 +- store/chain.js | 1 + store/ibcBridge.js | 4 +- store/index.js | 1 + 10 files changed, 407 insertions(+), 107 deletions(-) create mode 100644 components/alcor-element/button/button-group.vue create mode 100644 components/alcor-element/button/button.vue diff --git a/components/alcor-element/button/button-group.vue b/components/alcor-element/button/button-group.vue new file mode 100644 index 000000000..cb245b227 --- /dev/null +++ b/components/alcor-element/button/button-group.vue @@ -0,0 +1,10 @@ + + diff --git a/components/alcor-element/button/button.vue b/components/alcor-element/button/button.vue new file mode 100644 index 000000000..2b35b8769 --- /dev/null +++ b/components/alcor-element/button/button.vue @@ -0,0 +1,239 @@ + + + + diff --git a/components/bridge/BridgeForm.vue b/components/bridge/BridgeForm.vue index 8538f67b4..e1ef3838b 100644 --- a/components/bridge/BridgeForm.vue +++ b/components/bridge/BridgeForm.vue @@ -19,6 +19,7 @@ client-only ) template(#option="{ option }") network-option( :network="option") + .d-flex.flex-column .mb-3 Receive on alcor-select.network-select( @@ -44,7 +45,7 @@ client-only .d-flex.justify-content-between alcor-button.connect-button( - :disabled="(!sourceName || inProgress) && this.sourceWallet" + :disabled="(!sourceName) || (inProgress && this.sourceWallet)" @click="connectFromWallet" ) .d-flex.justify-content-between.align-items-center.w-100(v-if="formData.sender") @@ -54,13 +55,13 @@ client-only height=18 ) .fs-14 {{ formData.sender }} - .d-flex.align-items-center.gap-8(@click.stop="formData.sender = null") + .d-flex.align-items-center.gap-8(@click.stop="logout(formData.sender)") .fs-12 Logout i.el-icon-right .fs-14(v-else) Connect Wallet alcor-button.connect-button( - :disabled="(!destinationName || inProgress) && this.destinationWallet" + :disabled="(!destinationName) || (inProgress && this.destinationWallet)" @click="connectToWallet" ) .d-flex.justify-content-between.align-items-center.w-100(v-if="formData.receiver") @@ -70,7 +71,7 @@ client-only height=18 ) .fs-14 {{ formData.receiver }} - .d-flex.align-items-center.gap-8(@click.stop="formData.receiver = null") + .d-flex.align-items-center.gap-8(@click.stop="logout(formData.receiver)") .fs-12 Logout i.el-icon-right .fs-14(v-else) Connect Wallet @@ -80,44 +81,20 @@ client-only el-input(type="number" placeholder="Amount" v-model="formData.amount" :disabled="inProgress") span.max-btn.pointer(@click="setMax") MAX - alcor-select-two.network-select( - :value="formData.asset" - :disabled="inProgress" - placeholder="IBC Token" - filterable - ) - alcor-option-two(value=1) - span option1 - - alcor-option-two(value=2) - span option2 - - // el-option(v-for="asset in this.$store.getters['ibcBridge/availableAssets']") - // TokenImage(:src="$tokenLogo(asset.symbol, asset.sourceTokenContract)" height="25") - // .ml-2 {{ asset.symbol }} - - //el-dropdown(trigger="click" :disabled="(!source && !destination) || inProgress") - //el-dropdown(trigger="click").alcor-select - alcor-button.choise-asset-btn - .d-flex.justify-content-between.align-items-center.w-100 - .d-flex.gap-8.align-items-center(v-if="!formData.asset") - | Select Token - .d-flex.gap-8.align-items-center(v-else) - TokenImage(:src="$tokenLogo(formData.asset.symbol, formData.asset.sourceTokenContract)" height="25") - span {{ formData.asset.symbol }} - i.el-icon-arrow-down - - el-dropdown-menu(slot='dropdown') - el-dropdown-item(v-for="asset in this.$store.getters['ibcBridge/availableAssets']") - .d-flex.justify-content-between.align-items-center.w-100(@click="setAsset(asset)") - .d-flex.gap-8.align-items-center - TokenImage(:src="$tokenLogo(asset.symbol, asset.sourceTokenContract)" height="25") - span {{ asset.symbol }} + alcor-select-two.network-select(v-model="asset" value-key="symbol" @change="_setAsset" :disabled="inProgress" placeholder="IBC Token" filterable) + template(slot="empty") + .small.muted.text-center Chose Sent & Receive - .d-flex.justify-content-center.mt-4 - //alcor-button.transfer-btn(access :disabled="!isValid || inProgress" @click="transfer") Transfer and Prove + template(slot="prefix" v-if="this.asset") + TokenImage(:src="$tokenLogo(asset.symbol, asset.sourceTokenContract)" height="20") - alcor-button.transfer-btn(v-if="!error" access @click="transfer") Transfer and Prove + alcor-option-two(:value="asset" :label="asset.symbol" v-for="asset in availableAssets") + .d-flex.align-items-center.w-100 + TokenImage(:src="$tokenLogo(asset.symbol, asset.sourceTokenContract)" height="25") + .ml-2 {{ asset.symbol}} + + .d-flex.justify-content-center.mt-4 + alcor-button.transfer-btn(v-if="!error" :disabled="!isValid || inProgress" access @click="transfer") Transfer and Prove alcor-button.transfer-btn(v-else outline @click="transfer") Complete transfer // dev @@ -147,16 +124,11 @@ client-only From d68c8032524b0b4c0a76098a8674e870d152f86e Mon Sep 17 00:00:00 2001 From: Avral Date: Wed, 8 Feb 2023 01:17:30 +0300 Subject: [PATCH 60/95] try fix --- components/bridge/BridgeForm.vue | 6 +++--- pages/bridge.vue | 19 +++++++++++++++++-- 2 files changed, 20 insertions(+), 5 deletions(-) diff --git a/components/bridge/BridgeForm.vue b/components/bridge/BridgeForm.vue index 85e7117e3..db474fa38 100644 --- a/components/bridge/BridgeForm.vue +++ b/components/bridge/BridgeForm.vue @@ -197,9 +197,9 @@ export default { 'step' ]), - //step() { - // return this.$store.state.ibcBridge.step - //}, + step() { + return this.$store.state.ibcBridge.step || null + }, inProgress() { return [0, 1, 2, 3].includes(this.step) diff --git a/pages/bridge.vue b/pages/bridge.vue index 82820fe51..0e756ff72 100644 --- a/pages/bridge.vue +++ b/pages/bridge.vue @@ -2,8 +2,9 @@ #bridge-page.d-flex.align-items-center.flex-column.gap-16.mt-5 circles-bg.bg(stroke="#F89022") circles-bg.bg2(stroke="red") - .fs-48 Alcor IBC Bridge + h1.fs-48 Alcor IBC Bridge .fs-24 Bridge assets from different chains + client-only bridge-form.mt-4 @@ -14,7 +15,21 @@ import BridgeForm from '~/components/bridge/BridgeForm.vue' import CirclesBg from '~/components/bridge/CirclesBg.vue' export default { - components: { BridgeForm, CirclesBg } + components: { BridgeForm, CirclesBg }, + + head() { + return { + title: 'Alcor | IBC Bridge', + + meta: [ + { + hid: 'description', + name: 'description', + content: 'Bridge Antelope assets trustlessly, with no fee!' + } + ] + } + } } From effd65a4780a75035df14de719fc168bc5e599eb Mon Sep 17 00:00:00 2001 From: Avral Date: Wed, 8 Feb 2023 01:22:26 +0300 Subject: [PATCH 61/95] try to fix ssr --- components/bridge/BridgeForm.vue | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/components/bridge/BridgeForm.vue b/components/bridge/BridgeForm.vue index db474fa38..c45230c86 100644 --- a/components/bridge/BridgeForm.vue +++ b/components/bridge/BridgeForm.vue @@ -1,6 +1,6 @@ From 9bbb0bb5d83e731e88e99fad802aef7b816e5fa5 Mon Sep 17 00:00:00 2001 From: Avral Date: Wed, 8 Feb 2023 02:10:41 +0300 Subject: [PATCH 65/95] fix --- components/bridge/BridgeForm.vue | 12 ++++++------ pages/bridge.vue | 3 +-- 2 files changed, 7 insertions(+), 8 deletions(-) diff --git a/components/bridge/BridgeForm.vue b/components/bridge/BridgeForm.vue index d052dc450..41c51e1c1 100644 --- a/components/bridge/BridgeForm.vue +++ b/components/bridge/BridgeForm.vue @@ -1,6 +1,6 @@ + + + + diff --git a/components/bridge/Circle2.vue b/components/bridge/Circle2.vue new file mode 100644 index 000000000..68a64bc9a --- /dev/null +++ b/components/bridge/Circle2.vue @@ -0,0 +1,155 @@ + + + + + + + diff --git a/pages/bridge.vue b/pages/bridge.vue index f581c2e26..3e74211d8 100644 --- a/pages/bridge.vue +++ b/pages/bridge.vue @@ -1,20 +1,24 @@ From 6f8e239efb8fdf1a9d70bc4fd23c1badaf42e882 Mon Sep 17 00:00:00 2001 From: clayzenx Date: Wed, 8 Feb 2023 12:04:43 +0700 Subject: [PATCH 73/95] ALC-25 --- pages/bridge.vue | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/pages/bridge.vue b/pages/bridge.vue index 3e74211d8..23b80fc29 100644 --- a/pages/bridge.vue +++ b/pages/bridge.vue @@ -40,21 +40,23 @@ export default { .greet { z-index: 100 } - +#bridge-page { + position: relative; +} .circle1 { height: 1200px; width: 1200px; - top: -40%; - left: -25%; + top: -350px; + left: -650px; } .circle2 { height: 1200px; width: 1200px; - top: -40%; - right: -25%; + top: -350px; + right: -650px; } .bg { From 5b300a620009bf40813c856bafdeb1b4ba7a9504 Mon Sep 17 00:00:00 2001 From: clayzenx Date: Wed, 8 Feb 2023 12:25:52 +0700 Subject: [PATCH 74/95] view overflow --- assets/main.scss | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/assets/main.scss b/assets/main.scss index 9d16faf0e..e12609bb4 100755 --- a/assets/main.scss +++ b/assets/main.scss @@ -23,6 +23,12 @@ body { transition: 0.3s; } +body { + overflow-x: hidden; + overflow-y: visible; + height: 100vh; +} + .j-container { width: 100%; margin: auto; From 6732b8e6e0057537c829e0090e3aa9f80870e36e Mon Sep 17 00:00:00 2001 From: clayzenx Date: Wed, 8 Feb 2023 12:44:59 +0700 Subject: [PATCH 75/95] ALC-24 --- plugins/mixins.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/plugins/mixins.js b/plugins/mixins.js index a73d9cb6f..3bd8841a4 100755 --- a/plugins/mixins.js +++ b/plugins/mixins.js @@ -15,7 +15,7 @@ Vue.mixin({ computed: { isMobile() { - return (this.$device.isMobile) || (this.windowWidth && this.windowWidth <= 1175) + return (this.$device.isMobile) || (this.windowWidth && this.windowWidth <= 1375) } }, From 5bd1a69099d9e7b741319aedd54a1b1232934e40 Mon Sep 17 00:00:00 2001 From: clayzenx Date: Wed, 8 Feb 2023 17:33:22 +0700 Subject: [PATCH 76/95] screen fix --- components/layout/TopNav.vue | 2 +- plugins/mixins.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/components/layout/TopNav.vue b/components/layout/TopNav.vue index 28afb00c2..44426e282 100644 --- a/components/layout/TopNav.vue +++ b/components/layout/TopNav.vue @@ -217,7 +217,7 @@ export default { padding: 0; margin-left: 14px; display: flex; - gap: 32px; + gap: 16px; .item { padding: 4px 14px; diff --git a/plugins/mixins.js b/plugins/mixins.js index 3bd8841a4..7ff65a19d 100755 --- a/plugins/mixins.js +++ b/plugins/mixins.js @@ -15,7 +15,7 @@ Vue.mixin({ computed: { isMobile() { - return (this.$device.isMobile) || (this.windowWidth && this.windowWidth <= 1375) + return (this.$device.isMobile) || (this.windowWidth && this.windowWidth <= 1285) } }, From a66e5f6f7afe2e0e748ed9fb3a39b0ddee0013b1 Mon Sep 17 00:00:00 2001 From: Avral Date: Wed, 8 Feb 2023 13:41:40 +0300 Subject: [PATCH 77/95] fix logout --- components/bridge/BridgeForm.vue | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/components/bridge/BridgeForm.vue b/components/bridge/BridgeForm.vue index f2b35aef5..d0d14d953 100644 --- a/components/bridge/BridgeForm.vue +++ b/components/bridge/BridgeForm.vue @@ -54,7 +54,7 @@ height=18 ) .fs-14 {{ formData.sender }} - .d-flex.align-items-center.gap-8(@click.stop="logout(formData.sender)") + .d-flex.align-items-center.gap-8(@click.stop="logout('sender')") .fs-12 Logout i.el-icon-right .fs-14(v-else) Connect Wallet @@ -70,7 +70,7 @@ height=18 ) .fs-14 {{ formData.receiver }} - .d-flex.align-items-center.gap-8(@click.stop="logout(formData.receiver)") + .d-flex.align-items-center.gap-8(@click.stop="logout('receiver')") .fs-12 Logout i.el-icon-right .fs-14(v-else) Connect Wallet @@ -348,8 +348,7 @@ export default { logout(data) { if (this.inProgress) return - - data = null + this.formData[data] = null }, reset() { From d6d1c4bb5b68881cbbb6dae73d945938c1e9d6bb Mon Sep 17 00:00:00 2001 From: Avral Date: Wed, 8 Feb 2023 14:02:23 +0300 Subject: [PATCH 78/95] fix wallets --- components/bridge/BridgeForm.vue | 5 ----- components/modals/Login.vue | 20 ++++++++------------ 2 files changed, 8 insertions(+), 17 deletions(-) diff --git a/components/bridge/BridgeForm.vue b/components/bridge/BridgeForm.vue index d0d14d953..5ddb7596a 100644 --- a/components/bridge/BridgeForm.vue +++ b/components/bridge/BridgeForm.vue @@ -297,7 +297,6 @@ export default { watch: { availableAssets() { - console.log('availableAssets updated') this.asset = null }, @@ -386,7 +385,6 @@ export default { : this.asset.sourceTokenContract, this.asset.symbol ) - console.log('1') this.asset.quantity = parseFloat(this.formData.amount).toFixed(precision) + ' ' + this.asset.symbol } catch (e) { @@ -397,18 +395,15 @@ export default { this.setError(null) } - console.log('2') if ((this.step === 2 || this.step == 3) && !this.destinationWallet) await this.connectToWallet() const ibcTransfer = new IBCTransfer(this.source, this.destination, this.sourceWallet, this.destinationWallet, this.asset) - console.log('3') if (this.step === 0) { try { const signedTx = await ibcTransfer.signSourceTrx() const { tx, packedTx, leap } = await ibcTransfer.sourceTransfer(signedTx) // TODO leap - console.log('4') // TODO Handle if no //const emitxferAction = ibcTransfer.findEmitxferAction(tx) diff --git a/components/modals/Login.vue b/components/modals/Login.vue index 76582ee5d..3cab5016d 100644 --- a/components/modals/Login.vue +++ b/components/modals/Login.vue @@ -1,5 +1,6 @@