Skip to content

Commit

Permalink
refactor: change account addition form to have top-down approach (#7919)
Browse files Browse the repository at this point in the history
  • Loading branch information
@kelsos
kelsos committed May 13, 2024
1 parent 9bab45e commit 7f4a194
Show file tree
Hide file tree
Showing 19 changed files with 1,027 additions and 845 deletions.
11 changes: 9 additions & 2 deletions frontend/app/src/auto-imports.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -71,6 +71,7 @@ declare global {
const createGenericProjection: typeof import('@vueuse/math')['createGenericProjection']
const createGlobalState: typeof import('@vueuse/core')['createGlobalState']
const createInjectionState: typeof import('@vueuse/core')['createInjectionState']
const createNewBlockchainAccount: typeof import('./composables/accounts/blockchain/use-account-manage')['createNewBlockchainAccount']
const createNotification: typeof import('./utils/notifications')['createNotification']
const createPinia: typeof import('pinia')['createPinia']
const createProjection: typeof import('@vueuse/math')['createProjection']
Expand All @@ -96,6 +97,7 @@ declare global {
const downloadFileByTextContent: typeof import('./utils/download')['downloadFileByTextContent']
const downloadFileByUrl: typeof import('./utils/download')['downloadFileByUrl']
const eagerComputed: typeof import('@vueuse/core')['eagerComputed']
const editBlockchainAccount: typeof import('./composables/accounts/blockchain/use-account-manage')['editBlockchainAccount']
const effectScope: typeof import('vue')['effectScope']
const extendRef: typeof import('@vueuse/core')['extendRef']
const fetchDataAsync: typeof import('./utils/fetch-async')['fetchDataAsync']
Expand Down Expand Up @@ -330,6 +332,7 @@ declare global {
const useAccountDelete: typeof import('./composables/accounts/blockchain/use-account-delete')['useAccountDelete']
const useAccountDialog: typeof import('./composables/accounts/dialog')['useAccountDialog']
const useAccountLoading: typeof import('./composables/accounts/loading')['useAccountLoading']
const useAccountManage: typeof import('./composables/accounts/blockchain/use-account-manage')['useAccountManage']
const useAccountManagement: typeof import('./composables/user/account')['useAccountManagement']
const useAccountMigrationStore: typeof import('./store/blockchain/accounts/migrate')['useAccountMigrationStore']
const useAccountingApi: typeof import('./composables/api/settings/accounting-api')['useAccountingApi']
Expand Down Expand Up @@ -837,6 +840,7 @@ declare module 'vue' {
readonly createGenericProjection: UnwrapRef<typeof import('@vueuse/math')['createGenericProjection']>
readonly createGlobalState: UnwrapRef<typeof import('@vueuse/core')['createGlobalState']>
readonly createInjectionState: UnwrapRef<typeof import('@vueuse/core')['createInjectionState']>
readonly createNewBlockchainAccount: UnwrapRef<typeof import('./composables/accounts/blockchain/use-account-manage')['createNewBlockchainAccount']>
readonly createNotification: UnwrapRef<typeof import('./utils/notifications')['createNotification']>
readonly createPinia: UnwrapRef<typeof import('pinia')['createPinia']>
readonly createProjection: UnwrapRef<typeof import('@vueuse/math')['createProjection']>
Expand All @@ -862,6 +866,7 @@ declare module 'vue' {
readonly downloadFileByTextContent: UnwrapRef<typeof import('./utils/download')['downloadFileByTextContent']>
readonly downloadFileByUrl: UnwrapRef<typeof import('./utils/download')['downloadFileByUrl']>
readonly eagerComputed: UnwrapRef<typeof import('@vueuse/core')['eagerComputed']>
readonly editBlockchainAccount: UnwrapRef<typeof import('./composables/accounts/blockchain/use-account-manage')['editBlockchainAccount']>
readonly effectScope: UnwrapRef<typeof import('vue')['effectScope']>
readonly extendRef: UnwrapRef<typeof import('@vueuse/core')['extendRef']>
readonly fetchDataAsync: UnwrapRef<typeof import('./utils/fetch-async')['fetchDataAsync']>
Expand Down Expand Up @@ -1089,8 +1094,8 @@ declare module 'vue' {
readonly useAaveStore: UnwrapRef<typeof import('./store/defi/aave/index')['useAaveStore']>
readonly useAbs: UnwrapRef<typeof import('@vueuse/math')['useAbs']>
readonly useAccountDelete: UnwrapRef<typeof import('./composables/accounts/blockchain/use-account-delete')['useAccountDelete']>
readonly useAccountDialog: UnwrapRef<typeof import('./composables/accounts/dialog')['useAccountDialog']>
readonly useAccountLoading: UnwrapRef<typeof import('./composables/accounts/loading')['useAccountLoading']>
readonly useAccountManage: UnwrapRef<typeof import('./composables/accounts/blockchain/use-account-manage')['useAccountManage']>
readonly useAccountManagement: UnwrapRef<typeof import('./composables/user/account')['useAccountManagement']>
readonly useAccountMigrationStore: UnwrapRef<typeof import('./store/blockchain/accounts/migrate')['useAccountMigrationStore']>
readonly useAccountingApi: UnwrapRef<typeof import('./composables/api/settings/accounting-api')['useAccountingApi']>
Expand Down Expand Up @@ -1586,6 +1591,7 @@ declare module '@vue/runtime-core' {
readonly createGenericProjection: UnwrapRef<typeof import('@vueuse/math')['createGenericProjection']>
readonly createGlobalState: UnwrapRef<typeof import('@vueuse/core')['createGlobalState']>
readonly createInjectionState: UnwrapRef<typeof import('@vueuse/core')['createInjectionState']>
readonly createNewBlockchainAccount: UnwrapRef<typeof import('./composables/accounts/blockchain/use-account-manage')['createNewBlockchainAccount']>
readonly createNotification: UnwrapRef<typeof import('./utils/notifications')['createNotification']>
readonly createPinia: UnwrapRef<typeof import('pinia')['createPinia']>
readonly createProjection: UnwrapRef<typeof import('@vueuse/math')['createProjection']>
Expand All @@ -1611,6 +1617,7 @@ declare module '@vue/runtime-core' {
readonly downloadFileByTextContent: UnwrapRef<typeof import('./utils/download')['downloadFileByTextContent']>
readonly downloadFileByUrl: UnwrapRef<typeof import('./utils/download')['downloadFileByUrl']>
readonly eagerComputed: UnwrapRef<typeof import('@vueuse/core')['eagerComputed']>
readonly editBlockchainAccount: UnwrapRef<typeof import('./composables/accounts/blockchain/use-account-manage')['editBlockchainAccount']>
readonly effectScope: UnwrapRef<typeof import('vue')['effectScope']>
readonly extendRef: UnwrapRef<typeof import('@vueuse/core')['extendRef']>
readonly fetchDataAsync: UnwrapRef<typeof import('./utils/fetch-async')['fetchDataAsync']>
Expand Down Expand Up @@ -1838,8 +1845,8 @@ declare module '@vue/runtime-core' {
readonly useAaveStore: UnwrapRef<typeof import('./store/defi/aave/index')['useAaveStore']>
readonly useAbs: UnwrapRef<typeof import('@vueuse/math')['useAbs']>
readonly useAccountDelete: UnwrapRef<typeof import('./composables/accounts/blockchain/use-account-delete')['useAccountDelete']>
readonly useAccountDialog: UnwrapRef<typeof import('./composables/accounts/dialog')['useAccountDialog']>
readonly useAccountLoading: UnwrapRef<typeof import('./composables/accounts/loading')['useAccountLoading']>
readonly useAccountManage: UnwrapRef<typeof import('./composables/accounts/blockchain/use-account-manage')['useAccountManage']>
readonly useAccountManagement: UnwrapRef<typeof import('./composables/user/account')['useAccountManagement']>
readonly useAccountMigrationStore: UnwrapRef<typeof import('./store/blockchain/accounts/migrate')['useAccountMigrationStore']>
readonly useAccountingApi: UnwrapRef<typeof import('./composables/api/settings/accounting-api')['useAccountingApi']>
Expand Down
35 changes: 19 additions & 16 deletions frontend/app/src/components/accounts/blockchain/AddressInput.vue
View file
Original file line number Diff line number Diff line change
@@ -1,23 +1,20 @@
<script setup lang="ts">
import { helpers, requiredIf } from '@vuelidate/validators';
import { isEmpty } from 'lodash-es';
import useVuelidate from '@vuelidate/core';
import { toMessages } from '@/utils/validation';
import type { ValidationErrors } from '@/types/api/errors';
const props = withDefaults(
defineProps<{
addresses: string[];
disabled: boolean;
multi: boolean;
errorMessages?: Record<string, string[]>;
}>(),
{
errorMessages: () => ({}),
},
);
const props = defineProps<{
addresses: string[];
disabled: boolean;
multi: boolean;
errorMessages: ValidationErrors;
}>();
const emit = defineEmits<{
(e: 'update:addresses', addresses: string[]): void;
(e: 'update:error-messages', errorMessages: Record<string, string[]>): void;
(e: 'update:error-messages', errorMessages: ValidationErrors): void;
}>();
const { t } = useI18n();
Expand Down Expand Up @@ -62,7 +59,7 @@ function onPasteAddress(event: ClipboardEvent) {
set(address, paste);
}
function updateErrorMessages(errorMessages: Record<string, string[]>) {
function updateErrorMessages(errorMessages: ValidationErrors) {
emit('update:error-messages', errorMessages);
}
Expand Down Expand Up @@ -94,8 +91,6 @@ const rules = {
},
};
const { setValidation } = useAccountDialog();
const errorMessagesModel = computed({
get() {
const errors = get(errorMessages);
Expand All @@ -117,7 +112,7 @@ const errorMessagesModel = computed({
},
});
const v$ = setValidation(
const v$ = useVuelidate(
rules,
{
address,
Expand All @@ -135,6 +130,10 @@ function updateAddresses(addresses: string[]) {
emit('update:addresses', addresses);
}
function validate(): Promise<boolean> {
return get(v$).$validate();
}
watch(errorMessages, (errors) => {
if (!isEmpty(errors))
get(v$).$validate();
Expand All @@ -144,6 +143,10 @@ watch(multiple, () => {
get(v$).$clearExternalResults();
set(userAddresses, '');
});
defineExpose({
validate,
});
</script>

<template>
Expand Down
13 changes: 10 additions & 3 deletions frontend/app/src/components/accounts/blockchain/Eth2Input.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import {
requiredUnless,
} from '@vuelidate/validators';
import { isEmpty } from 'lodash-es';
import useVuelidate from '@vuelidate/core';
import { toMessages } from '@/utils/validation';
import type { Eth2Validator } from '@/types/balances';
import type { ValidationErrors } from '@/types/api/errors';
Expand Down Expand Up @@ -54,9 +55,7 @@ const rules = {
},
};
const { setValidation } = useAccountDialog();
const v$ = setValidation(
const v$ = useVuelidate(
rules,
{
validatorIndex,
Expand All @@ -70,6 +69,10 @@ const v$ = setValidation(
},
);
function validate(): Promise<boolean> {
return get(v$).$validate();
}
watch(errorMessages, (errors) => {
if (!isEmpty(errors))
get(v$).$validate();
Expand All @@ -91,6 +94,10 @@ watch(
emit('update:validator', validator);
},
);
defineExpose({
validate,
});
</script>

<template>
Expand Down
16 changes: 11 additions & 5 deletions frontend/app/src/components/accounts/blockchain/XpubInput.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
import { Blockchain } from '@rotki/common/lib/blockchain';
import { helpers, required } from '@vuelidate/validators';
import { isEmpty } from 'lodash-es';
import useVuelidate from '@vuelidate/core';
import { XpubPrefix, type XpubType } from '@/utils/xpub';
import { toMessages } from '@/utils/validation';
import type { ValidationErrors } from '@/types/api/errors';
Expand All @@ -17,7 +18,7 @@ const props = defineProps<{
}>();
const emit = defineEmits<{
(e: 'update:xpub', event?: XpubPayload): void;
(e: 'update:xpub', xpub: XpubPayload | undefined): void;
}>();
const { t } = useI18n();
Expand Down Expand Up @@ -78,9 +79,7 @@ const rules = {
},
};
const { setValidation } = useAccountDialog();
const v$ = setValidation(
const v$ = useVuelidate(
rules,
{
xpub,
Expand All @@ -93,6 +92,10 @@ const v$ = setValidation(
},
);
async function validate(): Promise<boolean> {

Check warning on line 95 in frontend/app/src/components/accounts/blockchain/XpubInput.vue

View workflow job for this annotation

GitHub Actions / Frontend lint 

Async function 'validate' has no 'await' expression
return get(v$).$validate();
}
watch(errorMessages, (errors) => {
if (!isEmpty(errors))
get(v$).$validate();
Expand Down Expand Up @@ -121,7 +124,6 @@ watch([xpubKeyPrefix, xpubKey, derivationPath], ([prefix, xpub, path]) => {
xpub: xpub.trim(),
derivationPath: path ?? undefined,
xpubType: getKeyType(prefix as XpubPrefix),
blockchain: get(blockchain),
};
}
updateXpub(payload);
Expand All @@ -136,6 +138,10 @@ onMounted(() => {
set(derivationPath, payload?.derivationPath);
});
defineExpose({
validate,
});
</script>

<template>
Expand Down
77 changes: 58 additions & 19 deletions frontend/app/src/components/accounts/management/AccountDialog.vue
View file
Original file line number Diff line number Diff line change
@@ -1,35 +1,74 @@
<script setup lang="ts">
import type AccountForm from '@/components/accounts/management/AccountForm.vue';
import type { AccountManageState } from '@/composables/accounts/blockchain/use-account-manage';
const props = defineProps<{
value: AccountManageState | undefined;
}>();
const emit = defineEmits<{
(e: 'input', value: AccountManageState | undefined): void;
}>();
const { t } = useI18n();
const {
dialogText,
openDialog,
clearDialog,
trySubmit,
setPostSubmitFunc,
submitting,
} = useAccountDialog();
const form = ref<InstanceType<typeof AccountForm>>();
const model = useSimpleVModel(props, emit);
const title = computed<string>(() => props.value?.mode === 'edit'
? t('blockchain_balances.form_dialog.edit_title')
: t('blockchain_balances.form_dialog.add_title'));
const subtitle = computed<string>(() => props.value?.mode === 'edit'
? t('blockchain_balances.form_dialog.edit_subtitle')
: '');
const { save, pending, errorMessages } = useAccountManage();
const { loading } = useAccountLoading();
function postSubmitFunc(result: boolean) {
if (result)
clearDialog();
function dismiss() {
set(model, undefined);
}
setPostSubmitFunc(postSubmitFunc);
async function confirm() {
assert(isDefined(form));
const accountForm = get(form);
const valid = await accountForm.validate();
if (!valid)
return;
const importState = await accountForm.importAccounts();
if (importState === null)
return;
const state = importState || get(model);
assert(state);
const success = await save(state);
if (success)
dismiss();
}
</script>

<template>
<BigDialog
:display="openDialog"
:title="dialogText.title"
:subtitle="dialogText.subtitle"
:display="!!model"
:title="title"
:subtitle="subtitle"
:primary-action="t('common.actions.save')"
:secondary-action="t('common.actions.cancel')"
:loading="loading || submitting"
@confirm="trySubmit()"
@cancel="clearDialog()"
:loading="loading || pending"
@confirm="confirm()"
@cancel="dismiss()"
>
<AccountForm data-cy="blockchain-balance-form" />
<AccountForm
v-if="model"
ref="form"
v-model="model"
:error-messages.sync="errorMessages"
:loading="loading"
/>
</BigDialog>
</template>

0 comments on commit 7f4a194

Please sign in to comment.