@rango-dev/widget-embedded 0.21.1-next.1 → 0.21.1-next.11

package/src/store/ui.ts

@@ -1,3 +1,4 @@
+import type { Watermark } from '../hooks/useFetchApiConfig';
 import type { TabManagerInterface } from '../libs/tabManager';
 
 import { create } from 'zustand';
@@ -10,11 +11,13 @@ interface UiState {
   isActiveTab: boolean;
   tabManagerInitiated: boolean;
   showActivateTabModal: boolean;
+  watermark: Watermark;
   activateCurrentTab: (
     setCurrentTabAsActive: () => void,
     hasRunningSwaps: boolean
   ) => void;
   setShowActivateTabModal: (flag: boolean) => void;
+  setWatermark: (watermark: Watermark) => void;
 }
 
 export const useUiStore = createSelectors(
@@ -22,6 +25,8 @@ export const useUiStore = createSelectors(
     isActiveTab: false,
     tabManagerInitiated: false,
     showActivateTabModal: false,
+    watermark: 'NONE',
+    fetchingApiConfig: false,
     activateCurrentTab: (setCurrentTabAsActive, hasRunningSwaps) => {
       const { showActivateTabModal } = get();
 
@@ -34,6 +39,9 @@ export const useUiStore = createSelectors(
     setShowActivateTabModal: (flag) => {
       set({ showActivateTabModal: flag });
     },
+    setWatermark: (watermark) => {
+      set({ watermark });
+    },
   }))
 );
 

package/src/types/config.ts

