Skip to content

feat: add ui for new action types #121

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
artsycoder533 wants to merge 5 commits into
base: main
Choose a base branch
from
Draft

feat: add ui for new action types #121

Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
36b9ef0
add ui for mint tokens
artsycoder533 Feb 7, 2023
af1d821
chore: add burn tokens ui
artsycoder533 Feb 7, 2023
42afec5
chore: add svg for mint tokens
artsycoder533 Feb 7, 2023
e77c773
chore: update create definition labels
artsycoder533 Feb 7, 2023
8f40722
wip: create token labels
artsycoder533 Feb 7, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
131 changes: 114 additions & 17 deletions src/views/Home.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -150,30 +150,75 @@
</div>
</div>
</div>
<!-- Other -->
<div v-if="action.type === 'Other'" class="grid grid-cols-1 md:grid-cols-2 grid-rows-1 gap-4 w-full px-3 py-1">

<!-- MintTokens -->
<div v-if="action.type === 'MintTokens'" class="grid grid-cols-1 md:grid-cols-2 grid-rows-1 gap-4 w-full px-3 py-1">
<!-- column 1 -->
<div class="grid md:grid-cols-2 justify-between w-full">
<div class="flex items-center gap-3 w-full">
<!-- svg -->
<svg width="26" height="12" viewBox="0 0 26 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M6.33333 8.33333C6.33333 8.89482 6.1561 9.44198 5.82689 9.89683C5.49768 10.3517 5.0333 10.691 4.49993 10.8665C3.96656 11.0419 3.39141 11.0445 2.85647 10.8739C2.32152 10.7033 1.85407 10.3682 1.52075 9.91641C1.18742 9.46457 1.00521 8.91904 1.00011 8.35757C0.995006 7.79611 1.16726 7.24736 1.49232 6.78953C1.81738 6.33171 2.27865 5.98817 2.81041 5.80787C3.34216 5.62758 3.91726 5.61974 4.45373 5.78546" stroke="#7A99AC" stroke-width="1.66222"/>
<path d="M3.66667 3.66667C3.66667 3.10518 3.8439 2.55802 4.17311 2.10317C4.50232 1.64831 4.9667 1.30898 5.50007 1.13353C6.03344 0.958082 6.60859 0.955467 7.14353 1.12606C7.67848 1.29666 8.14593 1.63175 8.47925 2.08359C8.81258 2.53543 8.99479 3.08096 8.99989 3.64243C9.00499 4.20389 8.83274 4.75264 8.50768 5.21047C8.18262 5.66829 7.72135 6.01183 7.18959 6.19213C6.65784 6.37242 6.08274 6.38026 5.54627 6.21454" stroke="#7A99AC" stroke-width="1.66222"/>
<path d="M19.6362 0.375L25.0299 5.7687L19.6362 11.1625V0.375Z" fill="#4F758B"/>
<path d="M20.21 5.76855H12.6362" stroke="#4F758B" stroke-width="1.8667" stroke-miterlimit="10"/>
</svg>

<!-- type -->
<span class="text-xs text-rGrayMed">{{ action.type }}</span>
</div>
<div class="flex items-center gap-1 text-sm justify-start w-full">
<span>{{ formatAmount(action.amount) }}</span>
<span class="text-rGrayMed">{{ action.rri.name.toUpperCase() }}</span>
</div>
</div>
<!-- column 2 -->
<div class="grid grid-cols-2 gap-4 justify-between">
<div class="flex flex-col md:flex-row items-center gap-1 text-xs justify-start w-full">
<!-- <span class="text-rGrayDark w-full md:w-24">Supply:</span>
<span class="flex items-center w-full">
<router-link :to="`/accounts/${action.to.toString()}`" class="text-rBlue text-sm">
{{ shortenedAddress(action.to.toString()) }}
</router-link>
<click-to-copy :text="action.to.toString()" class="text-rGrayDark"/>
</span> -->
</div>
<div class="flex flex-col md:flex-row items-center gap-2 text-xs justify-start w-full">
<span class="text-rGrayDark w-full md:w-24">To:</span>
<span class="flex items-center self-end w-full">
<router-link :to="`/validators/${action.to_account.toString()}`" class="text-rBlue text-sm">
{{ shortenedValidator(action.to_account.toString()) }}
</router-link>
<click-to-copy :text="action.to_account.toString()" class="text-rGrayDark"/>
</span>
</div>
</div>
</div>

