Merge branch 'next'

.github/workflows/checks.yaml

@@ -18,3 +18,50 @@ jobs:
         run: node ./scripts/check-conventional-commits/command.mjs
         env:
           REF: ${{ github.ref }}
+
+      # for preview deployment for specific project, add vercel project id in environment section
+      - name: Preview Deployment
+        id: deploy
+        run: |
+          yarn global add vercel
+          yarn run deploy
+        env:
+          REF: ${{ github.ref }}
+          GH_TOKEN: ${{ github.token }}
+          VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
+          VERCEL_TOKEN: ${{ secrets.VERCEL_TOKEN }}
+          VERCEL_PROJECT_WIDGET_CONFIG: ${{ secrets.VERCEL_PROJECT_WIDGET_CONFIG }} # widget playground
+          VERCEL_PROJECT_WIDGET_APP: ${{ secrets.VERCEL_PROJECT_WIDGET_APP }} # widget app
+          ENABLE_PREVIEW_DEPLOY: true
+
+    outputs:
+      # the structure of output variable is {packageNameWithoutScope}-url like: widget-app-url
+      app_url: ${{ steps.deploy.outputs.widget-app-url }}
+      playground_url: ${{ steps.deploy.outputs.widget-playground-url }}
+
+  # add job for each project that you want has preview deployment
+  app-preview:
+    runs-on: ubuntu-latest
+    needs: check
+    environment:
+      name: app-preview
+      url: ${{ steps.seturl.outputs.url }}
+    steps:
+      - name: Extract Preview URL
+        id: seturl
+        run: |
+          echo "url=${{ needs.check.outputs.app_url }}">> $GITHUB_OUTPUT
+          echo "Preview URL: ${{ needs.check.outputs.app_url}}"
+
+  playground-preview:
+    runs-on: ubuntu-latest
+    needs: check
+    environment:
+      name: playground-preview
+      url: ${{ steps.seturl.outputs.url }}
+    steps:
+      - name: Extract Preview URL
+        id: seturl
+        run: |
+          echo "url=${{ needs.check.outputs.playground_url }}">> $GITHUB_OUTPUT
+          echo "Preview URL: ${{ needs.check.outputs.playground_url}}"

docs/test.md

@@ -0,0 +1,33 @@
+# Test
+
+
+##  How to write a test
+
+it's essential to adhere to the following principles:
+
+- Test descriptions should be meaningful.
+- Use only English lowercase letters for descriptions.
+- Test descriptions is better to start with the verb.
+- Provide specific details about the functionality being tested.
+- Use descriptive names for tests to facilitate understanding.
+- Organize tests logically to enhance readability and navigation.
+- Use edge cases and boundary conditions to ensure comprehensive testing.
+- You can use `@faker-js/faker` library to create fake data
+
+
+
+## Examples
+
+To clarify the topic, some examples of token sort tests are given:
+
+good example:
+ - put pinned tokens first
+ - put native tokens first
+ - should be first result when address contains searched term
+
+bad example:
+- pinned tokens are displayed first
+- put pinned tokens
+- Put Pinned tokens first
+- when address contains searched term, should be first
+

examples/queue-manager-demo/package.json

