Apply bugfixes to production

src/components/ContractTab/ContractSource.vue

@@ -1,6 +1,6 @@
 <!-- eslint-disable @typescript-eslint/no-explicit-any -->
 <script setup lang="ts">
-import { onMounted, ref } from 'vue';
+import { onMounted, ref, watch } from 'vue';
 import axios from 'axios';
 import VueJsonPretty from 'vue-json-pretty';
 import 'vue-json-pretty/lib/styles.css';
@@ -32,11 +32,75 @@ const loading = ref(true);
 const sources = ref(false);
 const metaData = ref<MetaData>({});
 
-const expanded = ref({} as {[key:string]: boolean});
+// expand / collapse ------
+interface ExpandedCollapsed {
+ [key: string]: boolean;
+}
+const expanded = ref({} as ExpandedCollapsed);
+const enableSave = ref(false);
+const defaultState = ref<boolean | null>(null);
+
+const saveDefaultState = () => {
+ localStorage.setItem('expanded-default', JSON.stringify(defaultState.value));
+};
+
+const loadDefaultState = () => {
+ const defaultStateData = localStorage.getItem('expanded-default');
+ if (defaultStateData) {
+ const parsed = JSON.parse(defaultStateData);
+ defaultState.value = parsed;
+ return true;
+ } else {
+ return false;
+ }
+};
+loadDefaultState();
+
+const expandAll = () => {
+ for (const key in expanded.value) {
+ expanded.value[key] = true;
+ }
+ defaultState.value = true;
+ enableSave.value = true;
+ saveDefaultState();
+};
+
+const collapseAll = () => {
+ for (const key in expanded.value) {
+ expanded.value[key] = false;
+ }
+ defaultState.value = false;
+ enableSave.value = true;
+ saveDefaultState();
+};
 
+// this function saves expanded content to local storage
+const saveExpanded = () => {
+ if (enableSave.value) {
+ localStorage.setItem(`expanded-${props.contract.address}`, JSON.stringify(expanded.value));
+ }
+};
+
+// this function loads expanded content from local storage
+const loadExpanded = () => {
+ const expandedData = localStorage.getItem(`expanded-${props.contract.address}`);
+ if (expandedData) {
+ const parsed = JSON.parse(expandedData);
+ for (const key in parsed) {
+ expanded.value[key] = parsed[key];
+ }
+ return true;
+ } else {
+ return false;
+ }
+};
 
 const getFileKey = (index: number) => `viewer-${index}`;
 
+watch(expanded.value, () => {
+ saveExpanded();
+});
+
 onMounted(async () => {
  let sourceData;
  try {
@@ -55,32 +119,6 @@ onMounted(async () => {
  loading.value = false;
  }
 
- try {
- const bytecodeResponse = await axios.post('/evm', {
- jsonrpc: '2.0',
- id: 1,
- method: 'eth_getCode',
- params: [props.contract.address],
- });
-
- if (bytecodeResponse.data?.result) {
- (files.value as any[]).unshift({
- content: bytecodeResponse.data.result,
- name: 'bytecode',
- expanded: false,
- fullscreen: false,
- raw: bytecodeResponse.data.result,
- contract: false,
- });
- }
-
- (files.value as any[]).forEach((file, index) => {
- expanded.value[getFileKey(index)] = true;
- });
- } catch (e) {
- console.error(e);
- }
-
  loading.value = false;
 });
 
@@ -111,9 +149,12 @@ const sortFiles = (filesToSort: any[]) => {
  }
  }
 
- (files.value as any[]).forEach((file, index) => {
- expanded.value[getFileKey(index)] = true;
- });
+ const loaded = loadExpanded();
+ if (!loaded) {
+ (files.value as any[]).forEach((file, index) => {
+ expanded.value[getFileKey(index)] = defaultState.value === null ? true : defaultState.value;
+ });
+ }
 };
 
 const isContract = (fileName: string) => {
@@ -134,18 +175,6 @@ const setMetaData = (data: any) => {
  };
 };
 
