@rango-dev/widget-embedded 0.60.2-next.1 → 0.60.2-next.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rango-dev/widget-embedded",
-  "version": "0.60.2-next.1",
+  "version": "0.60.2-next.3",
   "license": "MIT",
   "type": "module",
   "source": "./src/index.ts",
@@ -30,7 +30,7 @@
     "@rango-dev/logging-core": "^0.12.1",
     "@rango-dev/provider-all": "^0.62.2-next.1",
     "@rango-dev/queue-manager-core": "^0.33.0",
-    "@rango-dev/queue-manager-rango-preset": "^0.62.1-next.1",
+    "@rango-dev/queue-manager-rango-preset": "^0.62.1-next.2",
     "@rango-dev/queue-manager-react": "^0.33.0",
     "@rango-dev/signer-solana": "^0.48.0",
     "@rango-dev/ui": "^0.63.1-next.1",
@@ -66,4 +66,4 @@
   "publishConfig": {
     "access": "public"
   }
-}
+}

package/src/components/CustomTokenModal/CustomTokenModal.tsx

@@ -13,10 +13,10 @@ import React from 'react';
 
 import { DEFAULT_TOKEN_IMAGE_SRC } from '../../constants/customTokens';
 import { getContainer } from '../../utils/common';
+import { createTokenExplorerUrl } from '../../utils/meta';
 import { WatermarkedModal } from '../common/WatermarkedModal';
 
 import { CUSTOM_TOKEN_LEARN_MORE_LINK } from './CustomTokenModal.constants';
-import { generateExplorerLink } from './CustomTokenModal.helpers';
 import {
   Container,
   FlexCenteredContainer,
@@ -29,7 +29,12 @@ const MAX_SYMBOL_LENGTH_THRESHOLD = 9;
 export function CustomTokenModal(props: PropTypes) {
   const { open, onClose, token, onExit, onSubmitClick, blockchain } = props;
 
-  const explorerLink = generateExplorerLink(token.address, blockchain);
+  const explorerLink = token.address
+    ? createTokenExplorerUrl({
+        contractAddress: token.address,
+        blockchainMeta: blockchain,
+      })
+    : undefined;
 
   const onClickLearnMore = () =>
     window.open(CUSTOM_TOKEN_LEARN_MORE_LINK, '_blank');

package/src/components/TokenList/TokenList.tsx

@@ -25,7 +25,7 @@ import { useAppStore } from '../../store/AppStore';
 import { useQuoteStore } from '../../store/quote';
 import { createTintsAndShades } from '../../utils/colors';
 import { getContainer } from '../../utils/common';
-import { findBlockchain } from '../../utils/meta';
+import { createTokenExplorerUrl, findBlockchain } from '../../utils/meta';
 import { formatBalance } from '../../utils/wallets';
 import { ImportCustomToken } from '../ImportCustomToken';
 
@@ -81,8 +81,7 @@ const renderDesc = (props: RenderDescProps) => {
         <div
           className={`${tokenAddressStyles()} ${
             !name && tokenWithoutNameStyles()
-          }`}
-        >
+          }`}>
           {length > 10
             ? `${address.slice(0, 5)}...${address.slice(length - 6, length)}`
             : address}{' '}
@@ -91,8 +90,7 @@ const renderDesc = (props: RenderDescProps) => {
             href={url}
             target="_blank"
             rel="nofollow noreferrer"
-            onClick={(e) => e.stopPropagation()}
-          >
+            onClick={(e) => e.stopPropagation()}>
             <ExternalLinkIcon size={12} />
           </StyledLink>
         </div>
@@ -153,8 +151,7 @@ export function TokenList(props: PropTypes) {
           type="primary"
           size="small"
           className="widget-token-list-item-import-btn"
-          onClick={handleClick}
-        >
+          onClick={handleClick}>
           <Typography variant="body" size="xsmall" color="background">
             {t('import')}
           </Typography>
@@ -187,8 +184,7 @@ export function TokenList(props: PropTypes) {
             <Typography
               variant="body"
               className={usdValueStyles()}
-              size="xsmall"
-            >
+              size="xsmall">
               {`$${tokenBalance.usdValue}`}
             </Typography>
           )}
@@ -266,6 +262,13 @@ export function TokenList(props: PropTypes) {
             }
           };
 
+          const url = address
+            ? createTokenExplorerUrl({
+                contractAddress: address,
+                blockchainMeta: blockchain,
+              })
+            : undefined;
+
           return (
             <ListItemContainer>
               <StyledListItemButton
@@ -306,8 +309,7 @@ export function TokenList(props: PropTypes) {
                         <TagTitle
                           variant="body"
                           size="xsmall"
-                          css={customCssForTagTitle}
-                        >
+                          css={customCssForTagTitle}>
                           {token.blockchain}
                         </TagTitle>
                       </Tag>
@@ -321,16 +323,17 @@ export function TokenList(props: PropTypes) {
                   ) : undefined
                 }
                 description={
-                  typeof token !== 'string' && !!blockchain.info && !!address
+                  typeof token !== 'string' &&
+                  !!blockchain.info &&
+                  !!address &&
+                  !!url
                     ? renderDesc({
                         address,
                         token,
                         customCssForTag,
                         customCssForTagTitle,
                         name: token.name,
-                        url: blockchain.info.addressUrl
-                          .split('{wallet}')
-                          .join(address),
+                        url,
                       })
                     : token.name || undefined
                 }

package/src/utils/meta.ts

@@ -70,3 +70,16 @@ export function isValidTokenAddress(
   const valid = regex.filter((r) => new RegExp(r).test(address)).length > 0;
   return valid;
 }
+
+export function createTokenExplorerUrl(params: {
+  contractAddress: string;
+  blockchainMeta: BlockchainMeta;
+}): string | undefined {
+  const { contractAddress, blockchainMeta } = params;
+
+  if (blockchainMeta.info?.tokenUrl) {
+    return blockchainMeta.info.tokenUrl.replace('{address}', contractAddress);
+  }
+
+  return blockchainMeta.info?.addressUrl.replace('{wallet}', contractAddress);
+}

package/dist/components/CustomTokenModal/CustomTokenModal.helpers.d.ts

@@ -1,3 +0,0 @@
-import type { BlockchainMeta } from 'rango-types';
-export declare function generateExplorerLink(address: string | null, blockchain: BlockchainMeta): string;
-//# sourceMappingURL=CustomTokenModal.helpers.d.ts.map

package/dist/components/CustomTokenModal/CustomTokenModal.helpers.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"CustomTokenModal.helpers.d.ts","sourceRoot":"","sources":["../../../src/components/CustomTokenModal/CustomTokenModal.helpers.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAElD,wBAAgB,oBAAoB,CAClC,OAAO,EAAE,MAAM,GAAG,IAAI,EACtB,UAAU,EAAE,cAAc,GACzB,MAAM,CAQR"}

package/src/components/CustomTokenModal/CustomTokenModal.helpers.ts

@@ -1,14 +0,0 @@
-import type { BlockchainMeta } from 'rango-types';
-
-export function generateExplorerLink(
-  address: string | null,
-  blockchain: BlockchainMeta
-): string {
-  const explorerLinkPattern = blockchain.info?.addressUrl;
-
-  if (!explorerLinkPattern || !address) {
-    return '';
-  }
-
-  return explorerLinkPattern.replace('{wallet}', address);
-}