@reown/appkit-ui-react-native 0.0.0-accounts-canary.1-20251023174733

package/src/utils/ThemeUtil.ts

@@ -0,0 +1,217 @@
+import { transparentize, darken, lighten } from 'polished';
+
+import type { SpacingType, ThemeKeys } from './TypesUtil';
+
+export const getAccentColors = (baseAccentColor: string) => {
+  return {
+    'accent-100': baseAccentColor,
+    'accent-090': lighten(0.05, baseAccentColor),
+    'accent-080': lighten(0.1, baseAccentColor),
+    'accent-020': darken(0.1, baseAccentColor),
+    'accent-glass-090': transparentize(0.1, baseAccentColor),
+    'accent-glass-080': transparentize(0.2, baseAccentColor),
+    'accent-glass-020': transparentize(0.8, baseAccentColor),
+    'accent-glass-015': transparentize(0.85, baseAccentColor),
+    'accent-glass-010': transparentize(0.9, baseAccentColor),
+    'accent-glass-005': transparentize(0.95, baseAccentColor),
+    'accent-glass-002': transparentize(0.98, baseAccentColor)
+  };
+};
+
+export const DarkTheme: { [key in ThemeKeys]: string } = {
+  'accent-100': '#667DFF',
+  'accent-090': '#7388FD',
+  'accent-080': '#7F92FA',
+  'accent-020': '#5869D1',
+  'accent-glass-090': 'rgba(102, 125, 255, 0.90)',
+  'accent-glass-080': 'rgba(102, 125, 255, 0.80)',
+  'accent-glass-020': 'rgba(102, 125, 255, 0.2)',
+  'accent-glass-015': 'rgba(102, 125, 255, 0.15)',
+  'accent-glass-010': 'rgba(102, 125, 255, 0.1)',
+  'accent-glass-005': 'rgba(102, 125, 255, 0.05)',
+  'accent-glass-002': 'rgba(102, 125, 255, 0.02)',
+
+  'fg-100': '#E4E7E7',
+  'fg-125': '#D0D5D5',
+  'fg-150': '#A8B1B1',
+  'fg-175': '#A8B0B0',
+  'fg-200': '#949E9E',
+  'fg-225': '#868F8F',
+  'fg-250': '#788080',
+  'fg-275': '#788181',
+  'fg-300': '#6E7777',
+
+  'bg-100': '#121313',
+  'bg-125': '#191A1A',
+  'bg-150': '#1E1F1F',
+  'bg-175': '#222525',
+  'bg-200': '#272A2A',
+  'bg-225': '#2C3030',
+  'bg-250': '#313535',
+  'bg-275': '#363B3B',
+  'bg-300': '#3B4040',
+
+  'inverse-100': '#FFFFFF',
+  'inverse-000': '#000000',
+
+  'success-100': '#26D962',
+  'success-glass-020': 'rgba(38, 217, 98, 0.20)',
+  'success-glass-015': 'rgba(38, 217, 98, 0.15)',
+  'success-glass-010': 'rgba(38, 217, 98, 0.10)',
+  'success-glass-005': 'rgba(38, 217, 98, 0.05)',
+
+  'error-100': '#F25A67',
+  'error-glass-020': 'rgba(242, 90, 103, 0.20)',
+  'error-glass-015': 'rgba(242, 90, 103, 0.15)',
+  'error-glass-010': 'rgba(242, 90, 103, 0.10)',
+  'error-glass-005': 'rgba(242, 90, 103, 0.05)',
+
+  'teal-100': '#36e2e2',
+  'magenta-100': '#cb4d8c',
+  'indigo-100': '#516dfb',
+  'orange-100': '#ffa64c',
+  'purple-100': '#906ef7',
+  'yellow-100': '#faff00',
+
+  'gray-glass-001': 'rgba(255, 255, 255, 0.01)',
+  'gray-glass-002': 'rgba(255, 255, 255, 0.02)',
+  'gray-glass-005': 'rgba(255, 255, 255, 0.05)',
+  'gray-glass-010': 'rgba(255, 255, 255, 0.1)',
+  'gray-glass-015': 'rgba(255, 255, 255, 0.15)',
+  'gray-glass-020': 'rgba(255, 255, 255, 0.2)',
+  'gray-glass-025': 'rgba(255, 255, 255, 0.25)',
+  'gray-glass-030': 'rgba(255, 255, 255, 0.3)',
+  'gray-glass-060': 'rgba(255, 255, 255, 0.6)',
+  'gray-glass-070': 'rgba(255, 255, 255, 0.7)',
+  'gray-glass-080': 'rgba(255, 255, 255, 0.8)',
+  'gray-glass-090': 'rgba(255, 255, 255, 0.9)',
+
+  //IconBox
+  'icon-box-bg-error-100': '#3c2426',
+  'icon-box-bg-success-100': '#1f3a28'
+};
+
+export const LightTheme: { [key in ThemeKeys]: string } = {
+  'accent-100': '#5570FF',
+  'accent-090': '#4F67E7',
+  'accent-080': '#485ED0',
+  'accent-020': '#788DFF',
+  'accent-glass-090': 'rgba(85, 112, 255, 0.90)',
+  'accent-glass-080': 'rgba(85, 112, 255, 0.8)',
+  'accent-glass-020': 'rgba(85, 112, 255, 0.2)',
+  'accent-glass-015': 'rgba(85, 112, 255, 0.15)',
+  'accent-glass-010': 'rgba(85, 112, 255, 0.1)',
+  'accent-glass-005': 'rgba(85, 112, 255, 0.05)',
+  'accent-glass-002': 'rgba(85, 112, 255, 0.02)',
+
+  'fg-100': '#141414',
+  'fg-125': '#2d3131',
+  'fg-150': '#474d4d',
+  'fg-175': '#636d6d',
+  'fg-200': '#798686',
+  'fg-225': '#828f8f',
+  'fg-250': '#8b9797',
+  'fg-275': '#95a0a0',
+  'fg-300': '#9ea9a9',
+
+  'bg-100': '#ffffff',
+  'bg-125': '#ffffff',
+  'bg-150': '#f3f8f8',
+  'bg-175': '#eef4f4',
+  'bg-200': '#eaf1f1',
+  'bg-225': '#e5eded',
+  'bg-250': '#e1e9e9',
+  'bg-275': '#dce7e7',
+  'bg-300': '#d8e3e3',
+
+  'inverse-100': '#FFFFFF',
+  'inverse-000': '#000000',
+
+  'success-100': '#26B562',
+  'success-glass-020': 'rgba(38, 181, 98, 0.20)',
+  'success-glass-015': 'rgba(38, 181, 98, 0.15)',
+  'success-glass-010': 'rgba(38, 181, 98, 0.10)',
+  'success-glass-005': 'rgba(38, 181, 98, 0.05)',
+
+  'error-100': '#F05142',
+  'error-glass-020': 'rgba(240, 81, 66, 0.20)',
+  'error-glass-015': 'rgba(240, 81, 66, 0.15)',
+  'error-glass-010': 'rgba(240, 81, 66, 0.10)',
+  'error-glass-005': 'rgba(240, 81, 66, 0.05)',
+
+  'teal-100': '#2bb6b6',
+  'magenta-100': '#c65380',
+  'indigo-100': '#3d5cf5',
+  'orange-100': '#ea8c2e',
+  'purple-100': '#794cff',
+  'yellow-100': '#eccc1c',
+
+  'gray-glass-001': 'rgba(0, 0, 0, 0.01)',
+  'gray-glass-002': 'rgba(0, 0, 0, 0.02)',
+  'gray-glass-005': 'rgba(0, 0, 0, 0.05)',
+  'gray-glass-010': 'rgba(0, 0, 0, 0.1)',
+  'gray-glass-015': 'rgba(0, 0, 0, 0.15)',
+  'gray-glass-020': 'rgba(0, 0, 0, 0.2)',
+  'gray-glass-025': 'rgba(0, 0, 0, 0.25)',
+  'gray-glass-030': 'rgba(0, 0, 0, 0.3)',
+  'gray-glass-060': 'rgba(0, 0, 0, 0.6)',
+  'gray-glass-070': 'rgba(0, 0, 0, 0.7)',
+  'gray-glass-080': 'rgba(0, 0, 0, 0.8)',
+  'gray-glass-090': 'rgba(0, 0, 0, 0.9)',
+
+  //IconBox
+  'icon-box-bg-error-100': '#f4dfdd',
+  'icon-box-bg-success-100': '#daf0e4'
+};
+
+export const BorderRadius = {
+  '5xs': 4,
+  '4xs': 6,
+  '3xs': 8,
+  'xxs': 12,
+  'xs': 16,
+  's': 20,
+  'm': 28,
+  'l': 36,
+  '3xl': 80,
+  'full': 100
+};
+
+export const IconSize = {
+  xxs: 10,
+  xs: 12,
+  sm: 14,
+  md: 16,
+  lg: 20,
+  xl: 24
+};
+
+export const SpinnerSize = {
+  sm: 12,
+  md: 16,
+  lg: 24,
+  xl: 32
+};
+
+export const Spacing: { [K in SpacingType]: number } = {
+  '0': 0,
+  '4xs': 2,
+  '3xs': 4,
+  '2xs': 6,
+  'xs': 8,
+  's': 12,
+  'm': 14,
+  'l': 16,
+  'xl': 20,
+  '2xl': 24,
+  '3xl': 32,
+  '4xl': 40
+};
+
+export const WalletImageSize = {
+  xs: 15,
+  sm: 40,
+  md: 56,
+  lg: 64,
+  xl: 80
+};

