Adapt transactions

package.json

@@ -34,10 +34,10 @@
     "@dfinity/principal": "^0.9.3",
     "@hookform/error-message": "^2.0.0",
     "@psychedelic/dab-js": "1.4.12",
-    "@psychedelic/plug-controller": "0.24.9",
+    "@psychedelic/plug-controller": "0.25.0",
     "@react-native-async-storage/async-storage": "^1.17.10",
+    "@react-native-clipboard/clipboard": "^1.11.1",
     "@react-native-community/blur": "^4.2.0",
-    "@react-native-community/clipboard": "^1.5.1",
     "@react-native-masked-view/masked-view": "^0.2.7",
     "@react-navigation/bottom-tabs": "^6.4.0",
     "@react-navigation/elements": "^1.3.6",

src/components/common/AccountInfo/index.tsx

@@ -1,4 +1,4 @@
-import Clipboard from '@react-native-community/clipboard';
+import Clipboard from '@react-native-clipboard/clipboard';
 import React, { useEffect, useState } from 'react';
 import { View } from 'react-native';
 

src/components/common/Copy/index.tsx

@@ -1,4 +1,4 @@
-import Clipboard from '@react-native-community/clipboard';
+import Clipboard from '@react-native-clipboard/clipboard';
 import { t } from 'i18next';
 import React, { useEffect, useState } from 'react';
 import { StyleProp, View, ViewStyle } from 'react-native';

src/components/common/Toast/index.tsx

@@ -23,7 +23,7 @@ export enum ToastTypes {
 
 export interface ToastProps {
   title: string;
-  message: string;
+  message?: string;
   type: 'success' | 'error' | 'info';
   id: string;
 }
@@ -65,9 +65,11 @@ function Toast({ title, message, type, id }: ToastProps) {
           <Close fill={Colors.White.Primary} height={20} />
         </Touchable>
       </View>
-      <Text type="caption" style={styles.message}>
-        {message}
-      </Text>
+      {message && (
+        <Text type="caption" style={styles.message}>
+          {message}
+        </Text>
+      )}
     </LinearGradient>
   );
 }

src/components/common/Toast/styles.ts

