feat(wallet): update frontend with new asset account data models

apps/wallet/package.json

@@ -24,11 +24,12 @@
     "format": "concurrently -n prettier,eslint -c auto \"prettier --ignore-path ../../.prettierignore --write .\" \"eslint --ext .js,.vue,.ts,.cjs --fix .\""
   },
   "dependencies": {
-    "@dfinity/agent": "1.4.0",
-    "@dfinity/auth-client": "1.4.0",
-    "@dfinity/candid": "1.4.0",
-    "@dfinity/identity": "1.4.0",
-    "@dfinity/principal": "1.4.0",
+    "@dfinity/agent": "2.1.2",
+    "@dfinity/auth-client": "2.1.2",
+    "@dfinity/candid": "2.1.2",
+    "@dfinity/identity": "2.1.2",
+    "@dfinity/principal": "2.1.2",
+    "@dfinity/ledger-icrc": "2.6.1",
     "@mdi/font": "7.4.47",
     "@mdi/js": "7.4.47",
     "buffer": "6.0.3",
@@ -52,4 +53,4 @@
     "sass": "1.77.1",
     "vite-plugin-vuetify": "2.0.3"
   }
-}
+}

apps/wallet/src/components/accounts/AccountAssetsCell.vue

@@ -0,0 +1,21 @@
+<template>
+  {{ assetNames.join(', ') }}
+</template>
+
+<script setup lang="ts">
+import { computed, defineProps } from 'vue';
+import { useStationStore } from '~/stores/station.store';
+
+const props = defineProps<{
+  assetIds: string[];
+}>();
+
+const station = useStationStore();
+
+const assetNames = computed(() => {
+  return props.assetIds.map(
+    id =>
+      station.configuration.details.supported_assets.find(token => token.id === id)?.symbol || id,
+  );
+});
+</script>

apps/wallet/src/components/accounts/AccountSetupDialog.vue

