@reown/appkit-ui-react-native 0.0.0-canary-20240912195440

package/src/utils/QRCodeUtil.tsx

@@ -0,0 +1,185 @@
+import type { ReactNode } from 'react';
+import { Line, Rect, Circle } from 'react-native-svg';
+import QRCode from 'qrcode';
+import { DarkTheme, LightTheme } from '../utils/ThemeUtil';
+
+type CoordinateMapping = [number, number[]];
+
+const CONNECTING_ERROR_MARGIN = 0.1;
+const CIRCLE_SIZE_MODIFIER = 2.5;
+const QRCODE_MATRIX_MARGIN = 7;
+
+function isAdjecentDots(cy: number, otherCy: number, cellSize: number) {
+  if (cy === otherCy) {
+    return false;
+  }
+  const diff = cy - otherCy < 0 ? otherCy - cy : cy - otherCy;
+
+  return diff <= cellSize + CONNECTING_ERROR_MARGIN;
+}
+
+function getMatrix(value: string, errorCorrectionLevel: QRCode.QRCodeErrorCorrectionLevel) {
+  const arr = Array.prototype.slice.call(
+    QRCode.create(value, { errorCorrectionLevel }).modules.data,
+    0
+  );
+  const sqrt = Math.sqrt(arr.length);
+
+  return arr.reduce(
+    (rows, key, index) =>
+      (index % sqrt === 0 ? rows.push([key]) : rows[rows.length - 1].push(key)) && rows,
+    []
+  );
+}
+
+export const QRCodeUtil = {
+  generate(uri: string, size: number, logoSize: number) {
+    const dotColor = DarkTheme['bg-100'];
+    const edgeColor = LightTheme['bg-100'];
+    const dots: ReactNode[] = [];
+    const matrix = getMatrix(uri, 'Q');
+    const cellSize = size / matrix.length;
+    const qrList = [
+      { x: 0, y: 0 },
+      { x: 1, y: 0 },
+      { x: 0, y: 1 }
+    ];
+
+    qrList.forEach(({ x, y }) => {
+      const x1 = (matrix.length - QRCODE_MATRIX_MARGIN) * cellSize * x;
+      const y1 = (matrix.length - QRCODE_MATRIX_MARGIN) * cellSize * y;
+      const borderRadius = 0.32;
+      for (let i = 0; i < qrList.length; i += 1) {
+        const dotSize = cellSize * (QRCODE_MATRIX_MARGIN - i * 2);
+        dots.push(
+          <Rect
+            key={`rect_${x1 + cellSize * i}_${y1 + cellSize * i}`}
+            fill={i % 2 === 0 ? dotColor : edgeColor}
+            height={dotSize}
+            rx={dotSize * borderRadius}
+            ry={dotSize * borderRadius}
+            width={dotSize}
+            x={x1 + cellSize * i}
+            y={y1 + cellSize * i}
+          />
+        );
+      }
+    });
+
+    const clearArenaSize = Math.floor((logoSize + 25) / cellSize);
+    const matrixMiddleStart = matrix.length / 2 - clearArenaSize / 2;
+    const matrixMiddleEnd = matrix.length / 2 + clearArenaSize / 2 - 1;
+    const circles: [number, number][] = [];
+
+    // Getting coordinates for each of the QR code dots
+    matrix.forEach((row: QRCode.QRCode[], i: number) => {
+      row.forEach((_, j: number) => {
+        if (matrix[i][j]) {
+          if (
+            !(
+              (i < QRCODE_MATRIX_MARGIN && j < QRCODE_MATRIX_MARGIN) ||
+              (i > matrix.length - (QRCODE_MATRIX_MARGIN + 1) && j < QRCODE_MATRIX_MARGIN) ||
+              (i < QRCODE_MATRIX_MARGIN && j > matrix.length - (QRCODE_MATRIX_MARGIN + 1))
+            )
+          ) {
+            if (
+              !(
+                i > matrixMiddleStart &&
+                i < matrixMiddleEnd &&
+                j > matrixMiddleStart &&
+                j < matrixMiddleEnd
+              )
+            ) {
+              const cx = i * cellSize + cellSize / 2;
+              const cy = j * cellSize + cellSize / 2;
+              circles.push([cx, cy]);
+            }
+          }
+        }
+      });
+    });
+
+    // Cx to multiple cys
+    const circlesToConnect: Record<number, number[]> = {};
+
+    // Mapping all dots cicles on the same x axis
+    circles.forEach(([cx, cy]) => {
+      if (circlesToConnect[cx]) {
+        circlesToConnect[cx]?.push(cy);
+      } else {
+        circlesToConnect[cx] = [cy];
+      }
+    });
+
+    // Drawing lonely dots
+    Object.entries(circlesToConnect)
+      // Only get dots that have neighbors
+      .map(([cx, cys]) => {
+        const newCys = cys.filter(cy =>
+          cys.every(otherCy => !isAdjecentDots(cy, otherCy, cellSize))
+        );
+
+        return [Number(cx), newCys] as CoordinateMapping;
+      })
+      .forEach(([cx, cys]) => {
+        cys.forEach(cy => {
+          dots.push(
+            <Circle
+              key={`circle_${cx}_${cy}`}
+              cx={cx}
+              cy={cy}
+              fill={dotColor}
+              r={cellSize / CIRCLE_SIZE_MODIFIER}
+            />
+          );
+        });
+      });
+
+    // Drawing lines for dots that are close to each other
+    Object.entries(circlesToConnect)
+      // Only get dots that have more than one dot on the x axis
+      .filter(([_, cys]) => cys.length > 1)
+      // Removing dots with no neighbors
+      .map(([cx, cys]) => {
+        const newCys = cys.filter(cy => cys.some(otherCy => isAdjecentDots(cy, otherCy, cellSize)));
+
+        return [Number(cx), newCys] as CoordinateMapping;
+      })
+      // Get the coordinates of the first and last dot of a line
+      .map(([cx, cys]) => {
+        cys.sort((a, b) => (a < b ? -1 : 1));
+        const groups: number[][] = [];
+
+        for (const cy of cys) {
+          const group = groups.find(item =>
+            item.some(otherCy => isAdjecentDots(cy, otherCy, cellSize))
+          );
+          if (group) {
+            group.push(cy);
+          } else {
+            groups.push([cy]);
+          }
+        }
+
+        return [cx, groups.map(item => [item[0], item[item.length - 1]])] as [number, number[][]];
+      })
+      .forEach(([cx, groups]) => {
+        groups.forEach(([y1, y2]) => {
+          dots.push(
+            <Line
+              key={`line_${cx}_${y1}_${y2}`}
+              x1={cx}
+              x2={cx}
+              y1={y1}
+              y2={y2}
+              stroke={dotColor}
+              strokeWidth={cellSize / (CIRCLE_SIZE_MODIFIER / 2)}
+              strokeLinecap="round"
+            />
+          );
+        });
+      });
+
+    return dots;
+  }
+};