@@ -11,11 +11,11 @@ export default StyleSheet.create({
   },
   headerContainer: {
     flexDirection: 'row',
-    marginBottom: 8,
     alignItems: 'center',
     justifyContent: 'space-between',
   },
   message: {
+    marginTop: 8,
     color: Colors.White.Pure,
     opacity: 0.8,
   },

src/components/common/Touchable/index.tsx

@@ -16,7 +16,7 @@ import scales from '@/utils/animationScales';
 
 interface Props {
   children?: React.ReactNode;
-  onPress?: () => void;
+  onPress?: (param?: any) => void;
   onLongPress?: () => void;
   hapticType?: HapticFeedbackTypes;
   scale?: number;

src/components/formatters/UsdFormat/index.tsx

@@ -9,9 +9,16 @@ interface Props {
   style?: StyleProp<TextStyle>;
   decimalScale?: number;
   suffix?: string;
+  numberOfLines?: number;
 }
 
-function UsdFormat({ value, style, decimalScale = 2, suffix }: Props) {
+function UsdFormat({
+  value,
+  style,
+  decimalScale = 2,
+  suffix,
+  numberOfLines,
+}: Props) {
   return (
     <NumberFormat
       value={value}
@@ -23,7 +30,7 @@ function UsdFormat({ value, style, decimalScale = 2, suffix }: Props) {
       suffix={suffix ? ` ${suffix}` : undefined}
       renderText={(textValue: string) =>
         textValue ? (
-          <Text type="body2" style={style}>
+          <Text numberOfLines={numberOfLines} type="body2" style={style}>
             {textValue}
           </Text>
         ) : null

src/hooks/useCustomToast.ts

@@ -6,7 +6,7 @@ import { ToastTypes } from '@/components/common/Toast';
 function useCustomToast() {
   const toast = useToast();
 
-  const showSuccess = useCallback((title: string, message: string) => {
+  const showSuccess = useCallback((title: string, message?: string) => {
     toast.show(`${ToastTypes.success}-${title}`, {
       data: {
         type: ToastTypes.success,
@@ -16,7 +16,7 @@ function useCustomToast() {
     });
   }, []);
 
-  const showError = useCallback((title: string, message: string) => {
+  const showError = useCallback((title: string, message?: string) => {
     toast.show(`${ToastTypes.error}-${title}`, {
       data: {
         type: ToastTypes.error,
@@ -26,7 +26,7 @@ function useCustomToast() {
     });
   }, []);
 
-  const showInfo = useCallback((title: string, message: string) => {
+  const showInfo = useCallback((title: string, message?: string) => {
     toast.show(`${ToastTypes.info}-${title}`, {
       data: {
         type: ToastTypes.info,

src/interfaces/redux.ts

@@ -1,5 +1,6 @@
 import WalletConnect from '@walletconnect/client';
 
+import { Nullable } from './general';
 import { ICNSData } from './icns';
 import { WCWhiteListItem } from './walletConnect';
 
@@ -53,40 +54,20 @@ export interface CanisterInfo {
   symbol?: string;
 }
 
-interface Currency {
-  symbol: string;
-  decimals: number;
-}
-
-export interface TransactionDetails {
-  status: string; //check if this is correct
-  fee: {
-    amount: string;
-    currency: Currency;
-  };
-  from: string;
-  amount: string;
-  currency: Currency;
-  to: string;
-  caller: string;
-}
-
 export interface Transaction {
-  amount: string | number;
-  type: string; //TODO: Add types here SEND/RECEIVE. Check ACTIVITY_TYPES
-  symbol: string;
-  hash: string;
+  type: string;
   to: string;
   from: string;
-  date: Date;
-  image: string;
-  value?: string | number;
-  status?: number | string;
-  icon?: string;
-  canisterId?: string;
-  plug?: any;
-  canisterInfo?: CanisterInfo;
-  details?: TransactionDetails;
+  hash: string;
+  amount: Nullable<number | typeof NaN>;
+  value?: Nullable<number>;
+  status: number;
+  date: bigint;
+  symbol: string;
+  logo: string;
+  canisterId: string;
+  details?: { [key: string]: any };
+  canisterInfo?: Object;
 }
 
 export interface Asset {

src/redux/slices/user.ts

@@ -2,7 +2,6 @@ import { Principal } from '@dfinity/principal';
 import { Address } from '@psychedelic/plug-controller/dist/interfaces/contact_registry';
 import { createAsyncThunk, createSlice, isAnyOf } from '@reduxjs/toolkit';
 
-import { JELLY_CANISTER_ID } from '@/constants/canister';
 import { ENABLE_NFTS } from '@/constants/nfts';
 import {
   CollectionInfo,
@@ -35,7 +34,6 @@ import {
   DEFAULT_TRANSACTION,
   formatContact,
   formatContactForController,
-  formatTransaction,
   TRANSACTION_STATUS,
 } from '../utils';
 
@@ -184,25 +182,11 @@ export const getTransactions = createAsyncThunk<
   try {
     const { icpPrice } = params;
     const instance = KeyRing.getInstance();
-    const currentWalletId = instance?.currentWalletId;
-    const state = await instance?.getState();
-    const currentWallet = state.wallets[currentWalletId];
-    const response = await instance?.getTransactions({});
-    let parsedTrx =
-      response?.transactions?.map(formatTransaction(icpPrice, currentWallet)) ||
-      [];
-
-    if (!ENABLE_NFTS) {
-      parsedTrx = parsedTrx.filter(
-        item =>
-          !(
-            item?.symbol === 'NFT' ||
-            item?.details.canisterId === JELLY_CANISTER_ID
-          )
-      );
-    }
+    const { transactions } = await instance?.getTransactions({
+      icpPrice,
+    });
 
-    return parsedTrx;
+    return transactions;
   } catch (e: any) {
     return rejectWithValue(e.message);
   }

src/redux/utils.js

@@ -4,14 +4,11 @@ import Flatted from 'flatted';
 import { t } from 'i18next';
 
 import { TOKEN_IMAGES, TOKENS } from '@/constants/assets';
-import { ACTIVITY_STATUS } from '@/constants/business';
 import {
   KEYRING_KEYS_IN_STORAGE,
   KEYRING_STORAGE_KEY,
 } from '@/constants/keyring';
-import { formatAssetBySymbol, parseToFloatAmount } from '@/utils/currencies';
 import { validateAccountId, validatePrincipalId } from '@/utils/ids';
-import { recursiveParseBigint } from '@/utils/objects';
 
 import { clear } from './slices/keyring';
 import {
@@ -82,113 +79,6 @@ export const getNewAccountData = async (dispatch, icpPrice) => {
   dispatch(getContacts());
 };
 
-const parseTransactionObject = transactionObject => {
-  const { amount, currency, token, sonicData, canisterInfo } =
-    transactionObject;
-
-  const { decimals } = {
-    ...currency,
-    ...token,
-    ...(sonicData?.token ?? {}),
-    ...(canisterInfo?.tokenRegistryInfo?.details ?? {}),
-  };
-  // TODO: Decimals are currently not in DAB. Remove once they are added.
-  const parsedAmount = parseToFloatAmount(
-    amount,
-    decimals || TOKENS[sonicData?.token?.details?.symbol]?.decimals
-  );
-
-  return {
-    ...transactionObject,
-    amount: parsedAmount,
-  };
-};
-
-const parseTransaction = transaction => {
-  const { details } = transaction;
-  const { fee } = details;
-
-  const parsedDetails = parseTransactionObject(details);
-  let parsedFee = fee;
-
-  if (fee instanceof Object && ('token' in fee || 'currency' in fee)) {
-    parsedFee = parseTransactionObject(fee);
-  }
-
-  return {
-    ...transaction,
-    details: {
-      ...parsedDetails,
-      fee: parsedFee,
-    },
-  };
-};
-
-const getTransactionSymbol = details => {
-  if (!details) {
-    return '';
-  }
-  if ('tokenRegistryInfo' in (details?.canisterInfo || [])) {
-    return details?.canisterInfo.tokenRegistryInfo.symbol;
-  }
-  if ('nftRegistryInfo' in (details?.canisterInfo || [])) {
-    return 'NFT';
-  }
-  return (
-    details?.currency?.symbol ??
-    details?.sonicData?.token?.details?.symbol ??
-    details?.details?.name ??
-    ''
-  );
-};
-
-const getTransactionType = (type, isOwnTx) => {
-  if (!type) {
-    return '';
-  }
-  if (type.includes('transfer')) {
-    return isOwnTx ? 'SEND' : 'RECEIVE';
-  }
-  if (type.includes('Liquidity')) {
-    return `${type.includes('removeLiquidity') ? 'Remove' : 'Add'} Liquidity`;
-  }
-  return type.toUpperCase();
-};
-
-export const formatTransaction = (icpPrice, currentWallet) => trx => {
-  const { principal, accountId } = currentWallet;
-
-  let parsedTransaction = recursiveParseBigint(parseTransaction(trx));
-  const { details, hash, caller, timestamp } = parsedTransaction || {};
-  const isOwnTx = [principal, accountId].includes(caller);
-
-  const symbol = getTransactionSymbol(details);
-  const asset = formatAssetBySymbol(details?.amount, symbol, icpPrice);
-  const type = getTransactionType(parsedTransaction?.type, isOwnTx);
-
-  const transaction = {
-    amount: asset.amount,
-    value: asset.value,
-    icon: asset.icon,
-    type,
-    hash,
-    to: details?.to?.icns || details?.to?.principal,
-    from: details?.from?.icns || details?.from?.principal || caller,
-    date: new Date(timestamp),
-    status: ACTIVITY_STATUS[details?.status],
-    image: details?.canisterInfo?.icon || TOKEN_IMAGES[symbol] || '',
-    symbol,
-    canisterId: details?.canisterId,
-    plug: null,
-    canisterInfo: details?.canisterInfo,
-    details: {
-      ...details,
-      caller,
-    },
-  };
-  return transaction;
-};
-
 export const formatContact = contact => {
   const [id] = Object.values(contact.value);
 

src/screens/flows/Deposit/components/IDDetails/index.js

@@ -1,4 +1,4 @@
-import Clipboard from '@react-native-community/clipboard';
+import Clipboard from '@react-native-clipboard/clipboard';
 import React, { useEffect, useState } from 'react';
 
 import CopiedToast from '@/commonComponents/CopiedToast';

src/screens/flows/Send/index.tsx

@@ -17,6 +17,7 @@ import { getICPPrice } from '@/redux/slices/icp';
 import { sendToken, setTransaction, transferNFT } from '@/redux/slices/user';
 import { formatCollections, FormattedCollection } from '@/utils/assets';
 import {
+  isOwnAddress,
   validateAccountId,
   validateICNSName,
   validatePrincipalId,
@@ -186,20 +187,17 @@ function Send({ route }: ScreenProps<Routes.SEND>) {
     }
 
     const savedContact = contacts?.find(c => c.id === text);
-    const isOwnAddress =
-      text === currentWallet?.principal ||
-      text === currentWallet?.accountId ||
-      text === currentWallet?.icnsData?.reverseResolvedName;
+    const isOwn = isOwnAddress(text, currentWallet!);
 
-    if (savedContact && !isOwnAddress) {
+    if (savedContact && !isOwn) {
       setReceiver({
         ...savedContact,
         isValid: true,
       });
       scrollToTop();
     } else {
       const isValid =
-        !isOwnAddress && (validatePrincipalId(text) || validateAccountId(text));
+        !isOwn && (validatePrincipalId(text) || validateAccountId(text));
       setReceiver({ id: text, isValid });
     }
   };