<!-- BurnTokens -->
<div v-if="action.type === 'BurnTokens'" class="grid grid-cols-1 md:grid-cols-2 grid-rows-1 gap-4 w-full px-3 py-1">
<!-- column 1 -->
<div class="grid md:grid-cols-2 justify-between w-full">
<div class="flex items-center gap-3 w-full">
<!-- svg -->
<svg width="26" height="13" viewBox="0 0 26 13" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M19.7218 1.34509L25.1155 6.73879L19.7218 12.1326V1.34509Z" fill="#4F758B"/>
<path d="M20.2956 6.73865H12.7218" stroke="#4F758B" stroke-width="1.8667" stroke-miterlimit="10"/>
<path d="M2.04861 5.28021V4.14496C2.04861 2.59865 3.30217 1.34509 4.84848 1.34509C6.3948 1.34509 7.64835 2.59865 7.64835 4.14496V5.28021" stroke="#7A99AC" stroke-width="1.5" stroke-miterlimit="10"/>
<path d="M1 11.7448V5.18939H2.13447H7.58739H8.72185V11.4002H2.60558" stroke="#7A99AC" stroke-width="1.5" stroke-miterlimit="10"/>
<path d="M1 8.52174C1 10.4427 2.62806 12 4.63636 12C6.64467 12 8.27273 10.4427 8.27273 8.52174C8.27273 7.63504 7.92585 6.82584 7.35482 6.21151C6.21045 4.98036 4.63636 3.68087 4.63636 2V2V2C3.16978 2.87995 2.06635 4.25551 1.5255 5.87806L1.45455 6.09091" stroke="#7A99AC" stroke-width="1.87"/>
<path d="M19.6362 2L25.0299 7.3937L19.6362 12.7875V2Z" fill="#4F758B"/>
<path d="M20.21 7.39355H12.6362" stroke="#4F758B" stroke-width="1.8667" stroke-miterlimit="10"/>
</svg>

<!-- type -->
<span class="text-xs text-rGrayMed">{{ action.type }}</span>
</div>
<!-- <div class="flex items-center gap-1 text-sm justify-start w-full">
<div class="flex items-center gap-1 text-sm justify-start w-full">
<span>{{ formatAmount(action.amount) }}</span>
<span class="text-rGrayMed">{{ action.rri.name.toUpperCase() }}</span>
</div> -->
</div>
</div>
<!-- column 2 -->
<!-- <div class="grid grid-cols-2 gap-4 justify-between">
<div class="grid grid-cols-2 gap-4 justify-between">
<div class="flex flex-col md:flex-row items-center gap-1 text-xs justify-start w-full">
<span class="text-rGrayDark w-full md:w-24">Validator:</span>
<span class="text-rGrayDark w-full md:w-24">From:</span>
<span class="flex items-center w-full">
<router-link :to="`/accounts/${action.from_account.toString()}`" class="text-rBlue text-sm">
{{ shortenedAddress(action.from_account.toString()) }}
Expand All @@ -182,18 +227,68 @@
</span>
</div>
<div class="flex flex-col md:flex-row items-center gap-2 text-xs justify-start w-full">
<span class="text-rGrayDark w-full md:w-24">Staker:</span>
<!-- <span class="text-rGrayDark w-full md:w-24">To:</span>
<span class="flex items-center self-end w-full">
<router-link :to="`/validators/${action.to_validator.toString()}`" class="text-rBlue text-sm">
{{ shortenedValidator(action.to_validator.toString()) }}
<router-link :to="`/validators/${action.to_account.toString()}`" class="text-rBlue text-sm">
{{ shortenedValidator(action.to_account.toString()) }}
</router-link>
<click-to-copy :text="action.to_validator.toString()" class="text-rGrayDark"/>
<click-to-copy :text="action.to_account.toString()" class="text-rGrayDark"/>
</span> -->
</div>
</div>
</div>