package/src/utils/ThemeUtil.ts

@@ -0,0 +1,197 @@
+import type { SpacingType, ThemeKeys } from './TypesUtil';
+
+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
+};
+
+export const IconSize = {
+  xxs: 10,
+  xs: 12,
+  sm: 14,
+  md: 16,
+  lg: 20
+};
+
+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/TypesUtil.ts

@@ -0,0 +1,240 @@
+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-200'
+  | 'fg-250'
+  | 'fg-275'
+  | 'fg-300'
+  | 'gray-glass-020'
+  | 'inverse-000'
+  | 'inverse-100'
+  | 'success-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'
+  | 'arrowLeft'
+  | 'arrowRight'
+  | 'arrowTop'
+  | 'browser'
+  | 'checkmark'
+  | 'chevronBottom'
+  | 'chevronLeft'
+  | 'chevronRight'
+  | 'chevronRightSmall'
+  | 'chevronTop'
+  | 'clock'
+  | 'close'
+  | 'coinPlaceholder'
+  | 'compass'
+  | 'copy'
+  | 'copySmall'
+  | 'cursor'
+  | 'desktop'
+  | 'disconnect'
+  | 'discord'
+  | 'etherscan'
+  | 'extension'
+  | 'externalLink'
+  | 'facebook'
+  | 'filters'
+  | 'github'
+  | 'google'
+  | 'helpCircle'
+  | 'infoCircle'
+  | 'mail'
+  | 'mobile'
+  | 'networkPlaceholder'
+  | 'nftPlaceholder'
+  | 'off'
+  | 'qrCode'
+  | 'refresh'
+  | 'search'
+  | 'swapHorizontal'
+  | 'swapVertical'
+  | 'telegram'
+  | 'twitch'
+  | 'twitter'
+  | 'twitterIcon'
+  | 'verify'
+  | 'wallet'
+  | 'walletSmall'
+  | 'walletConnect'
+  | 'walletPlaceholder'
+  | 'warningCircle';
+
+export type VisualType =
+  | 'browser'
+  | 'dao'
+  | 'defi'
+  | 'defiAlt'
+  | 'eth'
+  | 'layers'
+  | 'lock'
+  | 'login'
+  | 'network'
+  | 'nft'
+  | 'noun'
+  | 'profile'
+  | 'system';
+
+export type LogoType =
+  | 'apple'
+  | 'discord'
+  | 'facebook'
+  | 'github'
+  | 'google'
+  | 'telegram'
+  | 'twitch'
+  | 'twitter';
+
+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;
+};