@@ -184,6 +184,7 @@ export type Features = Partial<
 export type WidgetConfig = {
   apiKey: string;
   apiUrl?: string;
+  title?: string;
   walletConnectProjectId?: string;
   affiliate?: WidgetAffiliate;
   amount?: number;

package/src/types/notification.ts

@@ -8,13 +8,13 @@ import {
 type NotificationRoute = {
   from: {
     blockchain: Step['fromBlockchain'];
-    tokenSymbol: Step['fromSymbol'];
-    tokenAddress: Step['fromSymbolAddress'];
+    symbol: Step['fromSymbol'];
+    address: Step['fromSymbolAddress'];
   };
   to: {
     blockchain: Step['toBlockchain'];
-    tokenSymbol: Step['toSymbol'];
-    tokenAddress: Step['toSymbolAddress'];
+    symbol: Step['toSymbol'];
+    address: Step['toSymbolAddress'];
   };
 };
 

package/src/utils/common.ts

@@ -1,4 +1,4 @@
-import { RANGO_SWAP_BOX_ID } from '../constants';
+import { WIDGET_UI_ID } from '../constants';
 
 export function removeDuplicateFrom<T>(array: T[]): T[] {
   return Array.from(new Set(array));
@@ -33,4 +33,4 @@ export function containsText(text: string, searchText: string): boolean {
 }
 
 export const getContainer = () =>
-  document.getElementById(RANGO_SWAP_BOX_ID) as HTMLElement;
+  document.getElementById(WIDGET_UI_ID.SWAP_BOX_ID) as HTMLElement;

package/src/utils/configs.ts

@@ -3,7 +3,7 @@ import type { Asset, BlockchainMeta, Token } from 'rango-sdk';
 
 import { RANGO_PUBLIC_API_KEY } from '../constants';
 
-import { tokensAreEqual } from './wallets';
+import { areTokensEqual } from './wallets';
 
 export interface Configs {
   API_KEY: string;
@@ -57,10 +57,10 @@ export const isTokenExcludedInConfig = (
   let result = false;
   if (tokensConfig && token) {
     if (Array.isArray(tokensConfig)) {
-      result = !tokensConfig.some((asset) => tokensAreEqual(asset, token));
+      result = !tokensConfig.some((asset) => areTokensEqual(asset, token));
     } else if (!Array.isArray(tokensConfig) && tokensConfig[token.blockchain]) {
       result = tokensConfig[token.blockchain].tokens.some((asset) =>
-        tokensAreEqual(asset, token)
+        areTokensEqual(asset, token)
       );
       const isExcluded = tokensConfig[token.blockchain].isExcluded;
       return (!isExcluded && !result) || (isExcluded && result);

package/src/utils/date.ts

@@ -1,4 +1,4 @@
-import type { GroupBy } from '../components/SwapsGroup/SwapsGroup.types';
+import type { GroupBy } from '../components/HistoryGroupedList/HistoryGroupedList.types';
 import type { PendingSwap } from 'rango-types';
 
 import { i18n } from '@lingui/core';
@@ -70,5 +70,12 @@ export const groupSwapsByDate: GroupBy = (swaps) => {
     }
   });
 
-  return Array.from(output.values());
+  const groupedSwaps = Array.from(output.values()).filter(
+    (item) => item.swaps.length > 0
+  );
+  const items = groupedSwaps.flatMap((group) => group.swaps);
+  const groupCounts = groupedSwaps.map((group) => group.swaps.length);
+  const groups = groupedSwaps.map((group) => group.title);
+
+  return { swaps: items, groupCounts, groups };
 };

package/src/utils/meta.ts

@@ -1,6 +1,6 @@
 import type { Asset, BlockchainMeta, SwapperMeta, Token } from 'rango-sdk';
 
-import { tokensAreEqual } from './wallets';
+import { areTokensEqual } from './wallets';
 
 export function getBlockchainDisplayNameFor(
   blockchainName: string,
@@ -25,7 +25,7 @@ export function getSwapperDisplayName(
 }
 
 export function findToken(t: Asset, tokens: Token[]) {
-  return tokens.find((token) => tokensAreEqual(token, t)) ?? null;
+  return tokens.find((token) => areTokensEqual(token, t)) ?? null;
 }
 
 export function findBlockchain(name: string, blockchains: BlockchainMeta[]) {

package/src/utils/wallets.ts

@@ -443,7 +443,7 @@ export function sortTokens(
   return tokens;
 }
 
-export function tokensAreEqual(
+export function areTokensEqual(
   tokenA: Pick<Token, 'blockchain' | 'symbol' | 'address'> | null,
   tokenB: Pick<Token, 'blockchain' | 'symbol' | 'address'> | null
 ) {
@@ -551,7 +551,3 @@ export const isFetchingBalance = (
   !!connectedWallets.find(
     (wallet) => wallet.chain === blockchain && wallet.loading
   );
-
-export function hashWalletsState(walletsInfo: ModalWalletInfo[]) {
-  return walletsInfo.map((w) => w.state).join('-');
-}

package/dist/components/SwapsGroup/SwapsGroup.d.ts

@@ -1,4 +0,0 @@
-import type { PropTypes } from './SwapsGroup.types';
-import React from 'react';
-export declare function SwapsGroup(props: PropTypes): React.JSX.Element;
-//# sourceMappingURL=SwapsGroup.d.ts.map

package/dist/components/SwapsGroup/SwapsGroup.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"SwapsGroup.d.ts","sourceRoot":"","sources":["../../../src/components/SwapsGroup/SwapsGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAIpD,OAAO,KAAK,MAAM,OAAO,CAAC;AAW1B,wBAAgB,UAAU,CAAC,KAAK,EAAE,SAAS,qBA6H1C"}

package/dist/components/SwapsGroup/SwapsGroup.styles.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"SwapsGroup.styles.d.ts","sourceRoot":"","sources":["../../../src/components/SwapsGroup/SwapsGroup.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+DAAQ,CAAC;AAEjC,eAAO,MAAM,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+DAWhB,CAAC;AAEH,eAAO,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+DAIf,CAAC;AAEH,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+DAInB,CAAC;AAEH,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+DAK5B,CAAC"}

package/dist/components/SwapsGroup/SwapsGroup.types.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"SwapsGroup.types.d.ts","sourceRoot":"","sources":["../../../src/components/SwapsGroup/SwapsGroup.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAE/C,MAAM,MAAM,OAAO,GAAG,CAAC,IAAI,EAAE,WAAW,EAAE,KAAK;IAC7C,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,WAAW,EAAE,CAAC;CACtB,EAAE,CAAC;AAEJ,MAAM,WAAW,SAAS;IACxB,IAAI,EAAE,WAAW,EAAE,CAAC;IACpB,WAAW,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,EAAE,OAAO,CAAC;CACpB"}

package/dist/components/SwapsGroup/index.d.ts

@@ -1,2 +0,0 @@
-export { SwapsGroup } from './SwapsGroup';
-//# sourceMappingURL=index.d.ts.map

package/dist/components/SwapsGroup/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/SwapsGroup/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC"}

package/src/components/SwapsGroup/SwapsGroup.tsx

@@ -1,141 +0,0 @@
-import type { PropTypes } from './SwapsGroup.types';
-
-import { i18n } from '@lingui/core';
-import { Divider, SwapListItem, Typography } from '@rango-dev/ui';
-import React from 'react';
-
-import {
-  TOKEN_AMOUNT_MAX_DECIMALS,
-  TOKEN_AMOUNT_MIN_DECIMALS,
-} from '../../constants/routing';
-import { getContainer } from '../../utils/common';
-import { formatTooltipNumbers, numberToString } from '../../utils/numbers';
-
-import { Group, groupStyles, SwapList, Time } from './SwapsGroup.styles';
-
-export function SwapsGroup(props: PropTypes) {
-  const { list, onSwapClick, groupBy, isLoading } = props;
-  const groups = groupBy ? groupBy(list) : [{ title: 'History', swaps: list }];
-
-  if (isLoading) {
-    const swaps = [{}, {}];
-
-    const loadingGroups = [
-      {
-        title: i18n.t('Today'),
-        swaps,
-      },
-      {
-        title: i18n.t('This month'),
-        swaps,
-      },
-    ];
-    return (
-      <>
-        {loadingGroups.map((group) => (
-          <React.Fragment key={group.title}>
-            <Group>
-              <Time>
-                <Typography
-                  variant="label"
-                  size="medium"
-                  className={groupStyles()}>
-                  {group.title}
-                </Typography>
-              </Time>
-              <Divider size={4} />
-              <SwapList>
-                {group.swaps.map((_, index) => {
-                  const key = index + group.title;
-                  return (
-                    <React.Fragment key={key}>
-                      <SwapListItem isLoading={true} />
-                    </React.Fragment>
-                  );
-                })}
-              </SwapList>
-            </Group>
-          </React.Fragment>
-        ))}
-      </>
-    );
-  }
-
-  return (
-    <>
-      {groups
-        .filter((group) => group.swaps.length > 0)
-        .map((group) => (
-          <React.Fragment key={group.title}>
-            <Group>
-              <Time>
-                <Typography
-                  variant="label"
-                  size="medium"
-                  className={groupStyles()}>
-                  {group.title}
-                </Typography>
-              </Time>
-              <Divider size={4} />
-              <SwapList>
-                {group.swaps.map((swap) => {
-                  const firstStep = swap.steps[0];
-
-                  const lastStep = swap.steps[swap.steps.length - 1];
-                  return (
-                    <React.Fragment key={swap.requestId}>
-                      <SwapListItem
-                        requestId={swap.requestId}
-                        creationTime={swap.creationTime}
-                        status={swap.status}
-                        onClick={onSwapClick}
-                        tooltipContainer={getContainer()}
-                        onlyShowTime={group.title === i18n.t('Today')}
-                        swapTokenData={{
-                          from: {
-                            token: {
-                              image: firstStep.fromLogo,
-                              displayName: firstStep.fromSymbol,
-                            },
-                            blockchain: {
-                              image: firstStep.fromBlockchainLogo || '',
-                            },
-                            amount: numberToString(
-                              swap.inputAmount,
-                              TOKEN_AMOUNT_MIN_DECIMALS,
-                              TOKEN_AMOUNT_MAX_DECIMALS
-                            ),
-                            realAmount: formatTooltipNumbers(swap.inputAmount),
-                          },
-                          to: {
-                            token: {
-                              image: lastStep.toLogo,
-                              displayName: lastStep.toSymbol,
-                            },
-                            blockchain: {
-                              image: lastStep.toBlockchainLogo || '',
-                            },
-                            amount: numberToString(
-                              lastStep.outputAmount ||
-                                lastStep.expectedOutputAmountHumanReadable ||
-                                '',
-                              TOKEN_AMOUNT_MIN_DECIMALS,
-                              TOKEN_AMOUNT_MAX_DECIMALS
-                            ),
-                            realAmount: formatTooltipNumbers(
-                              lastStep.outputAmount ||
-                                lastStep.expectedOutputAmountHumanReadable
-                            ),
-                          },
-                        }}
-                      />
-                    </React.Fragment>
-                  );
-                })}
-              </SwapList>
-            </Group>
-          </React.Fragment>
-        ))}
-    </>
-  );
-}

package/src/components/SwapsGroup/index.ts

@@ -1 +0,0 @@
-export { SwapsGroup } from './SwapsGroup';