diff --git a/src/components/assets/Erc20Currency.vue b/src/components/assets/Erc20Currency.vue index b79752042..921de0e98 100644 --- a/src/components/assets/Erc20Currency.vue +++ b/src/components/assets/Erc20Currency.vue @@ -33,82 +33,6 @@ </div> <div class="column--symbol"> {{ $t('usd') }} - - <!-- main start --> - <div - class="column--asset-buttons" - :class="isZkEvm ? 'column--buttons--zkevm' : 'column--buttons--multi'" - > - <!-- Memo: test checking if styling won't break --> - <!-- <div v-if="token.isXC20" /> --> - <router-link :to="buildTransferPageLink(token.symbol)"> - <button class="btn btn--sm"> - {{ $t('assets.transfer') }} - </button> - </router-link> - <div v-if="token.isWrappedToken && !token.isXC20"> - <a :href="token.wrapUrl" target="_blank" rel="noopener noreferrer"> - <button class="btn btn--sm">{{ $t('assets.wrap') }}</button> - </a> - </div> - <div v-if="isZkEvm"> - <router-link :to="buildEthereumBridgePageLink()"> - <button class="btn btn--sm">{{ $t('assets.bridge') }}</button> - </router-link> - </div> - <div class="screen--xl"> - <a - class="box--explorer" - :href="explorerLink" - target="_blank" - rel="noopener noreferrer" - > - <button class="btn btn--sm btn--explorer adjuster--width"> - <div class="container--explorer-icon adjuster--width"> - <astar-icon-external-link /> - </div> - </button> - </a> - <q-tooltip> - <span class="text--tooltip">{{ $t('blockscout') }}</span> - </q-tooltip> - </div> - <div class="screen--md"> - <button - class="btn btn--sm btn--icon adjuster--width" - @click=" - addToEvmProvider({ - tokenAddress: token.address, - symbol: token.symbol, - decimals: token.decimal, - image: token.image, - provider, - }) - " - > - <div class="icon--plus"> - <span> + </span> - </div> - <q-tooltip> - <span class="text--tooltip">{{ $t('assets.addToWallet') }}</span> - </q-tooltip> - </button> - </div> - <div v-if="isImportedToken" class="screen--xl"> - <button - class="btn btn--sm adjuster--width" - @click="handleDeleteStoredToken(token.address)" - > - <div class="adjuster--width"> - <astar-icon-delete size="20" /> - </div> - </button> - <q-tooltip> - <span class="text--tooltip">{{ $t('remove') }}</span> - </q-tooltip> - </div> - </div> - <!-- main end --> </div> </div> </div> @@ -133,11 +57,23 @@ <button class="btn btn--icon"> <astar-icon-bridge class="icon--bridge" /> </button> + <span class="text--expand-menu">{{ $t('assets.wrap') }}</span> + <q-tooltip> + <span class="text--tooltip">{{ $t('assets.wrap') }}</span> + </q-tooltip> </a> - <span class="text--expand-menu">{{ $t('assets.wrap') }}</span> - <q-tooltip> - <span class="text--tooltip">{{ $t('assets.wrap') }}</span> - </q-tooltip> + </div> + + <div v-if="isZkEvm"> + <router-link :to="buildEthereumBridgePageLink()"> + <button class="btn btn--icon"> + <astar-icon-bridge class="icon--bridge" /> + </button> + <span class="text--expand-menu">{{ $t('assets.bridge') }}</span> + <q-tooltip> + <span class="text--tooltip">{{ $t('assets.bridge') }}</span> + </q-tooltip> + </router-link> </div> <a :href="explorerLink" target="_blank" rel="noopener noreferrer"> diff --git a/src/components/assets/styles/asset-list.scss b/src/components/assets/styles/asset-list.scss index 59214e166..b69b4ea85 100644 --- a/src/components/assets/styles/asset-list.scss +++ b/src/components/assets/styles/asset-list.scss @@ -104,47 +104,6 @@ } } -// main start -.column--buttons--native-token { - @media (min-width: $xl) { - display: flex !important; - justify-content: flex-end; - width: 412px; - column-gap: 24px; - } - @media (min-width: $xxl) { - column-gap: 48px; - width: 484px; - } -} - -.column--buttons--multi { - @media (min-width: $xl) { - display: grid; - width: 400px; - grid-template-columns: 100px 100px 70px 70px; - justify-content: end; - column-gap: 24px; - } - @media (min-width: $xxl) { - column-gap: 48px; - } -} - -.column--buttons--zkevm { - @media (min-width: $xl) { - display: grid; - width: 400px; - grid-template-columns: auto auto 60px 60px 60px; - justify-content: end; - column-gap: 8px; - } - @media (min-width: $xxl) { - column-gap: 24px; - } -} -// main end - .adjuster--width { @media (min-width: $xl) { width: 70px !important;