package/src/utils/TransactionUtil.ts

@@ -0,0 +1,193 @@
+import {
+  type TransactionTransfer,
+  type Transaction,
+  type TransactionImage,
+  type TransactionMetadata,
+  DateUtil
+} from '@reown/appkit-common-react-native';
+import type { TransactionType } from './TypesUtil';
+import { UiUtil } from './UiUtil';
+
+// -- Helpers --------------------------------------------- //
+const FLOAT_FIXED_VALUE = 2;
+const SMALL_FLOAT_FIXED_VALUE = 4;
+const plusTypes: TransactionType[] = ['receive', 'deposit', 'borrow', 'claim'];
+const minusTypes: TransactionType[] = ['withdraw', 'repay', 'burn'];
+
+export const TransactionUtil = {
+  getTransactionGroupTitle(year: string, month: string) {
+    const currentYear = DateUtil.getYear().toString();
+    const monthName = DateUtil.getMonth(parseInt(month));
+    const isCurrentYear = year === currentYear;
+    const groupTitle = isCurrentYear ? monthName : `${monthName} ${year}`;
+
+    return groupTitle;
+  },
+
+  getTransactionImages(transfers: TransactionTransfer[]): TransactionImage[] {
+    const isAllNFT = Boolean(transfers[0]) && transfers?.every(item => Boolean(item.nft_info));
+    const haveMultipleTransfers = transfers?.length > 1;
+    const haveTwoTransfers = transfers?.length === 2;
+
+    if (haveTwoTransfers && !isAllNFT) {
+      const first = transfers.find(t => t?.direction === 'out');
+      const second = transfers.find(t => t?.direction === 'in');
+
+      return [this.getTransactionImage(first), this.getTransactionImage(second)];
+    }
+
+    if (haveMultipleTransfers) {
+      return transfers.map(item => this.getTransactionImage(item));
+    }
+
+    return [this.getTransactionImage(transfers[0])];
+  },
+
+  getTransactionImage(transfer?: TransactionTransfer): TransactionImage {
+    return {
+      type: TransactionUtil.getTransactionTransferTokenType(transfer),
+      url: TransactionUtil.getTransactionImageURL(transfer)
+    };
+  },
+
+  getTransactionImageURL(transfer: TransactionTransfer | undefined) {
+    let imageURL;
+    const isNFT = Boolean(transfer?.nft_info);
+    const isFungible = Boolean(transfer?.fungible_info);
+
+    if (transfer && isNFT) {
+      imageURL = transfer?.nft_info?.content?.preview?.url;
+    } else if (transfer && isFungible) {
+      imageURL = transfer?.fungible_info?.icon?.url;
+    }
+
+    return imageURL;
+  },
+
+  getTransactionTransferTokenType(transfer?: TransactionTransfer): 'FUNGIBLE' | 'NFT' | undefined {
+    if (transfer?.fungible_info) {
+      return 'FUNGIBLE';
+    } else if (transfer?.nft_info) {
+      return 'NFT';
+    }
+
+    return undefined;
+  },
+
+  getTransactionDescriptions(transaction: Transaction) {
+    if (!transaction.metadata) {
+      return ['Unknown transaction'];
+    }
+
+    const type = transaction?.metadata?.operationType as TransactionType;
+    const transfers = transaction?.transfers;
+
+    // Early return for trade transactions
+    if (type === 'trade') {
+      return this.getTradeDescriptions(transfers);
+    }
+
+    // Handle multiple transfers
+    if (transfers.length > 1) {
+      return transfers.map(transfer => this.getTransferDescription(transfer));
+    }
+
+    // Handle single transfer
+    if (transfers.length === 1) {
+      return [this.formatSingleTransfer(transfers[0]!, type, transaction.metadata)];
+    }
+
+    return [transaction.metadata.status];
+  },
+
+  isSendReceiveTransaction(type: TransactionType): boolean {
+    return type === 'send' || type === 'receive';
+  },
+
+  hasFungibleTransfers(transfers: TransactionTransfer[]): boolean {
+    return transfers.every(transfer => Boolean(transfer?.fungible_info));
+  },
+
+  getSendReceiveDescriptions(metadata: TransactionMetadata): string[] {
+    return [this.truncateAddress(metadata.sentFrom), this.truncateAddress(metadata.sentTo)];
+  },
+
+  truncateAddress(address: string): string {
+    return UiUtil.getTruncateString({
+      string: address,
+      charsStart: 4,
+      charsEnd: 6,
+      truncate: 'middle'
+    });
+  },
+
+  formatSingleTransfer(
+    transfer: TransactionTransfer,
+    type: TransactionType,
+    metadata: TransactionMetadata
+  ): string {
+    const prefix = this.getPrefix(type);
+    let description = prefix.concat(this.getTransferDescription(transfer));
+
+    if (this.isSendReceiveTransaction(type)) {
+      const isSend = type === 'send';
+
+      const address = this.truncateAddress(isSend ? metadata.sentTo : metadata.sentFrom);
+      const arrow = isSend ? '→' : '←';
+      description = description.concat(` ${arrow} ${address}`);
+    }
+
+    return description;
+  },
+
+  getPrefix(type: TransactionType): string {
+    if (plusTypes.includes(type)) return '+';
+    if (minusTypes.includes(type)) return '-';
+
+    return '';
+  },
+
+  getTradeDescriptions(transfers: TransactionTransfer[]): string[] {
+    const outTransfer = transfers.find(transfer => transfer?.direction === 'out');
+    const inTransfer = transfers.find(transfer => transfer?.direction === 'in');
+
+    return [this.getTransferDescription(outTransfer), this.getTransferDescription(inTransfer)];
+  },
+
+  getTransferDescription(transfer?: TransactionTransfer) {
+    let description = '';
+
+    if (!transfer) {
+      return description;
+    }
+
+    if (transfer?.nft_info) {
+      description = transfer?.nft_info?.name || '-';
+    } else if (transfer?.fungible_info) {
+      description = this.getFungibleTransferDescription(transfer) ?? '-';
+    }
+
+    return description;
+  },
+
+  getFungibleTransferDescription(transfer?: TransactionTransfer) {
+    if (!transfer) {
+      return null;
+    }
+
+    const quantity = this.getQuantityFixedValue(transfer?.quantity.numeric);
+    const description = [quantity, transfer?.fungible_info?.symbol].join(' ').trim();
+
+    return description;
+  },
+
+  getQuantityFixedValue(value: string | undefined) {
+    if (!value) {
+      return null;
+    }
+
+    const parsedValue = parseFloat(value);
+
+    return parsedValue.toFixed(parsedValue > 1 ? FLOAT_FIXED_VALUE : SMALL_FLOAT_FIXED_VALUE);
+  }
+};

