Skip to content

Commit

Permalink
Merge remote-tracking branch 'origin/develop' into feature/swap-layout
Browse files Browse the repository at this point in the history
  • Loading branch information
@Nikita-Polyakov
Nikita-Polyakov committed Mar 27, 2024
2 parents c730b39 + 1339fca commit 2bf3dc4
Show file tree
Hide file tree
Showing 4 changed files with 158 additions and 87 deletions.
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@
},
"dependencies": {
"@metamask/detect-provider": "^2.0.0",
"@soramitsu/soraneo-wallet-web": "1.32.5",
"@soramitsu/soraneo-wallet-web": "1.32.6",
"@walletconnect/ethereum-provider": "^2.11.2",
"@walletconnect/modal": "^2.6.2",
"core-js": "^3.36.0",
Expand Down
137 changes: 109 additions & 28 deletions src/components/pages/Swap/Widget/Distribution.vue
View file
Original file line number Diff line number Diff line change
@@ -1,42 +1,83 @@
<template>
<base-widget v-bind="$attrs" :title="t('swap.route')">
<ul class="distribution">
<li v-for="{ input, output, amount, sources } in swapPaths" :key="input.address" class="distribution-step">
<div class="distribution-asset">
<token-logo :token="input" size="small" />
<span class="distribution-asset-amount">{{ amount }} {{ input.symbol }}</span>
</div>
<div v-if="sources.length" class="distribution-path">
<span class="distribution-path-line"></span>
<div class="distribution-path-sources">
<div
v-for="{ source, income, outcome, fiatDifference } in sources"
:key="source"
class="distribution-path-source"
>
<div class="flex-cell">
<span>{{ source }}:</span>
<value-status-wrapper :value="fiatDifference">
<formatted-amount :value="formatStringValue(fiatDifference)">%</formatted-amount>
</value-status-wrapper>
</div>
<div class="flex-cell">
<token-logo :token="input" size="mini" />{{ income }}
&rarr;
<token-logo :token="output" size="mini" />{{ outcome }}
<s-skeleton :loading="!swapPaths.length">
<template #template>
<div class="distribution">
<div class="distribution-step">
<div class="distribution-asset">
<template v-if="tokenFrom">
<token-logo :token="tokenFrom" size="small" class="distribution-asset-logo" />
<span class="distribution-asset-amount">{{ fromValue }} {{ tokenFrom.symbol }}</span>
</template>
</div>
<div class="distribution-path">
<span class="distribution-path-line"></span>
<div class="distribution-path-sources">
<div class="distribution-path-source">
<div class="flex-cell">
<s-skeleton-item element="rect" class="distribution-path-source-name" />
<s-skeleton-item element="rect" class="distribution-path-source-change" />
</div>
<div class="flex-cell">
<s-skeleton-item element="circle" />
<s-skeleton-item element="rect" />
<s-skeleton-item element="circle" />
<s-skeleton-item element="rect" />
</div>
</div>
</div>
</div>
</div>
<div class="distribution-step">
<div class="distribution-asset">
<template v-if="tokenTo">
<token-logo :token="tokenTo" size="small" class="distribution-asset-logo" />
<span class="distribution-asset-amount">{{ toValue }} {{ tokenTo.symbol }}</span>
</template>
</div>
</div>
</div>
</li>
</ul>
</template>

<ul class="distribution">
<li v-for="{ input, output, amount, sources } in swapPaths" :key="input.address" class="distribution-step">
<div class="distribution-asset">
<token-logo :token="input" size="small" class="distribution-asset-logo" />
<span class="distribution-asset-amount">{{ amount }} {{ input.symbol }}</span>
</div>
<div v-if="sources.length" class="distribution-path">
<span class="distribution-path-line"></span>
<div class="distribution-path-sources">
<div
v-for="{ source, income, outcome, fiatDifference } in sources"
:key="source"
class="distribution-path-source"
>
<div class="flex-cell">
<span class="distribution-path-source-name">{{ source }}:</span>
<value-status-wrapper :value="fiatDifference" class="distribution-path-source-change">
<formatted-amount :value="formatStringValue(fiatDifference)">%</formatted-amount>
</value-status-wrapper>
</div>
<div class="flex-cell">
<div class="flex-cell"><token-logo :token="input" size="mini" />{{ income }}</div>
&rarr;
<div class="flex-cell"><token-logo :token="output" size="mini" />{{ outcome }}</div>
</div>
</div>
</div>
</div>
</li>
</ul>
</s-skeleton>
</base-widget>
</template>

<script lang="ts">
import { LiquiditySourceTypes } from '@sora-substrate/liquidity-proxy/build/consts';
import { FPNumber } from '@sora-substrate/util';
import { components, mixins } from '@soramitsu/soraneo-wallet-web';
import { SSkeleton, SSkeletonItem } from '@soramitsu-ui/ui-vue2/lib/components/Skeleton';
import { Component, Mixins } from 'vue-property-decorator';
import TranslationMixin from '@/components/mixins/TranslationMixin';
Expand Down Expand Up @@ -72,6 +113,8 @@ const MARKETS = {
@Component({
components: {
SSkeleton,
SSkeletonItem,
TokenLogo: components.TokenLogo,
FormattedAmount: components.FormattedAmount,
BaseWidget: lazyComponent(Components.BaseWidget),
Expand All @@ -80,8 +123,12 @@ const MARKETS = {
})
export default class SwapDistributionWidget extends Mixins(mixins.FormattedAmountMixin, TranslationMixin) {
@state.swap.distribution private distribution!: Distribution[][];
@state.swap.fromValue fromValue!: string;
@state.swap.toValue toValue!: string;
@getter.assets.assetDataByAddress private getAsset!: (addr?: string) => Nullable<AccountAsset>;
@getter.swap.tokenFrom tokenFrom!: Nullable<AccountAsset>;
@getter.swap.tokenTo tokenTo!: Nullable<AccountAsset>;
get swapPaths(): SwapPath[] {
const paths: SwapPath[] = [];
Expand Down Expand Up @@ -126,11 +173,35 @@ export default class SwapDistributionWidget extends Mixins(mixins.FormattedAmoun
}
</script>

<style lang="scss">
.s-skeleton .distribution {
.el-skeleton__item {
display: inline-flex;
flex-shrink: 0;
width: initial;
&:not(:last-child) {
margin-bottom: 0;
}
&.el-skeleton__circle {
width: 16px;
height: 16px;
}
&.el-skeleton__rect {
min-width: 48px;
min-height: 16px;
}
}
}
</style>

<style lang="scss" scoped>
$path-color: var(--s-color-base-content-tertiary);
.flex-cell {
display: inline-flex;
display: flex;
flex-flow: row wrap;
align-items: center;
gap: $inner-spacing-tiny;
}
Expand All @@ -145,6 +216,9 @@ $path-color: var(--s-color-base-content-tertiary);
align-items: center;
gap: $inner-spacing-mini;
min-height: 40px;
min-width: 120px;
border-radius: var(--s-border-radius-mini);
background-color: $path-color;
padding: $inner-spacing-mini;
Expand All @@ -166,6 +240,7 @@ $path-color: var(--s-color-base-content-tertiary);
&-sources {
display: flex;
flex-flow: column nowrap;
flex-grow: 1;
padding: $inner-spacing-medium 0 $inner-spacing-medium $inner-spacing-medium;
gap: $inner-spacing-medium;
Expand All @@ -175,7 +250,6 @@ $path-color: var(--s-color-base-content-tertiary);
display: flex;
flex-flow: row wrap;
flex-grow: 1;
align-items: center;
justify-content: space-between;
position: relative;
gap: $inner-spacing-mini;
Expand All @@ -195,6 +269,13 @@ $path-color: var(--s-color-base-content-tertiary);
bottom: 0;
left: -#{$inner-spacing-medium};
}
&-name {
&.el-skeleton__item {
height: 16px;
width: 64px;
}
}
}
}
}
Expand Down
6 changes: 3 additions & 3 deletions src/components/pages/Swap/Widget/Transactions.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
size="small"
class="explore-table"
>
<s-table-column width="76">
<s-table-column width="74">
<template #header>
<span>{{ t('transaction.startTime') }}</span>
</template>
Expand All @@ -19,7 +19,7 @@
</div>
</template>
</s-table-column>
<s-table-column header-align="right" align="right">
<s-table-column width="106" header-align="right" align="right">
<template #header>
<span>{{ t('removeLiquidity.input') }}</span>
</template>
Expand All @@ -31,7 +31,7 @@
/>
</template>
</s-table-column>
<s-table-column header-align="left" align="left">
<s-table-column width="106" header-align="left" align="left">
<template #header>
<span>{{ t('removeLiquidity.output') }}</span>
</template>
Expand Down
Loading

0 comments on commit 2bf3dc4

Please sign in to comment.