package/src/utils/UiUtil.ts

@@ -0,0 +1,72 @@
+/* eslint-disable no-bitwise */
+
+import { Spacing } from './ThemeUtil';
+import type { SpacingType, TruncateOptions } from './TypesUtil';
+
+export const UiUtil = {
+  getSpacingStyles(spacing: SpacingType | SpacingType[], index: number) {
+    if (Array.isArray(spacing)) {
+      return spacing[index] ? Spacing[spacing[index] as SpacingType] : undefined;
+    } else if (typeof spacing === 'string') {
+      return Spacing[spacing];
+    }
+
+    return undefined;
+  },
+
+  generateAvatarColors(address?: string) {
+    if (!address) return ['#f5ccfc', '#dba4f5', '#9a8ee8', '#6493da', '#6ebdea'];
+
+    const hash = address.toLowerCase().replace(/^0x/iu, '');
+    const baseColor = hash.substring(0, 6);
+    const rgbColor = this.hexToRgb(baseColor);
+
+    const colors: string[] = [];
+
+    for (let i = 0; i < 5; i += 1) {
+      const tintedColor = this.tintColor(rgbColor, 0.15 * i);
+      colors.push(`rgb(${tintedColor[0]}, ${tintedColor[1]}, ${tintedColor[2]})`);
+    }
+
+    return colors;
+  },
+
+  hexToRgb(hex: string): [number, number, number] {
+    const bigint = parseInt(hex, 16);
+
+    const r = (bigint >> 16) & 255;
+    const g = (bigint >> 8) & 255;
+    const b = bigint & 255;
+
+    return [r, g, b];
+  },
+
+  tintColor(rgb: [number, number, number], tint: number): [number, number, number] {
+    const [r, g, b] = rgb;
+    const tintedR = Math.round(r + (255 - r) * tint);
+    const tintedG = Math.round(g + (255 - g) * tint);
+    const tintedB = Math.round(b + (255 - b) * tint);
+
+    return [tintedR, tintedG, tintedB];
+  },
+
+  getTruncateString({ string, charsStart, charsEnd, truncate }: TruncateOptions) {
+    if (string.length <= charsStart + charsEnd) {
+      return string;
+    }
+
+    if (truncate === 'end') {
+      return `${string.substring(0, charsStart)}...`;
+    } else if (truncate === 'start') {
+      return `...${string.substring(string.length - charsEnd)}`;
+    }
+
+    return `${string.substring(0, Math.floor(charsStart))}...${string.substring(
+      string.length - Math.floor(charsEnd)
+    )}`;
+  },
+
+  getWalletName(name: string, short = true) {
+    return short ? name.split(' ')[0] : name;
+  }
+};