@@ -160,9 +160,8 @@ const saveChangesToExistingAccount = async (accountId: UUID): Promise<Request> =
 
 const createNewAccount = async (): Promise<Request> => {
   const changes: Partial<AddAccountOperationInput> = {};
+  changes.assets = assertAndReturn(wizard.value.configuration.assets, 'assets');
   changes.name = assertAndReturn(wizard.value.configuration.name, 'name');
-  changes.blockchain = assertAndReturn(wizard.value.configuration.blockchain, 'blockchain');
-  changes.standard = assertAndReturn(wizard.value.configuration.standard, 'standard');
   changes.configs_request_policy = wizard.value.request_policy.configurationRule
     ? [wizard.value.request_policy.configurationRule]
     : [];

apps/wallet/src/components/accounts/BatchTransfersActionBtn.vue

@@ -83,7 +83,7 @@
                   </td>
                   <td class="text-right text-no-wrap">
                     <span v-if="transfer.amount">
-                      {{ formatBalance(transfer.amount, account.decimals) }}
+                      {{ formatBalance(transfer.amount, asset.decimals) }}
                     </span>
                     <template v-else>
                       <VIcon :icon="mdiAlertCircle" color="error" class="mr-1" />
@@ -96,7 +96,7 @@
                 <tr>
                   <td colspan="4" class="text-right bg-background">
                     <span class="font-weight-bold">{{ $t('terms.total') }}:</span>
-                    {{ formatBalance(totalAmount, account.decimals) }}
+                    {{ formatBalance(totalAmount, asset.decimals) }}
                   </td>
                 </tr>
               </tfoot>
@@ -157,8 +157,7 @@ import {
   VToolbarTitle,
 } from 'vuetify/components';
 import logger from '~/core/logger.core';
-import { Account, Transfer, TransferOperationInput } from '~/generated/station/station.did';
-import { ChainApiFactory } from '~/services/chains';
+import { Account, Asset, TransferOperationInput } from '~/generated/station/station.did';
 import { useAppStore } from '~/stores/app.store';
 import { useStationStore } from '~/stores/station.store';
 import { CsvTable } from '~/types/app.types';
@@ -167,6 +166,7 @@ import {
   registerBeforeUnloadConfirmation,
   unregisterBeforeUnloadConfirmation,
 } from '~/utils/app.utils';
+import { detectAddressStandard } from '~/utils/asset.utils';
 import { downloadCsv, readFileAsCsvTable } from '~/utils/file.utils';
 import { requiredRule } from '~/utils/form.utils';
 import {
@@ -179,6 +179,8 @@ import {
 const props = withDefaults(
   defineProps<{
     account: Account;
+    asset: Asset;
+    // address: string;
     batchChunkSize?: number;
     icon?: string;
     text?: string;
@@ -228,9 +230,8 @@ const hasInvalidTransfers = computed(() => rows.value.some(row => !row.valid));
 const rawCsvTable = ref<CsvTable | null>(null);
 const invalidRawCsvTable = ref<CsvTable | null>(null);
 const downloadingInvalid = ref(false);
-const chainApi = computed(() => ChainApiFactory.create(props.account));
 
-type CsvTransferWithComment = Partial<Transfer> & { comment?: string };
+type CsvTransferWithComment = Partial<TransferOperationInput> & { comment?: string };
 
 const rows = ref<
   {
@@ -296,20 +297,29 @@ watch(
     for (const row of rawCsvTable.value.rows) {
       const transfer: CsvTransferWithComment = {};
       let valid = true;
+      const maybeToAddress = row?.[csvToColumn.value];
+      if (maybeToAddress !== undefined) {
+        const maybeStandard = detectAddressStandard(
+          props.asset,
+          maybeToAddress,
+          station.configuration.details.supported_blockchains,
+        );
 
-      if (
-        row?.[csvToColumn.value] !== undefined &&
-        chainApi.value.isValidAddress(row[csvToColumn.value])
-      ) {
-        transfer.to = row[csvToColumn.value];
+        if (maybeStandard) {
+          transfer.to = maybeToAddress;
+          transfer.with_standard = maybeStandard.standard;
+        } else {
+          valid = false;
+        }
       }
+
       if (row?.[csvCommentColumn.value] !== undefined) {
         transfer.comment = row[csvCommentColumn.value];
       }
 
       if (row?.[csvAmountColumn.value] !== undefined) {
         try {
-          transfer.amount = amountToBigInt(row[csvAmountColumn.value], props.account.decimals);
+          transfer.amount = amountToBigInt(row[csvAmountColumn.value], props.asset.decimals);
         } catch (e) {
           valid = false;
         }
@@ -378,10 +388,12 @@ const startBatchTransfer = async (): Promise<void> => {
           rowId,
           transfer: {
             from_account_id: props.account.id,
+            from_asset_id: props.asset.id,
+            with_standard: assertAndReturn(row.transfer.with_standard, 'with_standard'),
             amount: assertAndReturn(row.transfer.amount, 'amount'),
             to: maybeTransformBlockchainAddress(
-              props.account.blockchain,
-              props.account.standard,
+              props.asset.blockchain,
+              assertAndReturn(row.transfer.with_standard, 'with_standard'),
               assertAndReturn(row.transfer.to, 'to'),
             ),
             network: [],

apps/wallet/src/components/accounts/TransferBtn.vue

@@ -16,6 +16,7 @@
 
   <TransferDialog
     :account="props.account.value"
+    :asset="props.asset.value"
     :open="open"
     :transfer-id="props.transferId.value"
     :readonly="props.readonly.value"
@@ -32,11 +33,12 @@
 import { ref, toRefs } from 'vue';
 import { VBtn } from 'vuetify/components';
 import TransferDialog from '~/components/accounts/TransferDialog.vue';
-import { Account, UUID } from '~/generated/station/station.did';
+import { Account, Asset, UUID } from '~/generated/station/station.did';
 
 const input = withDefaults(
   defineProps<{
     account: Account;
+    asset: Asset;
     transferId?: UUID;
     icon?: string;
     text?: string;

apps/wallet/src/components/accounts/TransferDialog.vue

@@ -26,6 +26,7 @@
             v-model="transfer"
             v-model:trigger-submit="triggerSubmit"
             :account="props.account.value"
+            :asset="props.asset.value"
             :mode="props.readonly.value ? 'view' : 'edit'"
             @submit="save"
             @valid="valid = $event"
@@ -89,15 +90,18 @@ import {
   useOnSuccessfulOperation,
 } from '~/composables/notifications.composable';
 import logger from '~/core/logger.core';
-import { Account, Request, Transfer, UUID } from '~/generated/station/station.did';
+import { Account, Asset, Request, Transfer, UUID } from '~/generated/station/station.did';
 import { services } from '~/plugins/services.plugin';
 import { maybeTransformBlockchainAddress } from '~/utils/app.utils';
 import { assertAndReturn } from '~/utils/helper.utils';
 import TransferForm from './TransferForm.vue';
+import { detectAddressStandard } from '~/utils/asset.utils';
+import { useStationStore } from '~/stores/station.store';
 
 const input = withDefaults(
   defineProps<{
     account: Account;
+    asset: Asset;
     transferId?: UUID;
     open?: boolean;
     dialogMaxWidth?: number;
@@ -135,6 +139,8 @@ const summary = computed({
 
 const stationService = services().station;
 
+const stationStore = useStationStore();
+
 const loadTransfer = async (): Promise<{
   transfer: Partial<Transfer>;
   request: Partial<Request>;
@@ -171,14 +177,28 @@ const save = async (): Promise<void> => {
   try {
     saving.value = true;
 
+    const toAddress = assertAndReturn(transfer.value.to, 'to');
+
+    const maybeStandard = detectAddressStandard(
+      props.asset.value,
+      toAddress,
+      stationStore.configuration.details.supported_blockchains,
+    );
+
+    if (!maybeStandard) {
+      throw new Error('Invalid address');
+    }
+
     const newRequest = await stationService.transfer(
       {
         from_account_id: assertAndReturn(transfer.value.from_account_id, 'from_account_id'),
+        from_asset_id: props.asset.value.id,
+        with_standard: maybeStandard.standard,
         amount: assertAndReturn(transfer.value.amount, 'amount'),
         to: maybeTransformBlockchainAddress(
-          props.account.value.blockchain,
-          props.account.value.standard,
-          assertAndReturn(transfer.value.to, 'to'),
+          props.asset.value.blockchain,
+          maybeStandard.standard,
+          toAddress,
         ),
         fee: transfer.value.fee ? [transfer.value.fee] : [],
         metadata: transfer.value.metadata ?? [],

apps/wallet/src/components/accounts/TransferForm.vue

@@ -34,7 +34,7 @@
       type="number"
       :readonly="isViewMode"
       :prepend-icon="mdiNumeric"
-      :rules="[requiredRule, (v: unknown) => validTokenAmount(v, account.decimals)]"
+      :rules="[requiredRule, (v: unknown) => validTokenAmount(v, asset.decimals)]"
       data-test-id="transfer-form-amount"
     />
   </VForm>
@@ -46,13 +46,14 @@ import { onUnmounted } from 'vue';
 import { onMounted } from 'vue';
 import { computed, ref, toRefs, watch } from 'vue';
 import { VForm, VTextField } from 'vuetify/components';
-import { Account, Transfer } from '~/generated/station/station.did';
+import { Account, Asset, Transfer } from '~/generated/station/station.did';
 import { VFormValidation } from '~/types/helper.types';
 import { requiredRule, validTokenAmount } from '~/utils/form.utils';
 import { amountToBigInt, formatBalance } from '~/utils/helper.utils';
 
 export type TransferFormProps = {
   account: Account;
+  asset: Asset;
   modelValue: Partial<Transfer>;
   triggerSubmit?: boolean;
   valid?: boolean;
@@ -92,17 +93,17 @@ watch(
   () => model.value.amount,
   newValue => {
     amount.value =
-      newValue !== undefined ? formatBalance(newValue, props.account.value.decimals) : undefined;
+      newValue !== undefined ? formatBalance(newValue, props.asset.value.decimals) : undefined;
   },
   { immediate: true },
 );
 
 const syncAmountInput = (): void => {
   if (
     amount.value !== undefined &&
-    validTokenAmount(amount.value, props.account.value.decimals) === true
+    validTokenAmount(amount.value, props.asset.value.decimals) === true
   ) {
-    model.value.amount = amountToBigInt(amount.value, props.account.value.decimals);
+    model.value.amount = amountToBigInt(amount.value, props.asset.value.decimals);
   } else {
     model.value.amount = undefined;
   }

apps/wallet/src/components/accounts/wizard/AccountConfigurationSettings.vue

@@ -15,7 +15,7 @@
     <VCol cols="12" class="pt-4 pb-0">
       <TokenAutocomplete
         v-if="props.display.asset"
-        v-model="model.symbol"
+        v-model="model.assets"
         class="mb-2"
         :label="$t('terms.asset')"
         :prepend-icon="mdiBank"
@@ -24,6 +24,7 @@
         density="comfortable"
         :disabled="isViewMode || !!model.id"
         @selected-asset="onSelectedAsset"
+        :multiple="true"
       />
     </VCol>
     <VCol cols="12" class="pt-0 pb-4">
@@ -53,9 +54,7 @@ import { requiredRule } from '~/utils/form.utils';
 export interface AccountConfigurationModel {
   id: UUID;
   name: string;
-  blockchain: string;
-  standard: string;
-  symbol: string;
+  assets: UUID[];
   lastModified: TimestampRFC3339;
 }
 
@@ -89,14 +88,6 @@ const model = computed({
 });
 
 const onSelectedAsset = (asset?: Asset): void => {
-  if (asset) {
-    model.value.symbol = asset.symbol;
-    model.value.blockchain = asset.blockchain;
-    model.value.standard = asset.standards[0]; // todo: handle multiple standards
-  } else {
-    model.value.symbol = undefined;
-    model.value.blockchain = undefined;
-    model.value.standard = undefined;
-  }
+  model.value.assets = asset ? [asset] : [];
 };
 </script>

apps/wallet/src/components/assets/AssetDialog.vue

@@ -159,13 +159,33 @@ const save = async (): Promise<void> => {
       return;
     }
 
+    console.log({
+      blockchain: assertAndReturn(asset.value.blockchain, 'blockchain'),
+      metadata: asset.value.metadata ?? [],
+      decimals: assertAndReturn(asset.value.decimals, 'decimals'),
+      name: assertAndReturn(asset.value.name, 'name'),
+      symbol: assertAndReturn(asset.value.symbol, 'symbol'),
+      standards: assertAndReturn(asset.value.standards, 'standards'),
+    });
+
     const request = await station.service.addAsset({
       blockchain: assertAndReturn(asset.value.blockchain, 'blockchain'),
       metadata: asset.value.metadata ?? [],
+      // metadata: [
+      //   {
+      //     key: 'ledger_canister_id',
+      //     value: 'bw4dl-smaaa-aaaaa-qaacq-cai',
+      //   },
+      //   {
+      //     key: 'index_canister_id',
+      //     value: 'br5f7-7uaaa-aaaaa-qaaca-cai',
+      //   },
+      // ],
       decimals: assertAndReturn(asset.value.decimals, 'decimals'),
       name: assertAndReturn(asset.value.name, 'name'),
       symbol: assertAndReturn(asset.value.symbol, 'symbol'),
       standards: assertAndReturn(asset.value.standards, 'standards'),
+      // standards: ['icrc1', 'icp_native'],
     });
     useOnSuccessfulOperation(request);
     openModel.value = false;