Skip to content
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

Jump to bottom

Display and edit unified account #963

Merged
merged 4 commits into from
Oct 10, 2023
Merged

Display and edit unified account #963

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
68b1e9e
Display unified account details
bobo-k2 Oct 7, 2023
69ad289
Edit unified account
bobo-k2 Oct 9, 2023
54d5231
Cleanup
bobo-k2 Oct 9, 2023
8b45084
Update src/components/header/modals/account-unification/AuStep3.vue
bobo-k2 Oct 10, 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
30 changes: 29 additions & 1 deletion src/components/header/modals/ModalAccountUnification.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,9 +29,20 @@
:set-account-name="setAccountName"
:selected-evm-address="selectedEvmAddress"
:is-fetching-xc20-tokens="isFetchingXc20Tokens"
:is-edit="false"
@next="updateSteps(transferXc20Tokens.length > 0 ? 4 : 5)"
/>
</div>
<div v-else-if="currentStep === 100 && unifiedAccount">
<au-step3
:account-name="accountName"
:set-account-name="setAccountName"
:selected-evm-address="unifiedAccount.evmAddress"
:is-fetching-xc20-tokens="false"
:is-edit="true"
@next="updateSteps(101)"
/>
</div>
<div v-else-if="currentStep === 4">
<step4
:transfer-xc20-tokens="transferXc20Tokens"
Expand All @@ -58,7 +69,10 @@
<au-step6 />
</div>
<div v-else>
<user-account @next="updateSteps(1)" />
<user-account
:set-account-name="setAccountName"
@next="unifiedAccount ? updateSteps(100) : updateSteps(1)"
/>
</div>
</div>
</astar-modal-drawer>
Expand All @@ -77,6 +91,7 @@ import AuStep3 from 'src/components/header/modals/account-unification/AuStep3.vu
import AuStep4 from 'src/components/header/modals/account-unification/AuStep4.vue';
import AuStep5 from 'src/components/header/modals/account-unification/AuStep5.vue';
import AuStep6 from 'src/components/header/modals/account-unification/AuStep6.vue';
import { UnifiedAccount } from 'src/store/general/state';