@@ -15,11 +15,11 @@
     "rango-sdk": "^0.1.45"
   },
   "dependencies": {
-    "@rango-dev/provider-all": "^0.30.0",
-    "@rango-dev/queue-manager-rango-preset": "^0.30.0",
+    "@rango-dev/provider-all": "^0.30.1-next.4",
+    "@rango-dev/queue-manager-rango-preset": "^0.30.1-next.2",
     "@rango-dev/queue-manager-react": "^0.26.0",
-    "@rango-dev/wallets-react": "^0.16.0",
-    "@rango-dev/wallets-shared": "^0.30.0",
+    "@rango-dev/wallets-react": "^0.16.1-next.1",
+    "@rango-dev/wallets-shared": "^0.30.1-next.1",
     "bignumber.js": "^9.1.1",
     "ethers": "^5.7.2",
     "rango-sdk-basic": "^0.1.44",

examples/wallets-adapter-demo/package.json

@@ -11,8 +11,8 @@
     "clean": "rimraf .parcel-cache && rimraf dist"
   },
   "dependencies": {
-    "@rango-dev/provider-all": "^0.30.0",
-    "@rango-dev/wallets-adapter": "^0.25.0",
+    "@rango-dev/provider-all": "^0.30.1-next.4",
+    "@rango-dev/wallets-adapter": "^0.25.1-next.6",
     "rango-sdk": "^0.1.45",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"

examples/wallets-demo/package.json

@@ -11,10 +11,10 @@
     "clean": "rimraf .parcel-cache && rimraf dist"
   },
   "dependencies": {
-    "@rango-dev/provider-all": "^0.30.0",
-    "@rango-dev/ui": "^0.31.0",
-    "@rango-dev/wallets-react": "^0.16.0",
-    "@rango-dev/wallets-shared": "^0.30.0",
+    "@rango-dev/provider-all": "^0.30.1-next.4",
+    "@rango-dev/ui": "^0.31.1-next.3",
+    "@rango-dev/wallets-react": "^0.16.1-next.1",
+    "@rango-dev/wallets-shared": "^0.30.1-next.1",
     "rango-sdk": "^0.1.45",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"

examples/wallets-demo/src/components/List/Item.tsx

@@ -14,7 +14,6 @@ import {
   Tooltip,
   Typography,
 } from '@rango-dev/ui';
-import { InfoCircleIcon } from '@rango-dev/ui/src/components/Icon';
 import { readAccountAddress, useWallets } from '@rango-dev/wallets-react';
 import { detectInstallLink, Networks } from '@rango-dev/wallets-shared';
 import React, { useState } from 'react';
@@ -159,7 +158,7 @@ function Item({
             {walletState.connected && !canSwitchNetwork && (
               <>
                 <Tooltip content="Only default network is supported for this wallet.">
-                  <InfoCircleIcon size={24} color="success" />
+                  <InfoErrorIcon size={24} color="success" />
                 </Tooltip>
                 <Divider size={12} direction="horizontal" />
               </>

examples/wallets-demo/src/components/Swap.tsx

@@ -1,7 +1,12 @@
 import type { BlockchainMeta, Token } from 'rango-sdk';
 
-import { Image, styled, Typography } from '@rango-dev/ui';
-import { ArrowRightIcon } from '@rango-dev/ui/src/components/Icon';
+import {
+  ChevronRightIcon,
+  Divider,
+  Image,
+  styled,
+  Typography,
+} from '@rango-dev/ui';
 import React from 'react';
 
 interface swap {
@@ -44,7 +49,8 @@ export function SwapComponent(props: PropTypes) {
       {!!from && (
         <Content>
           <Image size={54} src={fromToken?.image} />
-          <Typography variant="body" mt={12} size="medium">
+          <Divider size={12} />
+          <Typography variant="body" size="medium">
             {from.token}
           </Typography>
           <div />
@@ -58,12 +64,13 @@ export function SwapComponent(props: PropTypes) {
         </Content>
       )}
 
-      <ArrowRightIcon size={32} color="black" />
+      <ChevronRightIcon size={32} color="black" />
 
       {!!to && (
         <Content>
           <Image size={54} src={toToken?.image} />
-          <Typography variant="body" size="medium" mt={12}>
+          <Divider size={12} />
+          <Typography variant="body" size="medium">
             {to.token}
           </Typography>
           <div />

global-wallets-env.d.ts

@@ -12,6 +12,7 @@ declare global {
     solana: any;
     phantom: any;
     xfi: any;
+    coinbaseWalletExtension: any;
     coinbaseSolana: any;
     coin98: any;
     keplr: any;

package.json

@@ -57,9 +57,11 @@
     "typescript": "^5.3.3"
   },
   "devDependencies": {
+    "@actions/core": "^1.10.1",
     "@babel/core": "^7.22.5",
     "@commitlint/cli": "^18.6.1",
     "@commitlint/config-conventional": "^18.6.2",
+    "@faker-js/faker": "^8.4.1",
     "@lingui/cli": "^4.2.1",
     "@nrwl/workspace": "^15.9.2",
     "@types/react": "^18.0.26",

queue-manager/rango-preset/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rango-dev/queue-manager-rango-preset",
-  "version": "0.30.0",
+  "version": "0.30.1-next.2",
   "license": "MIT",
   "type": "module",
   "source": "./src/index.ts",

queue-manager/rango-preset/src/shared.ts

@@ -18,6 +18,7 @@ import BigNumber from 'bignumber.js';
 import {
   isCosmosBlockchain,
   isEvmBlockchain,
+  isSolanaBlockchain,
   isStarknetBlockchain,
   isTronBlockchain,
 } from 'rango-types';
@@ -149,6 +150,9 @@ const getBlockchainMetaExplorerBaseUrl = (
     isTronBlockchain(blockchainMeta)
   ) {
     return blockchainMeta.info.transactionUrl;
+  } else if (isSolanaBlockchain(blockchainMeta)) {
+    const SOLANA_EXPLORER_URL = 'https://solscan.io/tx/{txHash}';
+    return SOLANA_EXPLORER_URL;
   }
   return;
 };
@@ -164,9 +168,9 @@ export const getScannerUrl = (
     return;
   }
   if (baseUrl.indexOf('/{txHash}') !== -1) {
-    return baseUrl.replace('{txHash}', txHash?.toLowerCase());
+    return baseUrl.replace('{txHash}', txHash);
   }
-  return `${baseUrl}/${txHash?.toLowerCase()}`;
+  return `${baseUrl}/${txHash}`;
 };
 
 export function getNextStep(

scripts/common/errors.mjs

@@ -103,4 +103,11 @@ export class CrowdinError extends Error {
   constructor(msg) {
     super(msg);
   }
+}
+
+export class VercelError extends Error {
+  name = 'VercelError';
+  constructor(msg) {
+    super(msg);
+  }
 }

scripts/common/github.mjs

@@ -125,6 +125,27 @@ export async function createPullRequest(pr) {
   return output;
 }
 
+export async function createComment(comment) {
+  const {commentBody, issueNumber} = comment;
+
+  if (!issueNumber || !commentBody) {
+    throw new GithubCommandError(
+      'Creating comment cannot proceed without required parameters. \n',
+      JSON.stringify({ issueNumber, commentBody })
+    );
+  }
+
+    const output = await execa('gh', ['issue', 'comment', issueNumber, '--body', commentBody])
+    .then(({ stdout }) => stdout)
+    .catch((err) => {
+      throw new GithubCommandError(
+        `Failed to add comment to issue. \n ${err.stdout || err} \n`
+      );
+    });
+
+    return output;
+}
+
 export function checkEnvironments() {
   const envs = {
     NPM_TOKEN: !!process.env.NPM_TOKEN,

scripts/deploy/command.mjs

@@ -1,30 +1,26 @@
 #!/usr/bin/env node
 'use strict';
 import process from 'node:process';
-import { workspacePackages } from '../common/utils.mjs';
 import { build } from '../publish/build.mjs';
 import { logAsSection } from '../publish/utils.mjs';
-import { deployProjectsToVercel } from './utils.mjs';
+import { deployProjectsToVercel, getClientsListToBeDeployed } from './utils.mjs';
+
 
-const EXCLUDED_PACKAGES = ['@rango-dev/widget-iframe'];
 
 // TODO: Working directory should be empty.
 async function run() {
-  // Detect last release and what packages has changed since then.
-  const packages = await workspacePackages();
-  const privatePackages = packages.filter((pkg) => {
-    if (EXCLUDED_PACKAGES.includes(pkg.name)) return false;
-    return pkg.private;
-  });
+
+  const listPackagesToBeDeployed = await getClientsListToBeDeployed();
+  logAsSection('[x] Check Environment');
 
-  await build(privatePackages).catch((e) => {
+  await build(listPackagesToBeDeployed).catch((e) => {
     console.log(
       '[-] BUILD FAILED. Ignore it to workflow run the rest of tasks.'
     );
     throw e;
   });
   logAsSection('[x] Build for VERCEL');
-  await deployProjectsToVercel(privatePackages).catch((e) => {
+  await deployProjectsToVercel(listPackagesToBeDeployed).catch((e) => {
     console.log(
       '[-] DEPLOY FAILED. Ignore it to workflow run the rest of tasks.'
     );

scripts/deploy/config.mjs

@@ -4,6 +4,9 @@ import process from 'node:process';
 const scope = `@rango-dev`;
 export const VERCEL_ORG_ID = process.env.VERCEL_ORG_ID;
 export const VERCEL_TOKEN = process.env.VERCEL_TOKEN;
+export const ENABLE_PREVIEW_DEPLOY = process.env.ENABLE_PREVIEW_DEPLOY;
+export const EXCLUDED_PACKAGES = ['@rango-dev/widget-iframe'];
+
 export const VERCEL_PACKAGES = {
   [`${scope}/wallets-demo`]: getEnvWithFallback('VERCEL_PROJECT_WALLETS'),
   [`${scope}/queue-manager-demo`]: getEnvWithFallback('VERCEL_PROJECT_Q'),