PSS-129: Manage liquidity #13
Conversation
src/components/TokenLogo.vue
Outdated
| @@ -17,18 +17,13 @@ export default class TokenLogo extends Mixins(TranslationMixin) { | |||
| @Prop({ type: String, default: LogoSize.MEDIUM, required: false }) readonly size!: LogoSize | |||
|
|
|||
| get tokenClasses (): string { | |||
| let classes = 'token-logo' | |||
| const classes = ['token-logo'] | |||
There was a problem hiding this comment.
I think we could have special variable with 'token-logo' class and use it like base/prefix for all classes in this block.
src/views/AddLiquidity.vue
Outdated
| {{ t('exchange.max') }} | ||
| </s-button> | ||
| <s-button type="tertiary" size="small" icon="chevron-bottom-rounded" class="el-button--choose-token" @click="secondModalVisible = true"> | ||
| <token-logo :token="secondToken.symbol || ''" size="small" /> |
There was a problem hiding this comment.
Right now we copy the second part for token attribute all the time. Maybe it's better to check it in TokenLogo prop and add '' value there?
src/views/AddLiquidity.vue
Outdated
| </s-form> | ||
|
|
||
| <div v-if="areTokensSelected" class="card"> | ||
| <div class="card__title">{{ t('createPair.pricePool') }}</div> |
There was a problem hiding this comment.
We have special component in UI Lib. It's called Card. It has title and body parts. Maybe we could use it here and in other similar places.
src/views/AddLiquidity.vue
Outdated
| import SelectToken from '@/components/SelectToken.vue' | ||
| import ConfirmCreatePair from '@/components/ConfirmCreatePair.vue' | ||
| import CreatePairSubmit from '@/components/CreatePairSubmit.vue' | ||
| import TokenLogo from '@/components/TokenLogo.vue' |
There was a problem hiding this comment.
Could you decrease number of imports and use lazyComponent(...) insteadof it, please? You can check example in https://github.com/soramitsu/polkaswap-exchange-web/pull/10/files#diff-484acf880bb98b33ba7022d0a6d9b5494b5ca56ec9437161ced1454efe17eb52
src/views/AddLiquidity.vue
Outdated
| font-size: $s-font-size-small; | ||
| } | ||
| } | ||
| .logo { |
There was a problem hiding this comment.
Could you remove this block, please? it seems that we don't need it anymore.
src/views/AddLiquidity.vue
Outdated
| /> | ||
| </s-form-item> | ||
| <div v-if="firstToken" class="token"> | ||
| <s-button v-if="connected" class="el-button--max" type="tertiary" size="small" @click="handleFirstMaxValue"> |
There was a problem hiding this comment.
Could you play with buttons border-radius and size please?
We should add borderRadius="mini" for el-button--max and el-button--empty-token, borderRadius="medium" for el-button--choose-token, also we colud remove size="medium" from all buttons, because this is a default value.
After that we could clean styles a bit, like remove border-radius properties and heights in some places.
| @@ -0,0 +1,528 @@ | |||
| <template> | |||
| <div class="remove-liquidity-container"> | |||
There was a problem hiding this comment.
Could you play with all comments from AddLiquidity component in this file too, please?
…ange-web into feature/PSS-129-Add-liquidity
Task
PSS-129: Liquidity actions pages .
Changes
Author
Signed-off-by: Aleksandr Makhnev [email protected]