export default defineComponent({
components: {
Expand Down Expand Up @@ -107,6 +122,9 @@ export default defineComponent({
const { currentAccount } = useAccount();
const isLoading = computed<boolean>(() => store.getters['general/isLoading']);
const totalCost = ref<string>('');
const unifiedAccount = computed<UnifiedAccount>(
() => store.getters['general/getUnifiedAccount']
);

const {
selectedEvmAddress,
Expand All @@ -122,8 +140,11 @@ export default defineComponent({
handleTransferXc20Tokens,
unifyAccounts,
getCost,
updateAccount,
} = useAccountUnification();

const { checkIfUnified } = useAccount();

const closeModal = async (): Promise<void> => {
isClosing.value = true;
const animationDuration = 500;
Expand Down Expand Up @@ -168,6 +189,10 @@ export default defineComponent({
if (!success) {
return;
}
} else if (step === 101) {
// Make a call to update unified account identity
await updateAccount(unifiedAccount.value.nativeAddress, accountName.value);
impelcrypto marked this conversation as resolved.
Show resolved Hide resolved
await checkIfUnified(unifiedAccount.value.nativeAddress);
}

currentStep.value = step;
Expand Down Expand Up @@ -195,6 +220,8 @@ export default defineComponent({
return `${t('wallet.unifiedAccount.create')} : 4`;
} else if (currentStep.value === 6) {
return '';
} else if (currentStep.value === 100) {
return t('wallet.unifiedAccount.editUnifiedAccount');
} else {
return t('wallet.unifiedAccount.yourAccount');
}
Expand All @@ -217,6 +244,7 @@ export default defineComponent({
isSendingXc20Tokens,
isLoading,
totalCost,
unifiedAccount,
closeModal,
backModal,
updateSteps,
Expand Down
5 changes: 3 additions & 2 deletions src/components/header/modals/ModalConnectWallet.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -125,7 +125,8 @@
</div>
</div>
</div>
<div v-if="isAccountUnification">
<!-- temporarily disable until we implement account selection UI -->
<!-- <div v-if="isAccountUnification">
<div class="title--account-type">
<span>
{{ $t('wallet.accountUnification') }}
Expand All @@ -141,7 +142,7 @@
</div>
</div>
</div>
</div>
</div> -->
<button :disabled="!currentAccountName" class="btn--disconnect" @click="disconnectAccount()">
{{ $t('disconnect') }}
</button>
Expand Down
21 changes: 17 additions & 4 deletions src/components/header/modals/account-unification/AuStep3.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,8 @@
type="text"
:placeholder="$t('wallet.unifiedAccount.unifiedAccountName')"
:maxlength="32"
@input="(event) => setAccountName(event)"
:value="accountName"
@input="(event) => updateAccountName(event)"
/>
</div>
</div>
Expand All @@ -40,17 +41,17 @@
<div>
<astar-button
class="btn"
:disabled="accountName === '' || isFetchingXc20Tokens"
:disabled="accountName === '' || isFetchingXc20Tokens || !accountNameSet"
@click="next()"
>Next</astar-button
>{{ isEdit ? $t('wallet.unifiedAccount.save') : $t('next') }}</astar-button
>
</div>
</div>
</template>

<script lang="ts">
import { useAccount } from 'src/hooks';
import { defineComponent } from 'vue';
import { defineComponent, ref } from 'vue';
import Jazzicon from 'vue3-jazzicon/src/components';

export default defineComponent({
Expand All @@ -72,6 +73,10 @@ export default defineComponent({
type: Boolean,
required: true,
},
isEdit: {
type: Boolean,
default: false,
},
},
emits: ['next'],
setup(props, { emit }) {
Expand All @@ -80,15 +85,23 @@ export default defineComponent({
};

const { currentAccount } = useAccount();
const accountNameSet = ref<boolean>(false);

const icon_img = {
metamask: require('/src/assets/img/metamask.png'),
};

const updateAccountName = (event: any): void => {
accountNameSet.value = true;
props.setAccountName(event);
};

return {
icon_img,
currentAccount,
accountNameSet,
next,
updateAccountName,
};
},
});
Expand Down
128 changes: 112 additions & 16 deletions src/components/header/modals/account-unification/UserAccount.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,17 +2,82 @@
<div>
<!-- unified -->
<div v-if="isAccountUnified">
<!-- TODO: add unified account info -->
<div class="text--account-name">
<img :src="icon_img.astar_gradient" class="text--account-name__icon" />
<div>Unified Account Name</div>
<jazzicon
class="text--account-name__icon"
:address="unifiedAccount?.nativeAddress"
:diameter="32"
/>
<div>{{ unifiedAccount?.name }}</div>
</div>
<div class="box--wallet-list">
<div class="row--wallet">native wallet</div>
<div class="row--wallet">evm wallet</div>
<div class="row--wallet">
<div class="column--icon">
<img :src="walletIcons.substrate" alt="wallet icon" />
</div>
<div class="column--address">
<div>{{ getShortenAddress(unifiedAccount?.nativeAddress ?? '') }}</div>
</div>
<div class="column--actions">
<div>
<button
id="copyAddress"
type="button"
class="icon--primary"
@click="copyAddress(unifiedAccount?.nativeAddress ?? '')"
>
<astar-icon-copy />
</button>
<q-tooltip>
<span class="text--tooltip">{{ $t('copy') }}</span>
</q-tooltip>
</div>
<a :href="subScan" target="_blank" rel="noopener noreferrer">
<button class="icon--primary">
<astar-icon-external-link />
</button>
<q-tooltip>
<span class="text--tooltip">{{ $t('subscan') }}</span>
</q-tooltip>
</a>
</div>
</div>
<div class="row--wallet">
<div class="column--icon">
<img :src="walletIcons.evm" alt="wallet icon" />
</div>
<div class="column--address">
<div>{{ getShortenAddress(unifiedAccount?.evmAddress ?? '') }}</div>
</div>
<div class="column--actions">
<div>
<button
id="copyAddress"
type="button"
class="icon--primary"
@click="copyAddress(unifiedAccount?.evmAddress ?? '')"
>
<astar-icon-copy />
</button>
<q-tooltip>
<span class="text--tooltip">{{ $t('copy') }}</span>
</q-tooltip>
</div>
<a :href="blockscout" target="_blank" rel="noopener noreferrer">
<button class="icon--primary">
<astar-icon-external-link />
</button>
<q-tooltip>
<span class="text--tooltip">{{ $t('blockscout') }}</span>
</q-tooltip>
</a>
</div>
</div>
</div>
<div class="btn--edit">
<astar-button class="btn">{{ $t('dappStaking.edit') }}</astar-button>
<astar-button :disabled="isH160" class="btn" @click="edit()">{{
$t('dappStaking.edit')
}}</astar-button>
</div>
</div>

Expand All @@ -35,7 +100,12 @@
</div>
<div class="column--actions">
<div>
<button id="copyAddress" type="button" class="icon--primary" @click="copyAddress">
<button
id="copyAddress"
type="button"
class="icon--primary"
@click="copyAddress(currentAccount)"
>
<astar-icon-copy />
</button>
<q-tooltip>
Expand All @@ -55,7 +125,6 @@
</div>
</div>

<!-- Introduce Account Unification -->
<div v-if="!isAccountUnified" class="wrapper--introduce-au">
<div class="text--introduce-au">
<span>{{ $t('wallet.unifiedAccount.introduce') }}</span>
Expand All @@ -73,15 +142,23 @@
<script lang="ts">
import { useStore } from 'src/store';
import { computed, defineComponent, ref } from 'vue';
import { useAccount, useWalletIcon, useNetworkInfo } from 'src/hooks';
import { useAccount, useWalletIcon, useNetworkInfo, useAccountUnification } from 'src/hooks';
import { getShortenAddress } from '@astar-network/astar-sdk-core';
import copy from 'copy-to-clipboard';
import { useI18n } from 'vue-i18n';
import { providerEndpoints } from 'src/config/chainEndpoints';
import Help from 'src/components/header/modals/account-unification/Help.vue';
import { UnifiedAccount } from 'src/store/general/state';
import Jazzicon from 'vue3-jazzicon/src/components';

export default defineComponent({
components: { Help },
components: { Help, [Jazzicon.name]: Jazzicon },
props: {
setAccountName: {
type: Function,
required: true,
},
},
emits: ['next'],
setup(props, { emit }) {
const next = () => {
Expand All @@ -95,26 +172,42 @@ export default defineComponent({
const { currentNetworkIdx } = useNetworkInfo();

const isH160 = computed<boolean>(() => store.getters['general/isH160Formatted']);
const unifiedAccount = computed<UnifiedAccount | undefined>(
() => store.getters['general/getUnifiedAccount']
);
const isAccountUnified = computed<boolean>(() => unifiedAccount.value !== undefined);
const walletIcons = {
substrate: require('/src/assets/img/logo-polkadot-js.png'),
evm: require('/src/assets/img/ethereum.png'),
};

const copyAddress = (): void => {
copy(currentAccount.value);
const copyAddress = (address: string): void => {
copy(address);
store.dispatch('general/showAlertMsg', {
msg: t('toast.copyAddressSuccessfully'),
alertType: 'copied',
});
};

const edit = (): void => {
props.setAccountName(unifiedAccount.value?.name ?? '');
next();
};

const blockscout = computed<string>(
() =>
`${providerEndpoints[currentNetworkIdx.value].blockscout}/address/${currentAccount.value}`
`${providerEndpoints[currentNetworkIdx.value].blockscout}/address/${
unifiedAccount.value ? unifiedAccount.value.evmAddress : currentAccount.value
}`
);

const subScan = computed<string>(
() => `${providerEndpoints[currentNetworkIdx.value].subscan}/account/${currentAccount.value}`
() =>
`${providerEndpoints[currentNetworkIdx.value].subscan}/account/${
unifiedAccount.value ? unifiedAccount.value.nativeAddress : currentAccount.value
}`
);

const isAccountUnified = ref<boolean>(false);

const icon_img = {
astar_gradient: require('/src/assets/img/astar_icon.svg'),
};
Expand All @@ -128,9 +221,12 @@ export default defineComponent({
subScan,
isAccountUnified,
icon_img,
unifiedAccount,
walletIcons,
getShortenAddress,
copyAddress,
next,
edit,
};
},
});
Expand Down
Loading
Loading