[feature] Add asset icons (desktop mode)

README.md

@@ -17,3 +17,50 @@ Build artifacts will be located at `dist` dir.
 
 `Dockerfile` with `nginx.conf` are also provided. Based on [Deployment > Docker (nginx)](https://cli.vuejs.org/guide/deployment.html#docker-nginx).
 
+## Development
+
+### Setting up the `.env` file
+
+You need a file with environment variables to configure Vite for the frontend to properly request either mock data or interact with the backend.
+
+To enable the mocks, write:
+
+```
+VITE_FAKE_API_ENABLED=TRUE
+```
+
+To interact with the backend, assuming you'll add an API proxy as described below, write:
+
+```
+VITE_API_URL=http://localhost:5173/api-proxy
+VITE_FAKE_API_ENABLED=FALSE
+```
+
+### Connecting to a BCE backend
+
+One may want to see to see how the backend responds in the real time,
+but pointing the API endpoint directly in the `VITE_API_URL` property of an `.env` file
+would lead to a lot of errors like this one:
+
+    Access to fetch at 'http://localhost:port_A/...' from origin 'http://localhost:port_B' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
+
+Vite can be configured to proxy the responses.
+
+So, we first return to the `.env` file and configure `VITE_API_URL` property as `http://localhost:5173/api-proxy`, if our `dev` shows the port as 5173.
+
+Then we go to the Vite configuration in `vite.config.js` and add a new part in our `defineConfig` section,
+where our `target` points to the host and the port of our BCE backend instance.
+
+```js
+  server: {
+    proxy: {
+      '/api-proxy': {
+        target: 'http://127.0.0.1:4000',
+        changeOrigin: true,
+        secure: false,
+        ws: false,
+        rewrite: (path) => '/api/v1' + path.replace(/api-proxy\//, ''),
+      },
+    },
+  },
+```

src/app/App.vue

@@ -90,6 +90,7 @@ hr {
 
 .cell {
   padding: 0 size(2);
+  align-self: center;
 }
 
 .nowrap {

src/entities/asset/AssetIcon.vue

@@ -0,0 +1,69 @@
+<template>
+  <div class="asset">
+    <div class="asset__icon">
+      <XOR v-if="nameLower=='xor'" />
+      <VAL v-else-if="nameLower=='val'" />
+      <ETH v-else-if="nameLower=='eth'" />
+      <IrohaIcon v-else-if="nameLower=='iroha'" />
+      <Soshiba v-else-if="nameLower=='soshiba'" />
+      <Pswap v-else-if="nameLower=='pswap'" />
+      <NaIcon v-else />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { toRefs } from 'vue';
+
+import XOR from '~icons/assets/XOR.svg';
+import VAL from '~icons/assets/VAL.svg';
+import ETH from '~icons/assets/ETH.svg';
+import IrohaIcon from '~icons/assets/iroha_icon.svg';
+import Soshiba from '~icons/assets/soshiba.svg';
+import Pswap from '~icons/assets/pswap.svg';
+import NaIcon from '~icons/assets/na.svg';
+
+const props = defineProps({
+  name: {
+    type: String,
+    default: '',
+  },
+});
+
+const { name } = toRefs(props);
+
+let nameLower = '';
+
+const init = async () => {
+  nameLower = name.value.toLowerCase();
+};
+
+init();
+</script>
+
+<style lang="scss">
+@import 'styles';
+
+.asset {
+  position: relative;
+  display: grid;
+  grid-gap: size(1);
+  align-items: center;
+  grid-auto-flow: column;
+  grid-auto-columns: auto;
+
+  &__icon {
+    width: size(4);
+    height: size(4);
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    svg {
+      width: size(4);
+      height: size(4);
+    }
+  }
+}
+</style>

src/pages/AssetsList.vue

@@ -12,6 +12,7 @@
     >
       <template #header>
         <div class="assets-list-page__row">
+          <span class="h-sm cell">{{ $t('icon') }}</span>
           <span class="h-sm cell">{{ $t('name') }}</span>
           <span class="h-sm cell">{{ $t('domain') }}</span>
           <span class="h-sm cell">{{ $t('total') }}</span>
@@ -20,6 +21,10 @@
 
       <template #row="{ item }: { item: Asset }">
         <div class="assets-list-page__row">
+          <div class="cell row-text">
+            <AssetIcon :name="item.definition_id.split('#')[0]" />
+          </div>
+
           <BaseLink :to="`/assets/${item.definition_id}`" class="cell">
             {{ item.definition_id.split('#')[0] }}
           </BaseLink>
@@ -74,6 +79,8 @@ import BaseLink from '~base/BaseLink.vue';
 import { useTable } from '~shared/lib/table';
 import { http } from '~shared/api';
 
+import AssetIcon from '~entities/asset/AssetIcon.vue';
+
 const table = useTable(http.fetchAssets);
 table.fetch();
 </script>
@@ -85,7 +92,7 @@ table.fetch();
   &__row {
     width: 100%;
     display: grid;
-    grid-template-columns: 2fr 2fr 1fr;
+    grid-template-columns: 0.25fr 2fr 2fr 1fr;
     justify-content: start;
   }
 

src/shared/lib/localization/en.json

@@ -66,5 +66,6 @@
     "mostValue": "Most Value",
     "wasm": "WebAssembly",
     "instruction": "Instruction"
-  }
+  },
+  "icon": "Icon"
 }