feat(station)!: multi chain support (#374)

design doc:

https://docs.google.com/document/d/1l8u2-m2lH-FeN6tLJv80pqUnHpWIy3ROkz7jxTz0HtM/edit?tab=t.0#heading=h.lic4oqo4af1m

Jira ticket:
https://dfinity.atlassian.net/browse/PEN-142?atlOrigin=eyJpIjoiNTExMDU0ODUzODFjNDRjNDhlMDEzNTI1OTdjOWRlMDAiLCJwIjoiaiJ9

---------

Co-authored-by: Kepler Vital <[email protected]>
Co-authored-by: mraszyk <[email protected]>

.github/workflows/tests.yaml

@@ -96,6 +96,8 @@ jobs:
             name: 'ic-icp-index-canister'
           - canister: 'cmc'
             name: 'cycles-minting-canister'
+          - canister: 'icrc1_ledger'
+            name: 'ic-icrc1-ledger'
     steps:
       - name: 'Checkout'
         uses: actions/checkout@v4

Cargo.toml

@@ -57,7 +57,8 @@ ic-cdk = "0.16.0"
 ic-cdk-macros = "0.16.0"
 ic-cdk-timers = "0.9.0"
 ic-ledger-types = "0.12.0"
-ic-stable-structures = "0.6.4"
+ic-stable-structures = "0.6.6"
+icrc-ledger-types = "0.1.6"
 ic-utils = "0.38"
 itertools = "0.13.0"
 lazy_static = "1.4.0"

apps/wallet/package.json

@@ -27,9 +27,11 @@
     "@dfinity/agent": "1.4.0",
     "@dfinity/auth-client": "1.4.0",
     "@dfinity/candid": "1.4.0",
-    "@dfinity/didc": "0.0.2",
     "@dfinity/identity": "1.4.0",
     "@dfinity/principal": "1.4.0",
+    "@dfinity/ledger-icrc": "2.3.3",
+    "@dfinity/utils": "2.3.1",
+    "@dfinity/didc": "0.0.2",
     "@mdi/font": "7.4.47",
     "@mdi/js": "7.4.47",
     "buffer": "6.0.3",

apps/wallet/src/components/ShortenedAddress.vue

@@ -0,0 +1,20 @@
+<template>
+  <TextOverflow
+    v-if="format === AddressFormat.ICRC1"
+    :text="address"
+    :overflow-position="shortenIcrc1Address"
+  ></TextOverflow>
+
+  <TextOverflow v-else :text="address" :max-length="32"></TextOverflow>
+</template>
+
+<script setup lang="ts">
+import { AddressFormat } from '~/types/chain.types';
+import TextOverflow from './TextOverflow.vue';
+import { shortenIcrc1Address } from '~/utils/asset.utils';
+
+defineProps<{
+  address: string;
+  format: AddressFormat | string | undefined;
+}>();
+</script>

apps/wallet/src/components/TextOverflow.vue

@@ -13,7 +13,7 @@ const props = withDefaults(
     text: string;
     maxLength?: number;
     overflowText?: string;
-    overflowPosition?: 'start' | 'middle' | 'end';
+    overflowPosition?: 'start' | 'middle' | 'end' | ((input: string) => string);
   }>(),
   {
     maxLength: 18,
@@ -40,15 +40,19 @@ const truncatedText = computed(() => {
     }`;
   }
 
-  const overflowLengthStart = Math.ceil(props.overflowText.length / 2);
-  const overflowLengthEnd = Math.floor(props.overflowText.length / 2);
-  const start = Math.ceil((props.maxLength - 1) / 2) - overflowLengthStart;
-  const end = Math.floor((props.maxLength - 1) / 2) - overflowLengthEnd;
+  if (props.overflowPosition === 'middle') {
+    const overflowLengthStart = Math.ceil(props.overflowText.length / 2);
+    const overflowLengthEnd = Math.floor(props.overflowText.length / 2);
+    const start = Math.ceil((props.maxLength - 1) / 2) - overflowLengthStart;
+    const end = Math.floor((props.maxLength - 1) / 2) - overflowLengthEnd;
 
-  return `${props.text.slice(0, start)}${props.overflowText}${props.text.slice(
-    props.text.length - end,
-    props.text.length,
-  )}`;
+    return `${props.text.slice(0, start)}${props.overflowText}${props.text.slice(
+      props.text.length - end,
+      props.text.length,
+    )}`;
+  }
+
+  return props.overflowPosition(props.text);
 });
 
 const handleCopy = (event: ClipboardEvent): void => {

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

@@ -0,0 +1,21 @@
+<template>
+  {{ assetNames.join(', ') }}
+</template>
+
+<script setup lang="ts">
+import { computed } 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

@@ -154,15 +154,15 @@ const saveChangesToExistingAccount = async (accountId: UUID): Promise<Request> =
   changes.configs_permission = [
     assertAndReturn(wizard.value.permission.configuration, 'update_access'),
   ];
+  changes.change_assets = [];
 
   return station.service.editAccount(changes as EditAccountOperationInput);
 };
 
 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/AddAccountAssetBtn.vue

@@ -0,0 +1,65 @@
+<template>
+  <VBtn
+    v-bind="$attrs"
+    :size="props.size.value"
+    :variant="props.variant.value"
+    :icon="props.icon.value && !props.text.value"
+    :color="props.color.value"
+    @click="open = true"
+  >
+    <VIcon v-if="props.icon.value" :icon="props.icon.value" />
+    <slot name="default">
+      <span v-if="props.text">{{ props.text.value }}</span>
+    </slot>
+    <VIcon v-if="props.appendIcon.value" :icon="props.appendIcon.value" />
+  </VBtn>
+
+  <AddAccountAssetDialog
+    :account="props.account.value"
+    :open="open"
+    :readonly="props.readonly.value"
+    @update:open="
+      openEvent => {
+        open = openEvent;
+
+        emit('opened', openEvent);
+      }
+    "
+  />
+</template>
+<script lang="ts" setup>
+import { ref, toRefs } from 'vue';
+import { VBtn } from 'vuetify/components';
+import { Account } from '~/generated/station/station.did';
+import AddAccountAssetDialog from './AddAccountAssetDialog.vue';
+
+const input = withDefaults(
+  defineProps<{
+    account: Account;
+    icon?: string;
+    text?: string;
+    size?: 'x-small' | 'small' | 'default' | 'medium' | 'large' | 'x-large';
+    variant?: 'flat' | 'text' | 'outlined' | 'elevated';
+    color?: string;
+    readonly?: boolean;
+    appendIcon?: string;
+  }>(),
+  {
+    icon: undefined,
+    text: undefined,
+    size: 'default',
+    variant: 'elevated',
+    color: 'primary',
+    readonly: false,
+    appendIcon: undefined,
+  },
+);
+
+const open = ref(false);
+
+const emit = defineEmits<{
+  (event: 'opened', payload: boolean): void;
+}>();
+
+const props = toRefs(input);
+</script>