package/src/utils/TypesUtil.ts

@@ -0,0 +1,299 @@
+export type ThemeKeys =
+  | 'accent-100'
+  | 'accent-090'
+  | 'accent-080'
+  | 'accent-020'
+  | 'accent-glass-090'
+  | 'accent-glass-080'
+  | 'accent-glass-020'
+  | 'accent-glass-015'
+  | 'accent-glass-010'
+  | 'accent-glass-005'
+  | 'accent-glass-002'
+  | 'fg-100'
+  | 'fg-125'
+  | 'fg-150'
+  | 'fg-175'
+  | 'fg-200'
+  | 'fg-225'
+  | 'fg-250'
+  | 'fg-275'
+  | 'fg-300'
+  | 'bg-100'
+  | 'bg-125'
+  | 'bg-150'
+  | 'bg-175'
+  | 'bg-200'
+  | 'bg-225'
+  | 'bg-250'
+  | 'bg-275'
+  | 'bg-300'
+  | 'inverse-100'
+  | 'inverse-000'
+  | 'success-100'
+  | 'success-glass-020'
+  | 'success-glass-015'
+  | 'success-glass-010'
+  | 'success-glass-005'
+  | 'error-100'
+  | 'error-glass-020'
+  | 'error-glass-015'
+  | 'error-glass-010'
+  | 'error-glass-005'
+  | 'teal-100'
+  | 'magenta-100'
+  | 'indigo-100'
+  | 'orange-100'
+  | 'purple-100'
+  | 'yellow-100'
+  | 'gray-glass-001'
+  | 'gray-glass-002'
+  | 'gray-glass-005'
+  | 'gray-glass-010'
+  | 'gray-glass-015'
+  | 'gray-glass-020'
+  | 'gray-glass-025'
+  | 'gray-glass-030'
+  | 'gray-glass-060'
+  | 'gray-glass-070'
+  | 'gray-glass-080'
+  | 'gray-glass-090'
+  | 'icon-box-bg-error-100'
+  | 'icon-box-bg-success-100';
+
+export type TextType =
+  | 'medium-title-400'
+  | 'medium-title-500'
+  | 'medium-title-600'
+  | 'small-title-400'
+  | 'small-title-500'
+  | 'small-title-600'
+  | 'large-400'
+  | 'large-500'
+  | 'large-600'
+  | 'medium-400'
+  | 'medium-500'
+  | 'medium-600'
+  | 'paragraph-400'
+  | 'paragraph-500'
+  | 'paragraph-600'
+  | 'small-400'
+  | 'small-500'
+  | 'small-600'
+  | 'tiny-400'
+  | 'tiny-500'
+  | 'tiny-600'
+  | 'micro-600'
+  | 'micro-700';
+
+export type ColorType =
+  | 'accent-100'
+  | 'error-100'
+  | 'fg-100'
+  | 'fg-150'
+  | 'fg-175'
+  | 'fg-200'
+  | 'fg-250'
+  | 'fg-275'
+  | 'fg-300'
+  | 'bg-100'
+  | 'bg-125'
+  | 'bg-150'
+  | 'bg-175'
+  | 'bg-200'
+  | 'bg-225'
+  | 'bg-250'
+  | 'bg-275'
+  | 'bg-300'
+  | 'accent-glass-020'
+  | 'accent-glass-015'
+  | 'accent-glass-010'
+  | 'accent-glass-005'
+  | 'gray-glass-020'
+  | 'gray-glass-010'
+  | 'gray-glass-005'
+  | 'gray-glass-002'
+  | 'inverse-000'
+  | 'inverse-100'
+  | 'success-100'
+  | 'teal-100'
+  | 'magenta-100'
+  | 'indigo-100'
+  | 'orange-100'
+  | 'purple-100'
+  | 'yellow-100';
+
+export type SizeType = 'xl' | 'lg' | 'md' | 'sm' | 'xs' | 'xxs';
+
+export type PlacementType = 'bottom' | 'left' | 'right' | 'top';
+
+export type ButtonType = 'accent' | 'fill' | 'shade';
+
+export type ChipType = 'fill' | 'shade' | 'transparent';
+
+export type IconType =
+  | 'allWallets'
+  | 'apple'
+  | 'arrowBottom'
+  | 'arrowBottomCircle'
+  | 'arrowLeft'
+  | 'arrowRight'
+  | 'arrowTop'
+  | 'browser'
+  | 'card'
+  | 'checkmark'
+  | 'chevronBottom'
+  | 'chevronLeft'
+  | 'chevronRight'
+  | 'chevronRightSmall'
+  | 'chevronTop'
+  | 'clock'
+  | 'close'
+  | 'coinPlaceholder'
+  | 'compass'
+  | 'copy'
+  | 'copySmall'
+  | 'cursor'
+  | 'currencyDollar'
+  | 'desktop'
+  | 'disconnect'
+  | 'discord'
+  | 'etherscan'
+  | 'extension'
+  | 'externalLink'
+  | 'facebook'
+  | 'farcaster'
+  | 'farcasterSquare'
+  | 'filters'
+  | 'github'
+  | 'google'
+  | 'helpCircle'
+  | 'infoCircle'
+  | 'email'
+  | 'mobile'
+  | 'more'
+  | 'networkPlaceholder'
+  | 'nftPlaceholder'
+  | 'off'
+  | 'paperplane'
+  | 'qrCode'
+  | 'recycleHorizontal'
+  | 'refresh'
+  | 'reown'
+  | 'search'
+  | 'settings'
+  | 'swapHorizontal'
+  | 'swapVertical'
+  | 'telegram'
+  | 'twitch'
+  | 'verify'
+  | 'wallet'
+  | 'walletSmall'
+  | 'walletConnect'
+  | 'walletConnectLightBrown'
+  | 'walletPlaceholder'
+  | 'warningCircle'
+  | 'x';
+
+export type VisualType =
+  | 'browser'
+  | 'dao'
+  | 'defi'
+  | 'defiAlt'
+  | 'eth'
+  | 'google'
+  | 'layers'
+  | 'lightbulb'
+  | 'lock'
+  | 'login'
+  | 'network'
+  | 'nft'
+  | 'noun'
+  | 'pencil'
+  | 'profile'
+  | 'system';
+
+export type LogoType =
+  | 'apple'
+  | 'discord'
+  | 'facebook'
+  | 'farcaster'
+  | 'farcasterSquare'
+  | 'github'
+  | 'google'
+  | 'more'
+  | 'telegram'
+  | 'twitch'
+  | 'email'
+  | 'x';
+
+export type TagType = 'main' | 'shade' | 'error' | 'success';
+
+export type CardSelectType = 'wallet' | 'network';
+
+export type TabOptionType = {
+  icon: IconType;
+  label?: string;
+};
+
+export type SpacingType =
+  | '0'
+  | '4xs'
+  | '3xs'
+  | '2xs'
+  | 'xs'
+  | 's'
+  | 'm'
+  | 'l'
+  | 'xl'
+  | '2xl'
+  | '3xl'
+  | '4xl';
+
+export type BorderRadiusType = Exclude<SpacingType, 'xl' | 'xxl'>;
+
+export type FlexDirectionType = 'column-reverse' | 'column' | 'row-reverse' | 'row';
+
+export type FlexWrapType = 'nowrap' | 'wrap-reverse' | 'wrap';
+
+export type FlexGrowType = 0 | 1;
+
+export type FlexShrinkType = 0 | 1;
+
+export type FlexAlignType = 'baseline' | 'center' | 'flex-end' | 'flex-start' | 'stretch';
+
+export type FlexJustifyContentType =
+  | 'center'
+  | 'flex-end'
+  | 'flex-start'
+  | 'space-around'
+  | 'space-between'
+  | 'space-evenly';
+
+export type TruncateType = 'start' | 'middle' | 'end';
+
+export type TruncateOptions = {
+  string: string;
+  charsStart: number;
+  charsEnd: number;
+  truncate: TruncateType;
+};
+
+export type TransactionType =
+  | 'approve'
+  | 'bought'
+  | 'borrow'
+  | 'burn'
+  | 'cancel'
+  | 'claim'
+  | 'deploy'
+  | 'deposit'
+  | 'execute'
+  | 'mint'
+  | 'receive'
+  | 'repay'
+  | 'send'
+  | 'stake'
+  | 'trade'
+  | 'unstake'
+  | 'withdraw';