-const expandAll = () => {
- for (const key in expanded.value) {
- expanded.value[key] = true;
- }
-};
-
-const collapseAll = () => {
- for (const key in expanded.value) {
- expanded.value[key] = false;
- }
-};
-
 </script>
 
 <template>
@@ -200,6 +229,7 @@ const collapseAll = () => {
  v-model="expanded[getFileKey(index)]"
  :default-opened="true"
  class="shadow-2 q-mb-md"
+ @update:model-value="enableSave = true; expanded[getFileKey(index)] = $event;"
  >
  <template v-slot:header>
  <div class="flex items-center justify-between">

src/components/MethodField.vue

@@ -30,6 +30,10 @@ const props = defineProps({
  type: Boolean,
  default: false,
  },
+ separateWords: {
+ type: Boolean,
+ default: false,
+ },
  contract: {
  type: Object,
  default: () => null,
@@ -49,7 +53,7 @@ const methodSignature = computed(() => {
 
  return '';
 });
-const displayText = computed(() => {
+const methodNameOrSignature = computed(() => {
  if (methodName.value) {
  return methodName.value;
  }
@@ -60,6 +64,19 @@ const displayText = computed(() => {
 
  return '';
 });
+const displayText = computed(() => {
+ try {
+ let method = methodNameOrSignature.value;
+ if (method && props.separateWords) {
+ method = method.replace(/([A-Z])/g, ' $1').trim();
+ method = method[0].toUpperCase() + method.slice(1);
+ }
+ return method;
+ } catch (e) {
+ console.error(e);
+ }
+ return '';
+});
 const propValue = computed(() => +(props.trx.value || '0x0'));
 
 onMounted(async () => {

src/components/NftTransfersTable.vue

@@ -6,6 +6,7 @@ import { useI18n } from 'vue-i18n';
 import { indexerApi } from 'src/boot/telosApi';
 
 import TransactionField from 'components/TransactionField.vue';
+import ValueField from 'components/ValueField.vue';
 import MethodField from 'components/MethodField.vue';
 import AddressField from 'components/AddressField.vue';
 import NftItemField from 'components/NftItemField.vue';
@@ -14,12 +15,12 @@ import { formatWei, toChecksumAddress } from 'src/lib/utils';
 import { NftTransferProps, NftTransferData } from 'src/types';
 
 import { loadTransaction, getDirection } from 'src/lib/transaction-utils';
-import { WEI_PRECISION } from 'src/antelope/wallets/utils';
-import { BigNumber } from 'ethers';
-import { prettyPrintCurrency } from 'src/antelope/wallets/utils/currency-utils';
 import { Pagination } from 'src/types';
+import { useStore } from 'vuex';
 
 const { t: $t } = useI18n();
+const $store = useStore();
+const toggleDisplayDecimals = () => $store.dispatch('general/toggleDisplayDecimals');
 
 // ---------------------
 interface TransfersResponse {
@@ -236,29 +237,6 @@ const onRequest = async (settings: { pagination: Pagination}) => {
  loading.value = false;
 };
 
-const locale = useI18n().locale.value;
-function getValueDisplay(value: string, symbol: string, decimals: number) {
- const _decimals = typeof decimals === 'number' ? decimals : parseInt(decimals ?? WEI_PRECISION);
- console.log('getValueDisplay', value, symbol, decimals, '[', _decimals, ']');
- try {
- return prettyPrintCurrency(
- BigNumber.from(value.split('.').join('')),
- 4,
- locale,
- false,
- symbol ?? 'UNKNOWN',
- false,
- _decimals,
- false,
- );
- } catch (e) {
- console.error('getValueDisplay', e);
- }
-
- return truncatedId(value);
-}
-
-
 const convertToEpoch = (dateString: string | number) => {
  if (typeof dateString === 'number'){
  return dateString / 1000;
@@ -364,6 +342,17 @@ onMounted(() => {
  </q-tooltip>
  </q-icon>
  </div>
+ <div
+ v-else-if="col.name==='value'"
+ class="u-flex--center-y"
+ @click="toggleDisplayDecimals"
+ >
+ <a>{{ col.label }}</a>
+ <q-icon class="info-icon q-ml-xs" name="far fa-question-circle"/>
+ <q-tooltip anchor="bottom middle" self="bottom middle">
+ {{ $t('components.click_to_change_format') }}
+ </q-tooltip>
+ </div>
  <div v-else class="u-flex--center-y">
  {{ col.label }}
  </div>
@@ -375,7 +364,9 @@ onMounted(() => {
  <template v-slot:body="props">
  <q-tr :props="props">
  <q-td key="hash" :props="props">
- <TransactionField :transaction-hash="props.row.hash"/>
+ <TransactionField
+ :transaction-hash="props.row.hash"
+ />
  </q-td>
  <q-td key="method" :props="props">
  <MethodField
@@ -430,10 +421,11 @@ onMounted(() => {
  </span>
  </q-td>
  <q-td key="value" :props="props">
- <span class="value">
- {{ getValueDisplay(props.row.value, props.row.contract.symbol, props.row.contract.decimals) }}
- <q-tooltip>{{ props.row.value }}</q-tooltip>
- </span>
+ <ValueField
+ :value="props.row.value"
+ :symbol="props.row.contract.symbol"
+ :decimals="props.row.contract.decimals"
+ />
  </q-td>
  <q-td key="token" :props="props" class="flex items-center">
  <AddressField

src/components/Token/TokenTable.vue

@@ -1,10 +1,12 @@
 <script>
 import AddressField from 'src/components/AddressField';
 import AddToWallet from 'src/components/AddToWallet';
+import ValueField from 'components/ValueField.vue';
+import { mapActions } from 'vuex';
 
 export default {
  name: 'TokenTable',
- components: { AddressField, AddToWallet },
+ components: { AddressField, AddToWallet, ValueField },
  props: {
  tokens: {
  type: Array,
@@ -50,6 +52,12 @@ export default {
  columns,
  };
  },
+ methods: {
+ ...mapActions('general', ['toggleDisplayDecimals']),
+ async showEntry(token) {
+ console.log('showEntry', token);
+ },
+ },
 };
 </script>
 
@@ -69,15 +77,24 @@ export default {
  :key="col.name"
  :props="props"
  >
- <div class="u-flex--center-y">
- {{ col.label }}
+ <div v-if="col.name==='balance'" class="u-flex--center-y" @click="toggleDisplayDecimals">
+ <a>{{ col.label }}</a>
+ <q-icon class="info-icon q-ml-xs" name="far fa-question-circle"/>
+ <q-tooltip anchor="bottom middle" self="bottom middle">
+ {{ $t('components.click_to_change_format') }}
+ </q-tooltip>
  </div>
+ <template v-else>
+ <div class="u-flex--center-y">
+ {{ col.label }}
+ </div>
+ </template>
  </q-th>
  </q-tr>
  </template>
 
  <template v-slot:body="props">
- <q-tr :props="props">
+ <q-tr :props="props" @click="showEntry(props.row)">
  <q-td key="icon" :props="props">
  <q-img :src="props.row.logoURI" class="c-token-icon" />
  </q-td>
@@ -88,9 +105,9 @@ export default {
  {{ props.row.symbol }}
  </q-td>
  <q-td key="balance" :props="props">
- <span v-if="props.row.balance === '0.0000'">{{ '< 0.0001' }}</span>
- <span v-else>{{ props.row.balance }}</span>
- <q-tooltip>{{ props.row.fullBalance }}</q-tooltip>
+ <ValueField
+  :value="props.row.fullBalance"
+ />
  </q-td>
  <q-td key="usd" :props="props">
  <span v-if="props.row.price > 0">