@rango-dev/widget-embedded 0.25.0 → 0.25.1-next.0

package/CHANGELOG.md

@@ -1,3 +1,22 @@
+# [0.25.0](https://github.com/rango-exchange/rango-client/compare/widget-embedded@0.24.1...widget-embedded@0.25.0) (2024-04-09)
+
+
+### Bug Fixes
+
+* address tooltips position ([5ee60d1](https://github.com/rango-exchange/rango-client/commit/5ee60d1622dab29091d97578d417a2187f2ca6cf))
+* correct showing wallets on mobile screens ([89ead7f](https://github.com/rango-exchange/rango-client/commit/89ead7f68e88352dfd69c2a3d1c6cb0b8cf2e5d5))
+* fix export refresh modal ([0c0ec6c](https://github.com/rango-exchange/rango-client/commit/0c0ec6c7f22116a9b5d5c8d2b6a74ebf421fc015))
+* fix widget event hook ([c8547b6](https://github.com/rango-exchange/rango-client/commit/c8547b6a31354afe13aa32c0b72be5b62b3f0d67))
+
+
+### Features
+
+* attach config object to window for debugging purposes ([70597b7](https://github.com/rango-exchange/rango-client/commit/70597b78e31ef2da1ef2d20ed398e5bdf0b59a63))
+* implement hover state for full-expanded-route ([1c851d7](https://github.com/rango-exchange/rango-client/commit/1c851d7c62b71fe8f4aa6c05edbc0d6cc78d5437))
+* show a modal with page reload when meta hasn't loaded ([0d3842f](https://github.com/rango-exchange/rango-client/commit/0d3842f9c2d7210cfd5a967d1f0e663ef3125421))
+
+
+
 ## [0.24.1](https://github.com/rango-exchange/rango-client/compare/widget-embedded@0.24.0...widget-embedded@0.24.1) (2024-03-12)
 
 

package/dist/store/slices/data.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=data.test.d.ts.map

package/dist/store/slices/data.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"data.test.d.ts","sourceRoot":"","sources":["../../../src/store/slices/data.test.ts"],"names":[],"mappings":""}

package/dist/test-utils/fixtures.d.ts

@@ -0,0 +1,30 @@
+import type { AppStoreState } from '../store/app';
+import type { WidgetConfig } from '../types';
+import type { BlockchainMeta, EvmBlockchainMeta, Token } from 'rango-sdk';
+export declare function createToken(options?: {
+    blockchains?: string[];
+}): {
+    address: string | null;
+    blockchain: string;
+    coinSource: string | null;
+    coinSourceUrl: string | null;
+    decimals: number;
+    usdPrice: number | null;
+    isPopular: boolean;
+    image: string;
+    symbol: string;
+    name: string | null;
+    supportedSwappers: string[] | undefined;
+    isSecondaryCoin: boolean;
+};
+export declare function createTokens(count: number, options?: {
+    blockchains?: string[];
+}): Token[];
+export declare function createEvmBlockchain(): EvmBlockchainMeta;
+export declare function createEvmBlockchains(count: number): EvmBlockchainMeta[];
+export declare function createInitialAppStore(): {
+    _tokens: Token[];
+    _blockchainsMapByName: Map<string, BlockchainMeta>;
+};
+export declare function updateAppStoreConfig(appStoreState: AppStoreState, config: Partial<WidgetConfig>): AppStoreState;
+//# sourceMappingURL=fixtures.d.ts.map

package/dist/test-utils/fixtures.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"fixtures.d.ts","sourceRoot":"","sources":["../../src/test-utils/fixtures.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAClD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAC7C,OAAO,KAAK,EAAE,cAAc,EAAE,iBAAiB,EAAE,KAAK,EAAE,MAAM,WAAW,CAAC;AA6I1E,wBAAgB,WAAW,CAAC,OAAO,CAAC,EAAE;IAAE,WAAW,CAAC,EAAE,MAAM,EAAE,CAAA;CAAE;;;;;;;;;;;;;EAmB/D;AACD,wBAAgB,YAAY,CAC1B,KAAK,EAAE,MAAM,EACb,OAAO,CAAC,EAAE;IACR,WAAW,CAAC,EAAE,MAAM,EAAE,CAAC;CACxB,GACA,KAAK,EAAE,CAIT;AAED,wBAAgB,mBAAmB,IAAI,iBAAiB,CA2CvD;AAED,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,MAAM,GAAG,iBAAiB,EAAE,CAIvE;AAED,wBAAgB,qBAAqB;;;EAYpC;AAED,wBAAgB,oBAAoB,CAClC,aAAa,EAAE,aAAa,EAC5B,MAAM,EAAE,OAAO,CAAC,YAAY,CAAC,GAC5B,aAAa,CAOf"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rango-dev/widget-embedded",
-  "version": "0.25.0",
+  "version": "0.25.1-next.0",
   "license": "MIT",
   "type": "module",
   "source": "./src/index.ts",
@@ -16,7 +16,10 @@
     "ts-check": "tsc --declaration --emitDeclarationOnly -p ./tsconfig.json",
     "clean": "rimraf dist",
     "format": "prettier --write '{.,src}/**/*.{ts,tsx}'",
-    "lint": "eslint \"**/*.{ts,tsx}\" --ignore-path ../../.eslintignore"
+    "lint": "eslint \"**/*.{ts,tsx}\" --ignore-path ../../.eslintignore",
+    "test": "vitest",
+    "test:watch": "vitest --watch",
+    "test:coverage": "vitest run --coverage"
   },
   "dependencies": {
     "@lingui/core": "4.2.1",
@@ -49,4 +52,4 @@
   "publishConfig": {
     "access": "public"
   }
-}
+}

package/src/store/slices/data.test.ts

@@ -0,0 +1,349 @@
+import type { AppStoreState } from '../app';
+import type { EvmBlockchainMeta, Token } from 'rango-sdk';
+
+import { assert, beforeEach, describe, expect, test } from 'vitest';
+
+import {
+  createEvmBlockchain,
+  createInitialAppStore,
+  createToken,
+  updateAppStoreConfig,
+} from '../../test-utils/fixtures';
+import { createAppStore } from '../app';
+
+let appStoreState: AppStoreState;
+let customTokens: [Token, Token, Token];
+let rangoBlockchain: EvmBlockchainMeta;
+
+beforeEach(() => {
+  rangoBlockchain = createEvmBlockchain();
+
+  customTokens = [
+    {
+      ...createToken(),
+      symbol: 'RNG',
+      name: 'Rango',
+      blockchain: rangoBlockchain.name,
+      address: '0x0000000000000000068701000000000000000000',
+      isSecondaryCoin: false,
+      isPopular: false,
+    },
+    {
+      ...createToken(),
+      symbol: 'DJG',
+      name: 'Django',
+      blockchain: rangoBlockchain.name,
+      isSecondaryCoin: false,
+      isPopular: false,
+    },
+    {
+      ...createToken(),
+      symbol: 'RABO',
+      name: 'Rainbow',
+      blockchain: rangoBlockchain.name,
+      isSecondaryCoin: false,
+      isPopular: false,
+    },
+  ];
+
+  const initData = createInitialAppStore();
+  initData._blockchainsMapByName.set(rangoBlockchain.name, rangoBlockchain);
+  customTokens.forEach((token) => initData._tokens.push(token));
+
+  const appStore = createAppStore();
+  appStore.setState(initData);
+  appStoreState = appStore.getState();
+});
+
+describe('check sorting tokens is working correctly in app store', () => {
+  test('put pinned tokens first', () => {
+    const rangoToken = customTokens[0];
+
+    appStoreState = updateAppStoreConfig(appStoreState, {
+      from: {
+        pinnedTokens: [
+          {
+            symbol: rangoToken.symbol,
+            address: rangoToken.address,
+            blockchain: rangoToken.blockchain,
+          },
+        ],
+      },
+    });
+
+    const tokens = appStoreState.tokens({
+      type: 'source',
+    });
+
+    const firstResult = tokens[0].symbol;
+    expect(firstResult).toBe(rangoToken.symbol);
+  });
+
+  test('put tokens with balances first', () => {
+    const rangoToken = customTokens[0];
+
+    const tokens = appStoreState.tokens({
+      type: 'source',
+      getBalanceFor: (token: Token) => {
+        if (token.symbol === rangoToken.symbol) {
+          return {
+            amount: '100',
+            decimals: 12,
+            usdValue: '5000',
+          };
+        }
+        return null;
+      },
+    });
+
+    const firstResult = tokens[0].symbol;
+    expect(firstResult).toBe(rangoToken.symbol);
+  });
+
+  test('put native tokens first', () => {
+    const rangoToken = customTokens[0];
+    appStoreState._blockchainsMapByName.set(rangoToken.blockchain, {
+      ...rangoBlockchain,
+      feeAssets: [
+        {
+          address: rangoToken.address,
+          blockchain: rangoToken.blockchain,
+          symbol: rangoToken.symbol,
+        },
+      ],
+    });
+
+    const tokens = appStoreState.tokens({
+      type: 'source',
+    });
+
+    const firstResult = tokens[0].symbol;
+    expect(firstResult).toBe(rangoToken.symbol);
+  });
+
+  test('put popular tokens first', () => {
+    const tokens = appStoreState.tokens({
+      type: 'source',
+    });
+    const popularTokensCount = tokens.reduce((previousValue, current) => {
+      if (current.isPopular) {
+        return previousValue + 1;
+      }
+      return previousValue;
+    }, 0);
+
+    /*
+     * Getting an slice of tokens which is equals to how many popular tokens exist
+     * then we can check all of them should be on top of the list
+     */
+    const result = tokens.slice(0, popularTokensCount);
+    assert(result.every((token) => token.isPopular === true));
+  });
+
+  test('put secondary tokens at the end of list', () => {
+    const tokens = appStoreState.tokens({
+      type: 'source',
+    });
+    expect(tokens[tokens.length - 1]?.isSecondaryCoin).toBe(true);
+  });
+
+  test('put popular token with lowest blockchain sort at first', () => {
+    const rangoToken = customTokens[0];
+    const rangoIndex = appStoreState._tokens.findIndex(
+      (tokenItem) => tokenItem.symbol === rangoToken.symbol
+    );
+    appStoreState._tokens[rangoIndex].isPopular = true;
+    appStoreState._blockchainsMapByName.set(rangoToken.blockchain, {
+      ...rangoBlockchain,
+      sort: 0,
+    });
+
+    const tokens = appStoreState.tokens({
+      type: 'source',
+    });
+
+    const firstResult = tokens[0].symbol;
+    expect(firstResult).toBe(rangoToken.symbol);
+  });
+
+  test('put pinned token first and tokens with balances second', () => {
+    const rangoToken = customTokens[0];
+    const djangoToken = customTokens[1];
+
+    appStoreState = updateAppStoreConfig(appStoreState, {
+      from: {
+        pinnedTokens: [
+          {
+            symbol: rangoToken.symbol,
+            address: rangoToken.address,
+            blockchain: rangoToken.blockchain,
+          },
+        ],
+      },
+    });
+
+    const tokens = appStoreState.tokens({
+      type: 'source',
+      getBalanceFor: (token: Token) => {
+        if (token.symbol === djangoToken.symbol) {
+          return {
+            amount: '100',
+            decimals: 12,
+            usdValue: '5000',
+          };
+        }
+        return null;
+      },
+    });
+
+    const firstResult = tokens[0].symbol;
+    const secondResult = tokens[1].symbol;
+    expect(firstResult).toBe(rangoToken.symbol);
+    expect(secondResult).toBe(djangoToken.symbol);
+  });
+
+  test('put pinned token first and tokens with balances second and popular tokens followed', () => {
+    const rangoToken = customTokens[0];
+    const djangoToken = customTokens[1];
+
+    appStoreState = updateAppStoreConfig(appStoreState, {
+      from: {
+        pinnedTokens: [
+          {
+            symbol: rangoToken.symbol,
+            address: rangoToken.address,
+            blockchain: rangoToken.blockchain,
+          },
+        ],
+      },
+    });
+
+    const tokens = appStoreState.tokens({
+      type: 'source',
+      getBalanceFor: (token: Token) => {
+        if (token.symbol === djangoToken.symbol) {
+          return {
+            amount: '100',
+            decimals: 12,
+            usdValue: '5000',
+          };
+        }
+        return null;
+      },
+    });
+
+    const firstResult = tokens[0].symbol;
+    const secondResult = tokens[1].symbol;
+
+    const popularTokensCount = tokens.reduce((previousValue, current) => {
+      if (current.isPopular) {
+        return previousValue + 1;
+      }
+      return previousValue;
+    }, 0);
+    const popularResult = tokens.slice(2, popularTokensCount);
+
+    expect(firstResult).toBe(rangoToken.symbol);
+    expect(secondResult).toBe(djangoToken.symbol);
+    assert(popularResult.every((token) => token.isPopular === true));
+  });
+});
+
+describe('search in tokens', () => {
+  test('should be first result when the symbol is exactly equal to the search term', () => {
+    const tokens = appStoreState.tokens({
+      type: 'source',
+      searchFor: 'rng',
+    });
+    const firstResult = tokens[0]?.symbol;
+    expect(firstResult).toBe('RNG');
+  });
+
+  test('should be first result when the token name is exactly equal to the search term', () => {
+    const tokens = appStoreState.tokens({
+      type: 'source',
+      searchFor: 'Rango',
+    });
+
+    const firstResult = tokens[0]?.symbol;
+    expect(firstResult).toBe('RNG');
+  });
+
+  test('should be first result when symbol characters starts with search term ', () => {
+    const tokens = appStoreState.tokens({
+      type: 'source',
+      searchFor: 'dj',
+    });
+
+    const firstResult = tokens[0]?.symbol;
+    expect(firstResult).toBe('DJG');
+  });
+
+  test('should be first result when symbol characters contains search term', () => {
+    const tokens = appStoreState.tokens({
+      type: 'source',
+      searchFor: 'abo',
+    });
+
+    const firstResult = tokens[0]?.symbol;
+    expect(firstResult).toBe('RABO');
+  });
+
+  test('should be first result when token name characters starts with search term', () => {
+    const tokens = appStoreState.tokens({
+      type: 'source',
+      searchFor: 'rang',
+    });
+
+    const firstResult = tokens[0]?.symbol;
+    expect(firstResult).toBe('RNG');
+  });
+
+  test('should be first result when token name characters contains search term', () => {
+    const tokens = appStoreState.tokens({
+      type: 'source',
+      searchFor: 'ngo',
+    });
+
+    // If there is more than one result, priority is given to the string that is shorter
+    const firstResult = tokens[0]?.symbol;
+    expect(firstResult).toBe('RNG');
+  });
+
+  test('should be first result when address contains searched term', () => {
+    const tokens = appStoreState.tokens({
+      type: 'source',
+      searchFor: '68701',
+    });
+
+    const firstResult = tokens[0]?.symbol;
+    expect(firstResult).toBe('RNG');
+  });
+
+  test('put pinned token first and popular tokens followed when token name or symbol contains search term', () => {
+    const djangoToken = customTokens[1];
+
+    appStoreState = updateAppStoreConfig(appStoreState, {
+      from: {
+        pinnedTokens: [
+          {
+            symbol: djangoToken.symbol,
+            address: djangoToken.address,
+            blockchain: djangoToken.blockchain,
+          },
+        ],
+      },
+    });
+
+    const tokens = appStoreState.tokens({
+      type: 'source',
+      searchFor: 'ngo',
+    });
+
+    const firstResult = tokens[0]?.symbol;
+    const secondResult = tokens[1]?.symbol;
+
+    expect(firstResult).toBe(djangoToken.symbol);
+    expect(secondResult).toBe('RNG');
+  });
+});

package/src/test-utils/fixtures.ts

@@ -0,0 +1,250 @@
+import type { AppStoreState } from '../store/app';
+import type { WidgetConfig } from '../types';
+import type { BlockchainMeta, EvmBlockchainMeta, Token } from 'rango-sdk';
+
+import { faker } from '@faker-js/faker';
+import { TransactionType } from 'rango-sdk';
+
+const TOKENS_COUNT = 20;
+const BLOCKCHAINS_COUNT = 20;
+
+const listBlockchains = [
+  'ETH',
+  'BSC',
+  'ARBITRUM',
+  'POLYGON',
+  'ZKSYNC',
+  'STARKNET',
+  'OPTIMISM',
+  'AVAX_CCHAIN',
+  'POLYGONZK',
+  'BASE',
+  'LINEA',
+  'TRON',
+  'BTC',
+  'SCROLL',
+  'COSMOS',
+  'OSMOSIS',
+  'METIS',
+  'NEUTRON',
+  'NOBLE',
+  'DYDX',
+  'SOLANA',
+  'CRONOS',
+  'BNB',
+  'FANTOM',
+  'AURORA',
+  'MAYA',
+  'THOR',
+  'BOBA',
+  'MOONBEAM',
+  'MOONRIVER',
+  'OKC',
+  'BOBA_BNB',
+  'BOBA_AVALANCHE',
+  'LTC',
+  'BCH',
+  'HARMONY',
+  'EVMOS',
+  'HECO',
+  'SIF',
+  'BRISE',
+  'STARGAZE',
+  'FUSE',
+  'CRYPTO_ORG',
+  'CHIHUAHUA',
+  'BANDCHAIN',
+  'COMDEX',
+  'REGEN',
+  'IRIS',
+  'EMONEY',
+  'GNOSIS',
+  'JUNO',
+  'AXELAR',
+  'STRIDE',
+  'KCC',
+  'MARS',
+  'TERRA',
+  'TELOS',
+  'BITSONG',
+  'AKASH',
+  'KI',
+  'PERSISTENCE',
+  'MEDIBLOC',
+  'KUJIRA',
+  'SENTINEL',
+  'INJECTIVE',
+  'SECRET',
+  'KONSTELLATION',
+  'STARNAME',
+  'BITCANNA',
+  'UMEE',
+  'DESMOS',
+  'LUMNETWORK',
+  'TERRA_CLASSIC',
+  'DASH',
+  'DOGE',
+];
+
+const listTokens = [
+  'BTC',
+  'ETH',
+  'USDT',
+  'BNB',
+  'AVAX',
+  'DOT',
+  'LINK',
+  'MATIC',
+  'TRX',
+  'BCH',
+  'NEAR',
+  'LTC',
+  'ICP',
+  'FIL',
+  'ETC',
+  'DAI',
+  'ATOM',
+  'IMX',
+  'OP',
+  'HBAR',
+  'INJ',
+  'XLM',
+  'CRO',
+  'RNDR',
+  'GRT',
+  'OKB',
+  'VET',
+  'MNT',
+  'KAS',
+  'THETA',
+  'LDO',
+  'FDUSD',
+  'XRP',
+  'RUNE',
+  'UNI',
+  'USDC',
+  'LEO',
+  'ADA',
+  'TON',
+  'STX',
+  'APT',
+  'SOL',
+  'TIA',
+  'FLOKI',
+  'DOGE',
+  'ARB',
+  'PEPE',
+  'SHIB',
+  'TON',
+];
+
+const FAKER_SEED = 9595;
+faker.seed(FAKER_SEED);
+
+export function createToken(options?: { blockchains?: string[] }) {
+  const fromBlockchains = options?.blockchains ?? listBlockchains;
+
+  return {
+    address: faker.datatype.boolean() ? faker.finance.ethereumAddress() : null,
+    blockchain: faker.helpers.arrayElement(fromBlockchains),
+    coinSource: faker.datatype.boolean() ? faker.word.noun() : null,
+    coinSourceUrl: faker.datatype.boolean() ? faker.internet.url() : null,
+    decimals: faker.number.int(),
+    usdPrice: faker.datatype.boolean() ? faker.number.float() : null,
+    isPopular: faker.datatype.boolean(),
+    image: faker.internet.url(),
+    symbol: faker.helpers.arrayElement(listTokens),
+    name: faker.datatype.boolean() ? faker.hacker.verb() : null,
+    supportedSwappers: faker.datatype.boolean()
+      ? faker.helpers.multiple(faker.string.sample)
+      : undefined,
+    isSecondaryCoin: faker.datatype.boolean(),
+  };
+}
+export function createTokens(
+  count: number,
+  options?: {
+    blockchains?: string[];
+  }
+): Token[] {
+  return Array(count)
+    .fill(null)
+    .map(() => createToken({ blockchains: options?.blockchains }));
+}
+
+export function createEvmBlockchain(): EvmBlockchainMeta {
+  const name = faker.helpers.arrayElement(listBlockchains);
+  return {
+    name: name,
+    shortName: faker.string.alpha({
+      length: 3,
+    }),
+    displayName: faker.string.alpha(),
+    defaultDecimals: faker.number.int(),
+    addressPatterns: faker.helpers.multiple(faker.string.sample),
+    logo: faker.internet.url(),
+    color: faker.helpers.fake('#{{number.hex()}}'),
+    sort: faker.number.int({ min: 1, max: BLOCKCHAINS_COUNT }),
+    enabled: faker.datatype.boolean(),
+    feeAssets: [
+      {
+        blockchain: faker.helpers.arrayElement(
+          listBlockchains.filter((item) => item !== name)
+        ),
+        symbol: faker.helpers.arrayElement(listTokens),
+        address: faker.datatype.boolean()
+          ? faker.finance.ethereumAddress()
+          : null,
+      },
+    ],
+    type: TransactionType.EVM,
+    chainId: faker.string.hexadecimal({
+      length: 2,
+    }),
+    info: {
+      infoType: 'EvmMetaInfo',
+      chainName: faker.hacker.adjective(),
+      nativeCurrency: {
+        name: faker.hacker.noun(),
+        symbol: faker.helpers.arrayElement(listTokens),
+        decimals: faker.number.int(),
+      },
+      rpcUrls: faker.helpers.multiple(faker.internet.url),
+      blockExplorerUrls: faker.helpers.multiple(faker.internet.url),
+      addressUrl: faker.internet.url(),
+      transactionUrl: faker.internet.url(),
+    },
+  };
+}
+
+export function createEvmBlockchains(count: number): EvmBlockchainMeta[] {
+  return Array(count)
+    .fill(null)
+    .map(() => createEvmBlockchain());
+}
+
+export function createInitialAppStore() {
+  const blockchains = createEvmBlockchains(BLOCKCHAINS_COUNT);
+  const tokens = createTokens(TOKENS_COUNT, {
+    blockchains: blockchains.map((b) => b.name),
+  });
+
+  return {
+    _tokens: tokens,
+    _blockchainsMapByName: new Map<string, BlockchainMeta>(
+      blockchains.map((meta) => [meta.name, meta])
+    ),
+  };
+}
+
+export function updateAppStoreConfig(
+  appStoreState: AppStoreState,
+  config: Partial<WidgetConfig>
+): AppStoreState {
+  appStoreState.config = {
+    ...appStoreState.config,
+    ...config,
+  };
+
+  return appStoreState;
+}