<!-- CreateTokenDefinition -->
<div v-if="action.type === 'CreateTokenDefinition'" class="grid grid-cols-1 md:grid-cols-2 grid-rows-1 gap-4 w-full px-3 py-1">
<!-- column 1 -->
<div class="grid md:grid-cols-2 justify-between w-full">
<div class="flex items-center gap-3 w-full">
<!-- svg -->
<svg width="26" height="11" viewBox="0 0 26 11" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="5" cy="5" r="4" stroke="#7A99AC" stroke-width="1.87" stroke-dasharray="2 2"/>
<path d="M19.6362 0L25.0299 5.3937L19.6362 10.7875V0Z" fill="#4F758B"/>
<path d="M20.21 5.39355H12.6362" stroke="#4F758B" stroke-width="1.8667" stroke-miterlimit="10"/>
</svg>

<!-- type -->
<span class="text-xs text-rGrayMed">{{ action.type }}</span>
</div>
<div class="flex items-center gap-1 text-sm justify-start w-full">
<span class="text-rGrayDark w-full md:w-24">Token:</span>
<!-- What is FISHTOKEN?? is it the name -->
<span class="text-rGrayMed">{{ action.rri.name.toUpperCase() }}</span>
</div>
</div>
<!-- column 2 -->
<div class="grid grid-cols-2 gap-4 justify-between">
<div class="flex flex-col md:flex-row items-center gap-1 text-xs justify-start w-full">
<span class="text-rGrayDark w-full md:w-24">Supply:</span>
<span class="flex items-center w-full">
<!-- <span class="text-rGrayDark w-full md:w-24">{{action}}</span> -->
<span>{{ formatAmount(action.amount) }}</span>
<span class="text-rGrayMed">{{ action.rri.name.toUpperCase() }}</span>
<!-- <router-link :to="`/accounts/${action.from_account.toString()}`" class="text-rBlue text-sm">
{{ shortenedAddress(action.from_account.toString()) }}
</router-link> -->
<!-- <click-to-copy :text="action.from_account.toString()" class="text-rGrayDark"/> -->
</span>
<span></span>
</div>
</div> -->
<div class="flex flex-col md:flex-row items-center gap-2 text-xs justify-start w-full">
<span class="text-rGrayDark w-full md:w-24">To:</span>
<span class="flex items-center self-end w-full">
<router-link :to="`/validators/${action.to_account.toString()}`" class="text-rBlue text-sm">
{{ shortenedValidator(action.to_account.toString()) }}
</router-link>
<click-to-copy :text="action.to_account.toString()" class="text-rGrayDark"/>
</span>
</div>
</div>
</div>

</div>
</div>

<!-- show more actions link -->
<div v-if="txn.actions.length > 3" class="text-center p-2">
<router-link :to="transactionAddress(txn)" class="flex justify-center text-rBlue text-sm gap-1">
Expand Down Expand Up @@ -247,6 +342,7 @@ import useRadix from '@/composables/useRadix'
import { firstValueFrom } from 'rxjs'
import Observed from '@/helpers/observed'
import { AccountAddressT, AddressTypeT, AmountT, ExecutedAction, ExecutedTransaction, ExecutedTransferTokensAction, NetworkId, ValidatorAddressT } from '@radixdlt/application'
// ExecutedMintTokensAction, ExecutedBurnTokensAction, ExecutedCreateTokensDefinitionAction
import ClickToCopy from '@/components/ClickToCopy.vue'
import BigAmount, { asBigNumber } from '@/components/BigAmount.vue'
import { formatTransactionAddressForDisplay, formatValidatorAddressForDisplay, formatWalletAddressForDisplay } from '@/helpers/formatter'
Expand Down Expand Up @@ -278,10 +374,11 @@ export default defineComponent({
data.transactions.forEach(d => {
const { actions } = d
const alldata = JSON.stringify(d)
console.log(alldata)
// console.log(alldata)
actions.forEach(action => {
console.log(action)
if (action.type === 'Other') {
// console.log(actions)
console.log(d)
const json = JSON.stringify(actions)
const parse = JSON.parse(json)
// console.log(json)
Expand Down