showing self transfers as such

src/components/NftTransfersTable.vue

@@ -11,12 +11,13 @@ import AddressField from 'components/AddressField.vue';
 import NftItemField from 'components/NftItemField.vue';
 import DateField from 'components/DateField.vue';
 import { formatWei, toChecksumAddress } from 'src/lib/utils';
-import { EvmTransactionExtended, Pagination } from 'src/types';
+import { NftTransferProps, NftTransferData } from 'src/types';
 
-import { loadTransaction } from 'src/lib/transaction-utils';
+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';
 
 const { t: $t } = useI18n();
 
@@ -62,30 +63,6 @@ interface TransferData {
 
 // ---------------------
 
-export interface NftTransferData {
- hash: string;
- timestamp: number;
- amount: string;
- id: string;
- value: string;
- contract: {
- address: string;
- name: string;
- symbol: string;
- decimals: number;
- };
- from: string;
- to: string;
- trx: EvmTransactionExtended | null;
-}
-
-export interface NftTransferProps {
- title: string;
- tokenType: string;
- address: string;
- initialPageSize: number;
-}
-
 const props = withDefaults(defineProps<NftTransferProps>(), {
  title: '',
  tokenType: '',
@@ -414,14 +391,10 @@ onMounted(() => {
  <DateField :epoch="convertToEpoch(props.row.timestamp)" :force-show-age="showDateAge"/>
  </q-td>
  <q-td key="direction" :props="props">
- <span v-if="toChecksumAddress(address) === toChecksumAddress(props.row.from)" class="direction out">
- {{ $t('components.transaction.out').toUpperCase() }}
- </span>
  <span
- v-else-if="toChecksumAddress(address) === toChecksumAddress(props.row.to)"
- class="direction in"
+ :class="`direction ${getDirection(address, props.row)}`"
  >
- {{ $t('components.transaction.in').toUpperCase() }}
+ {{ $t(`components.transaction.${getDirection(address, props.row)}`).toUpperCase() }}
  </span>
  </q-td>
  <q-td key="from" :props="props">
@@ -532,22 +505,7 @@ onMounted(() => {
 
 <style lang='scss' scoped>
 .direction {
- user-select: none;
- padding: 3px 6px;
- border-radius: 5px;
- font-size: 0.9em;
-
- &.in {
- color: rgb(0, 161, 134);
- background: rgba(0, 161, 134, 0.1);
- border: 1px solid rgb(0, 161, 134);
- }
-
- &.out {
- color: #cc9a06 !important;
- background: rgba(255, 193, 7, 0.1);
- border: 1px solid #cc9a06 !important;
- }
+ @include direction;
 }
 
 .nft-icon {

src/components/TransferTable.vue

@@ -4,6 +4,7 @@ import DateField from 'components/DateField';
 import TransactionField from 'components/TransactionField';
 import { formatWei, toChecksumAddress } from 'src/lib/utils';
 import { getIcon } from 'src/lib/token-utils';
+import { getDirection } from 'src/lib/transaction-utils';
 
 export default {
  name: 'TransferTable',
@@ -89,6 +90,7 @@ export default {
  showDateAge: true,
  tokenList: {},
  highlightAddress: '',
+ getDirection,
  };
  },
  created(){
@@ -268,14 +270,10 @@ export default {
  <DateField :epoch="convertToEpoch(props.row.timestamp)" :force-show-age="showDateAge"/>
  </q-td>
  <q-td key="direction" :props="props">
- <span v-if="toChecksumAddress(address) === toChecksumAddress(props.row.from)" class="direction out">
- {{ $t('components.transaction.out').toUpperCase() }}
- </span>
  <span
- v-else-if="toChecksumAddress(address) === toChecksumAddress(props.row.to)"
- class="direction in"
+ :class="`direction ${getDirection(address, props.row)}`"
  >
- {{ $t('components.transaction.in').toUpperCase() }}
+ {{ $t(`components.transaction.${getDirection(address, props.row)}`).toUpperCase() }}
  </span>
  </q-td>
  <q-td key="from" :props="props">
@@ -400,22 +398,7 @@ export default {
 
 <style lang='scss' scoped>
 .direction {
- user-select: none;
- padding: 3px 6px;
- border-radius: 5px;
- font-size: 0.9em;
-
- &.in {
- color: rgb(0, 161, 134);
- background: rgba(0, 161, 134, 0.1);
- border: 1px solid rgb(0, 161, 134);
- }
-
- &.out {
- color: #cc9a06 !important;
- background: rgba(255, 193, 7, 0.1);
- border: 1px solid #cc9a06 !important;
- }
+ @include direction;
 }
 
 .nft-icon {

src/css/global/_mixins.scss

@@ -115,3 +115,27 @@
  }
 }
 
+@mixin direction {
+ user-select: none;
+ padding: 3px 6px;
+ border-radius: 5px;
+ font-size: 0.9em;
+
+ &.in {
+ color: rgb(0, 161, 134);
+ background: rgba(0, 161, 134, 0.1);
+ border: 1px solid rgb(0, 161, 134);
+ }
+
+ &.out {
+ color: #cc9a06 !important;
+ background: rgba(255, 193, 7, 0.1);
+ border: 1px solid #cc9a06 !important;
+ }
+
+ &.self {
+ color: #949494 !important;
+ background: rgba(148, 148, 148, 0.1);
+ border: 1px solid #949494 !important;
+ }
+}

src/i18n/de-de/index.js

@@ -271,6 +271,7 @@ export default {
  transaction: {
  in: 'in',
  out: 'out',
+ self: 'self',
  load_error: 'Transaktionen konnten nicht geladen werden',
  show_short: 'Kurz anzeigen',
  show_total: 'Summe anzeigen',

src/i18n/en-us/index.js

@@ -275,6 +275,7 @@ export default {
  transaction: {
  in: 'in',
  out: 'out',
+ self: 'self',
  load_error: 'Could not load transactions',
  show_short: 'Show short',
  show_total: 'Show total',

src/i18n/es-es/index.js

@@ -272,6 +272,7 @@ export default {
  transaction: {
  in: 'entra',
  out: 'sale',
+ self: 'neutral',
  load_error: 'No se pudieron cargar las transacciones',
  show_short: 'Mostrar corta',
  show_total: 'Mostrar total',

src/i18n/fr-fr/index.js

@@ -272,6 +272,7 @@ export default {
  transaction: {
  in: 'dépot',
  out: 'envoi',
+ self: 'soi-même',
  form_from: 'De : ',
  form_to: 'À : ',
  load_error: 'Erreur de chargement des transactions',

src/i18n/pt-br/index.js

@@ -271,6 +271,7 @@ export default {
  transaction: {
  in: 'in',
  out: 'out',
+ self: 'self',
  load_error: 'Could not load transactions',
  show_short: 'Show short',
  show_total: 'Mostrar total',

src/lib/transaction-utils.ts

@@ -2,8 +2,9 @@ import { ethers } from 'ethers';
 import { indexerApi } from 'src/boot/telosApi';
 
 import { EvmTransaction, EvmTransactionLog } from 'src/antelope/types';
-import { EvmTransactionExtended } from 'src/types';
+import { EvmTransactionExtended, NftTransferData } from 'src/types';
 import { TransactionDescription } from 'ethers/lib/utils';
+import { toChecksumAddress } from 'src/lib/utils';
 
 export const tryToExtractMethod = (abi: {[hash: string]: string }, input: string) => {
  if (!abi || !input) {
@@ -57,3 +58,15 @@ export const loadTransaction = async (hash: string): Promise<EvmTransactionExten
  return null;
  }
 };
+export const getDirection = (address: string, row: NftTransferData) => {
+ if (toChecksumAddress(row.to) === toChecksumAddress(row.from)) {
+ return 'self';
+ } else if (toChecksumAddress(address) === toChecksumAddress(row.from)) {
+ return 'out';
+ } else if (toChecksumAddress(address) === toChecksumAddress(row.to)) {
+ return 'in';
+ } else {
+ return 'unknown';
+ }
+};
+

src/types/NftTransfers.ts

@@ -0,0 +1,26 @@
+import { EvmTransactionExtended } from 'src/types/EvmTransactionExtended';
+
+export interface NftTransferData {
+ hash: string;
+ timestamp: number;
+ amount: string;
+ id: string;
+ value: string;
+ contract: {
+ address: string;
+ name: string;
+ symbol: string;
+ decimals: number;
+ };
+ from: string;
+ to: string;
+ trx: EvmTransactionExtended | null;
+}
+
+export interface NftTransferProps {
+ title: string;
+ tokenType: string;
+ address: string;
+ initialPageSize: number;
+}
+

src/types/index.ts

@@ -2,3 +2,4 @@ export * from 'src/types/BlockData';
 export * from 'src/types/EvmTransactionExtended';
 export * from 'src/types/LatestContainerOptions';
 export * from 'src/types/Pagination';
+export * from 'src/types/NftTransfers';