-
Notifications
You must be signed in to change notification settings - Fork 1.2k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: improve transaction builder token selection (#3878)
* feat: safe token verification init * fix: separate list item, translations * fix: token default logo * Refactored tokens list and item * get snapshot token list * fix confirmDialog confirm token * fix AvatarToken key * added filter by verified * fix texts and translations * Fix styling and cleanup * Add balance and refactor * Fix * Fixes * Use stamp * Add search by contract address * Fix text * Remove TODO * Fix style chevron * Add address to select input * Add docs link * Update src/plugins/safeSnap/components/Form/TokensModal.vue Co-authored-by: aurelianoB <[email protected]> * Add more decimals to balance * Fix * Fix * Remove src prop * Remove explorer link for unverified token and copy address instead --------- Co-authored-by: Sam <[email protected]> Co-authored-by: Sam <[email protected]> Co-authored-by: aurelianoB <[email protected]>
- Loading branch information
4 people
authored
Jun 8, 2023
1 parent
6fa74b5
commit eae549d
Showing
11 changed files
with
370 additions
and
72 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| export const ETH_CONTRACT = '0xeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,144 @@ | ||
| <script setup lang="ts"> | ||
| import { useConfirmDialog } from '@vueuse/core'; | ||
| import { TokenAsset } from '@/helpers/interfaces'; | ||
| import TokensModalItem from './TokensModalItem.vue'; | ||
| const props = defineProps<{ | ||
| open: boolean; | ||
| tokenAddress: string; | ||
| tokens: TokenAsset[]; | ||
| }>(); | ||
| const emit = defineEmits(['close', 'tokenAddress']); | ||
| const searchInput = ref(''); | ||
| const showUnverifiedTokens = ref(false); | ||
| const confirmDialogOpen = ref(false); | ||
| const confirmDialogData = ref(null); | ||
| const confirmDialog = useConfirmDialog(confirmDialogOpen); | ||
| confirmDialog.onConfirm(token => { | ||
| emit('tokenAddress', token.address); | ||
| emit('close'); | ||
| }); | ||
| const tokensFiltered = computed(() => { | ||
| const filterTokens = (token: TokenAsset) => { | ||
| const tokenProperties = [token.symbol, token.name, token.address].map( | ||
| property => property.toLowerCase() | ||
| ); | ||
| const searchQuery = searchInput.value.toLowerCase(); | ||
| const searchMatch = tokenProperties.some(property => | ||
| property.includes(searchQuery) | ||
| ); | ||
| const isVerified = token.address === 'main' || token.verified; | ||
| return ( | ||
| (searchMatch || !searchInput.value) && | ||
| (showUnverifiedTokens.value || isVerified) | ||
| ); | ||
| }; | ||
| return props.tokens.filter(filterTokens); | ||
| }); | ||
| function handleTokenClick(token) { | ||
| const isVerified = token.address === 'main' || token.verified; | ||
| if (!isVerified) { | ||
| confirmDialogData.value = token; | ||
| return confirmDialog.reveal(); | ||
| } | ||
| emit('tokenAddress', token.address); | ||
| emit('close'); | ||
| } | ||
| </script> | ||
|
|
||
| <template> | ||
| <BaseModal :open="open" @close="$emit('close')"> | ||
| <template #header> | ||
| <div | ||
| class="flex flex-col content-center items-center justify-center gap-x-4" | ||
| > | ||
| <h3>Assets</h3> | ||
| <BaseSearch | ||
| v-model="searchInput" | ||
| :placeholder="$t('searchPlaceholderTokens')" | ||
| modal | ||
| focus-on-mount | ||
| class="min-h-[60px] w-full flex-auto !px-3 pb-3 sm:!px-4" | ||
| > | ||
| <template #after> | ||
| <BasePopover :focus="false"> | ||
| <template #button> | ||
| <BaseButtonIcon> | ||
| <i-ho-funnel class="text-skin-link" /> | ||
| </BaseButtonIcon> | ||
| </template> | ||
| <template #content> | ||
| <h3 class="-mb-2 mt-3 text-center text-skin-heading"> | ||
| Filters | ||
| </h3> | ||
| <div class="m-4 space-y-3"> | ||
| <div class="space-y-2"> | ||
| <div class="space-y-2"> | ||
| <TuneCheckbox | ||
| v-model="showUnverifiedTokens" | ||
| hint="Show unverified tokens" | ||
| name="searchOnlyWithReason" | ||
| /> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </template> | ||
| </BasePopover> | ||
| </template> | ||
| </BaseSearch> | ||
| </div> | ||
| </template> | ||
|
|
||
| <template #default="{ maxHeight }"> | ||
| <div | ||
| class="flex w-full flex-col overflow-auto" | ||
| :style="{ minHeight: maxHeight }" | ||
| > | ||
| <TokensModalItem | ||
| v-for="token in tokensFiltered" | ||
| :key="token.address" | ||
| :token="token" | ||
| :is-selected="token.address === tokenAddress" | ||
| @select="handleTokenClick" | ||
| /> | ||
|
|
||
| <div | ||
| v-if="searchInput.length && tokensFiltered.length === 0" | ||
| class="flex flex-row content-start items-start justify-center py-4" | ||
| > | ||
| <span>{{ $t('noResultsFound') }}</span> | ||
| </div> | ||
| </div> | ||
| </template> | ||
| </BaseModal> | ||
|
|
||
| <teleport to="#modal"> | ||
| <ModalConfirmAction | ||
| :open="confirmDialogOpen" | ||
| show-cancel | ||
| @close="confirmDialog.cancel" | ||
| @confirm="confirmDialog.confirm(confirmDialogData)" | ||
| > | ||
| <BaseMessageBlock level="warning-red" class="m-4"> | ||
| This token isn't known to us. Please make sure it is the correct address | ||
| before proceeding. | ||
| <BaseLink | ||
| link="https://docs.snapshot.org/user-guides/token-verification" | ||
| > | ||
| {{ $t('learnMore') }}</BaseLink | ||
| > | ||
| </BaseMessageBlock> | ||
| </ModalConfirmAction> | ||
| </teleport> | ||
| </template> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,82 @@ | ||
| <script setup lang="ts"> | ||
| import { shorten, explorerUrl } from '@/helpers/utils'; | ||
| import { TokenAsset } from '@/helpers/interfaces'; | ||
| import { ETH_CONTRACT } from '@/helpers/constants'; | ||
| const props = defineProps<{ | ||
| token: TokenAsset; | ||
| isSelected: boolean; | ||
| }>(); | ||
| const emit = defineEmits(['select']); | ||
| const { formatNumber, getNumberFormatter } = useIntl(); | ||
| const { copyToClipboard } = useCopy(); | ||
| const exploreUrl = computed(() => { | ||
| const network = props.token.verified ? String(props.token.chainId) : null; | ||
| if (!network) return null; | ||
| return explorerUrl(network, props.token.address); | ||
| }); | ||
| </script> | ||
|
|
||
| <template> | ||
| <button | ||
| class="flex h-[64px] w-full cursor-pointer items-center justify-between border-b border-skin-border px-3 py-2 hover:bg-skin-border sm:px-4" | ||
| :class="{ | ||
| '!bg-skin-border': isSelected | ||
| }" | ||
| @click="emit('select', token)" | ||
| > | ||
| <div class="flex items-center"> | ||
| <div class="mr-3 flex"> | ||
| <AvatarToken | ||
| :address="token.address === 'main' ? ETH_CONTRACT : token.address" | ||
| size="38" | ||
| /> | ||
| </div> | ||
|
|
||
| <div class="pr-4"> | ||
| <div class="flex w-full items-center text-skin-link"> | ||
| <div class="flex items-center gap-1"> | ||
| {{ token.symbol }} | ||
| <i-ho-check-badge | ||
| v-if="token.verified || token.address === 'main'" | ||
| v-tippy="{ content: $t('verified') }" | ||
| class="text-sm text-green" | ||
| /> | ||
| </div> | ||
| </div> | ||
| <span class="line-clamp-1 text-left text-skin-text"> | ||
| {{ token.name }} | ||
| </span> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div class="h-full text-right"> | ||
| <span v-if="token.address !== 'main'" class="text-skin-link"> | ||
| {{ | ||
| formatNumber( | ||
| Number(token.balance), | ||
| getNumberFormatter({ maximumFractionDigits: 6 }).value | ||
| ) | ||
| }} | ||
| </span> | ||
| <div> | ||
| <BaseLink | ||
| v-if="token.address !== 'main' && exploreUrl" | ||
| :link="exploreUrl" | ||
| @click.stop | ||
| > | ||
| {{ shorten(token.address) }}</BaseLink | ||
| > | ||
| <span | ||
| v-else-if="token.address !== 'main'" | ||
| @click.stop="copyToClipboard(token.address)" | ||
| > | ||
| {{ shorten(token.address) }} | ||
| </span> | ||
| </div> | ||
| </div> | ||
| </button> | ||
| </template> |
Oops, something went wrong.
eae549dThere was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Successfully deployed to the following URLs:
snapshot – ./
snapshot-tau.vercel.app
snapshot-git-develop-snapshot.vercel.app
snapshot-snapshot.vercel.app
snapshot.org
vercel.snapshot.org