@rango-dev/widget-embedded 0.14.1-next.0 → 0.14.1-next.10

package/src/utils/colors.ts

@@ -0,0 +1,93 @@
+import type { WidgetColors, WidgetColorsKeys } from '../types';
+
+export const colorShade = (col: string, amt: number) => {
+  const RANGE = 255;
+  const COL = 3;
+  const RADIX = 16;
+
+  col = col.replace(/^#/, '');
+  if (col.length === COL) {
+    col = col[0] + col[0] + col[1] + col[1] + col[2] + col[2];
+  }
+  let [r, g, b]: any = col.match(/.{2}/g);
+  [r, g, b] = [
+    parseInt(r, RADIX) + amt,
+    parseInt(g, RADIX) + amt,
+    parseInt(b, RADIX) + amt,
+  ];
+
+  r = Math.max(Math.min(RANGE, r), 0).toString(RADIX);
+  g = Math.max(Math.min(RANGE, g), 0).toString(RADIX);
+  b = Math.max(Math.min(RANGE, b), 0).toString(RADIX);
+
+  const rr = (r.length < 2 ? '0' : '') + r;
+  const gg = (g.length < 2 ? '0' : '') + g;
+  const bb = (b.length < 2 ? '0' : '') + b;
+
+  return `#${rr}${gg}${bb}`;
+};
+
+export const generateRangeColors = (name: string, color: string) => {
+  const NUMBER_OF_COLORS = 10;
+  const HALF_NUMBER_OF_COLORS = 5;
+  const COLOR_SUFFIX = 100;
+  const AMT = 32;
+
+  let colors = { [name]: color };
+  for (let i = 1; i < NUMBER_OF_COLORS; i++) {
+    if (i < HALF_NUMBER_OF_COLORS) {
+      colors = {
+        ...colors,
+        [name + i * COLOR_SUFFIX]: colorShade(
+          color,
+          (HALF_NUMBER_OF_COLORS - i) * AMT
+        ),
+      };
+    }
+    if (i === HALF_NUMBER_OF_COLORS) {
+      colors = {
+        ...colors,
+        [name + i * COLOR_SUFFIX]: color,
+      };
+    }
+    if (i > HALF_NUMBER_OF_COLORS) {
+      colors = {
+        ...colors,
+        [name + i * COLOR_SUFFIX]: colorShade(
+          color,
+          -((i - HALF_NUMBER_OF_COLORS) * AMT)
+        ),
+      };
+    }
+  }
+  return colors;
+};
+export const generateColors = (
+  mainColors: { [x: string]: string },
+  colors?: WidgetColors
+) => {
+  if (!colors || !Object.entries(colors).length) {
+    return {};
+  }
+  let changeColors = false;
+  let listOfColors = { ...mainColors };
+  for (const colorKey in colors) {
+    const color = colors[colorKey as WidgetColorsKeys];
+
+    if (!!color && color !== mainColors[colorKey]) {
+      changeColors = true;
+      if (colorKey === 'background' || colorKey === 'foreground') {
+        listOfColors = {
+          ...listOfColors,
+          [colorKey]: color,
+        };
+      } else {
+        listOfColors = {
+          ...listOfColors,
+          ...generateRangeColors(colorKey, color),
+        };
+      }
+    }
+  }
+  return changeColors ? listOfColors : {};
+};

package/src/utils/common.ts

@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/no-magic-numbers */
 export function removeDuplicateFrom<T>(array: T[]): T[] {
   return Array.from(new Set(array));
 }
@@ -31,53 +30,5 @@ export function containsText(text: string, searchText: string): boolean {
   return text.toLowerCase().indexOf(searchText.toLowerCase()) > -1;
 }
 
-export const colorShade = (col: string, amt: number) => {
-  col = col.replace(/^#/, '');
-  if (col.length === 3) {
-    col = col[0] + col[0] + col[1] + col[1] + col[2] + col[2];
-  }
-  let [r, g, b]: any = col.match(/.{2}/g);
-  [r, g, b] = [
-    parseInt(r, 16) + amt,
-    parseInt(g, 16) + amt,
-    parseInt(b, 16) + amt,
-  ];
-
-  r = Math.max(Math.min(255, r), 0).toString(16);
-  g = Math.max(Math.min(255, g), 0).toString(16);
-  b = Math.max(Math.min(255, b), 0).toString(16);
-
-  const rr = (r.length < 2 ? '0' : '') + r;
-  const gg = (g.length < 2 ? '0' : '') + g;
-  const bb = (b.length < 2 ? '0' : '') + b;
-
-  return `#${rr}${gg}${bb}`;
-};
-
-export const generateRangeColors = (name: string, color: string) => {
-  let colors = { [name]: color };
-  for (let i = 1; i < 10; i++) {
-    if (i < 5) {
-      colors = {
-        ...colors,
-        [name + i * 100]: colorShade(color, (5 - i) * 32),
-      };
-    }
-    if (i === 5) {
-      colors = {
-        ...colors,
-        [name + i * 100]: color,
-      };
-    }
-    if (i > 5) {
-      colors = {
-        ...colors,
-        [name + i * 100]: colorShade(color, -((i - 5) * 32)),
-      };
-    }
-  }
-  return colors;
-};
-
 export const getContainer = () =>
   document.getElementById('swap-box') as HTMLElement;

package/src/utils/configs.ts

@@ -34,3 +34,6 @@ export function initConfig(nextConfigs: Configs) {
 
 export const DEFAULT_PRIMARY_RADIUS = 20;
 export const DEFAULT_SECONDARY_RADIUS = 25;
+export const DEFAULT_FONT_FAMILY = 'Roboto';
+
+export const THEME_CLASS_NAME_PREFIX = `theme-widget`;

package/src/utils/hash.ts

@@ -0,0 +1,27 @@
+/* eslint-disable @typescript-eslint/no-magic-numbers */
+// Original Code: https://github.com/stitchesjs/stitches/blob/canary/packages/core/src/convert/toHash.js
+
+const toAlphabeticChar = (code: number) =>
+  String.fromCharCode(code + (code > 25 ? 39 : 97));
+
+const toAlphabeticName = (code: number) => {
+  let name = '';
+  let x;
+
+  for (x = Math.abs(code); x > 52; x = (x / 52) | 0) {
+    name = toAlphabeticChar(x % 52) + name;
+  }
+
+  return toAlphabeticChar(x % 52) + name;
+};
+
+const toPhash = (h: number, x: string) => {
+  let i = x.length;
+  while (i) {
+    h = (h * 33) ^ x.charCodeAt(--i);
+  }
+  return h;
+};
+
+export const toHash = (value: object) =>
+  toAlphabeticName(toPhash(5381, JSON.stringify(value)) >>> 0);

package/src/utils/meta.ts

@@ -1,4 +1,6 @@
-import type { BlockchainMeta } from 'rango-sdk';
+import type { Asset, BlockchainMeta, Token } from 'rango-sdk';
+
+import { tokensAreEqual } from './wallets';
 
 export function getBlockchainDisplayNameFor(
   blockchainName: string,
@@ -14,3 +16,11 @@ export function getBlockchainShortNameFor(
   return blockchains.find((blockchain) => blockchain.name === blockchainName)
     ?.shortName;
 }
+
+export function findToken(t: Asset, tokens: Token[]) {
+  return tokens.find((token) => tokensAreEqual(token, t)) ?? null;
+}
+
+export function findBlockchain(name: string, blockchains: BlockchainMeta[]) {
+  return blockchains.find((blockchain) => blockchain.name === name) ?? null;
+}

package/src/utils/routing.ts

@@ -13,6 +13,7 @@ import type {
   Token,
 } from 'rango-sdk';
 
+import { getLastSuccessfulStep } from '@rango-dev/queue-manager-rango-preset';
 import BigNumber from 'bignumber.js';
 
 import {
@@ -25,6 +26,7 @@ import {
 } from '../constants/routing';
 
 import { areEqual } from './common';
+import { findBlockchain, findToken } from './meta';
 import { numberToString } from './numbers';
 
 export function searchParamsToToken(
@@ -261,3 +263,59 @@ export function findCommonTokens<T extends Asset[], R extends Asset[]>(
 
   return listB.filter((token) => set.has(tokenToString(token))) as R;
 }
+
+export function createRetryRoute(
+  pendingSwap: PendingSwap,
+  blockchains: BlockchainMeta[],
+  tokens: Token[]
+): {
+  fromBlockchain: BlockchainMeta | null;
+  fromToken: Token | null;
+  toBlockchain: BlockchainMeta | null;
+  toToken: Token | null;
+  inputAmount: string;
+} {
+  const firstStep = pendingSwap.steps[0];
+  const lastStep = pendingSwap.steps[pendingSwap.steps.length - 1];
+  const lastSuccessfulStep = getLastSuccessfulStep(pendingSwap.steps);
+
+  const toToken = {
+    blockchain: lastStep.toBlockchain,
+    symbol: lastStep.toSymbol,
+    address: lastStep.toSymbolAddress,
+  };
+
+  const fromBlockchainMeta = findBlockchain(
+    lastSuccessfulStep
+      ? lastSuccessfulStep.toBlockchain
+      : firstStep.fromBlockchain,
+    blockchains
+  );
+  const toBlockchainMeta = findBlockchain(lastStep.toBlockchain, blockchains);
+  const fromTokenMeta = findToken(
+    lastSuccessfulStep
+      ? {
+          blockchain: fromBlockchainMeta?.name ?? '',
+          symbol: lastSuccessfulStep.toSymbol,
+          address: lastSuccessfulStep.toSymbolAddress,
+        }
+      : {
+          blockchain: fromBlockchainMeta?.name ?? '',
+          symbol: firstStep.fromSymbol,
+          address: firstStep.fromSymbolAddress,
+        },
+    tokens
+  );
+  const toTokenMeta = findToken(toToken, tokens);
+  const inputAmount = lastSuccessfulStep
+    ? lastSuccessfulStep.outputAmount ?? ''
+    : pendingSwap.inputAmount;
+
+  return {
+    fromBlockchain: fromBlockchainMeta,
+    fromToken: fromTokenMeta,
+    toBlockchain: toBlockchainMeta,
+    toToken: toTokenMeta,
+    inputAmount,
+  };
+}

package/src/utils/ui.ts

@@ -0,0 +1,79 @@
+/* eslint-disable @typescript-eslint/no-magic-numbers */
+import type { WidgetTheme } from '../types';
+import type { createTheme } from '@rango-dev/ui';
+
+import {
+  theme as baseThemeTokens,
+  darkColors as defaultDarkColors,
+} from '@rango-dev/ui';
+
+import { generateColors } from '../utils/colors';
+import { toHash } from '../utils/hash';
+
+import { THEME_CLASS_NAME_PREFIX } from './configs';
+
+interface CustomizedThemeValues {
+  id: string;
+  tokens: Parameters<typeof createTheme>[0];
+}
+
+interface CustomizedTheme {
+  light: undefined | CustomizedThemeValues;
+  dark: undefined | CustomizedThemeValues;
+}
+
+export function customizedThemeTokens(
+  colors: WidgetTheme['colors']
+): CustomizedTheme {
+  const baseColors = baseThemeTokens.colors;
+
+  const darkColorsWithDefaults = generateColors(
+    {
+      ...baseColors,
+      ...defaultDarkColors,
+    },
+    colors?.dark
+  );
+  const lightColorsWithDefaults = generateColors(baseColors, colors?.light);
+  const hasDefaultDarkColors = Object.keys(darkColorsWithDefaults).length > 0;
+  const hasDefaultLightColors = Object.keys(lightColorsWithDefaults).length > 0;
+
+  let light: CustomizedTheme['light'] = undefined;
+  let dark: CustomizedTheme['dark'] = undefined;
+
+  if (hasDefaultLightColors) {
+    const tokens = { colors: lightColorsWithDefaults };
+    const id = `${THEME_CLASS_NAME_PREFIX}-light-${toHash(tokens)}`;
+    light = {
+      id,
+      tokens,
+    };
+  }
+  if (hasDefaultDarkColors) {
+    const tokens = {
+      colors: {
+        ...darkColorsWithDefaults,
+        // Reverse the neutrals shade
+        neutral100: darkColorsWithDefaults.neutral900,
+        neutral200: darkColorsWithDefaults.neutral800,
+        neutral300: darkColorsWithDefaults.neutral700,
+        neutral400: darkColorsWithDefaults.neutral600,
+        neutral500: darkColorsWithDefaults.neutral500,
+        neutral600: darkColorsWithDefaults.neutral400,
+        neutral700: darkColorsWithDefaults.neutral300,
+        neutral800: darkColorsWithDefaults.neutral200,
+        neutral900: darkColorsWithDefaults.neutral100,
+      },
+    };
+    const id = `${THEME_CLASS_NAME_PREFIX}-dark-${toHash(tokens)}`;
+    dark = {
+      id,
+      tokens,
+    };
+  }
+
+  return {
+    light,
+    dark,
+  };
+}

package/dist/constants.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../src/constants.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,oBAAoB,yCAAyC,CAAC"}