@xswap-link/sdk 0.1.0 → 0.1.1

package/.github/workflows/main.yml

@@ -18,4 +18,5 @@ jobs:
           cache: "pnpm"
 
       - run: pnpm install
+      - run: pnpm install react@18.2.0 react-dom@18.2.0 @types/react@18.2.0 @types/react-dom@18.2.0
       - run: pnpm run lint && pnpm run build

package/.github/workflows/publish.yml

@@ -26,6 +26,7 @@ jobs:
           cache: "pnpm"
 
       - run: pnpm install
+      - run: pnpm install react@18.2.0 react-dom@18.2.0 @types/react@18.2.0 @types/react-dom@18.2.0
       - name: Create Release Pull Request or Publish
         id: changesets
         uses: changesets/action@v1

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @xswap-link/xswap-sdk
 
+## 0.1.1
+
+### Patch Changes
+
+- f2f2fa7: refactor: move settings to separate tab
+- 6c34220: add error display field
+- 1f9c975: refactor: split form into smaller components
+- bc37d57: add express delivery indicator
+- 03de728: request chain change on tx form submit
+- af15c81: refactor: apply changes from figma design
+- f9b5d80: add powered by xswap and ccip badge
+- 4ecbb88: fix small balance display
+- 6742608: fix: close chain list on click outside
+- a06be7d: fix token amount clearing on token change and add Max balance button
+
 ## 0.1.0
 
 ### Minor Changes

package/dist/index.css

@@ -343,8 +343,11 @@ video {
 .right-0 {
   right: 0px;
 }
-.right-3 {
-  right: 0.75rem;
+.right-4 {
+  right: 1rem;
+}
+.right-\[50\%\] {
+  right: 50%;
 }
 .top-0 {
   top: 0px;
@@ -352,11 +355,14 @@ video {
 .top-10 {
   top: 2.5rem;
 }
-.top-3 {
-  top: 0.75rem;
+.top-4 {
+  top: 1rem;
+}
+.top-7 {
+  top: 1.75rem;
 }
-.top-3\.5 {
-  top: 0.875rem;
+.top-\[46px\] {
+  top: 46px;
 }
 .z-10 {
   z-index: 10;
@@ -405,6 +411,9 @@ video {
 .-ml-1 {
   margin-left: -0.25rem;
 }
+.mb-1 {
+  margin-bottom: 0.25rem;
+}
 .mb-2 {
   margin-bottom: 0.5rem;
 }
@@ -459,6 +468,9 @@ video {
 .h-7 {
   height: 1.75rem;
 }
+.h-8 {
+  height: 2rem;
+}
 .h-9 {
   height: 2.25rem;
 }
@@ -486,8 +498,8 @@ video {
 .max-h-\[70\%\] {
   max-height: 70%;
 }
-.min-h-\[562px\] {
-  min-height: 562px;
+.min-h-\[26px\] {
+  min-height: 26px;
 }
 .w-1\/2 {
   width: 50%;
@@ -513,33 +525,42 @@ video {
 .w-4 {
   width: 1rem;
 }
-.w-4\/5 {
-  width: 80%;
-}
 .w-5 {
   width: 1.25rem;
 }
 .w-6 {
   width: 1.5rem;
 }
+.w-7 {
+  width: 1.75rem;
+}
+.w-8 {
+  width: 2rem;
+}
 .w-9 {
   width: 2.25rem;
 }
-.w-96 {
-  width: 24rem;
-}
 .w-\[100\%\+48px\] {
   width: 100%+48px;
 }
 .w-\[190px\] {
   width: 190px;
 }
+.w-\[310px\] {
+  width: 310px;
+}
+.w-\[360px\] {
+  width: 360px;
+}
 .w-\[452px\] {
   width: 452px;
 }
 .w-full {
   width: 100%;
 }
+.min-w-\[26px\] {
+  min-width: 26px;
+}
 .max-w-full {
   max-width: 100%;
 }
@@ -552,6 +573,10 @@ video {
 .grow {
   flex-grow: 1;
 }
+.translate-x-1\/2 {
+  --tw-translate-x: 50%;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
 .translate-x-\[12px\] {
   --tw-translate-x: 12px;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -560,6 +585,10 @@ video {
   --tw-translate-y: -4px;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
+.translate-y-\[-60\%\] {
+  --tw-translate-y: -60%;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
 @keyframes pulse {
   50% {
     opacity: .5;
@@ -603,9 +632,6 @@ video {
 .justify-between {
   justify-content: space-between;
 }
-.justify-around {
-  justify-content: space-around;
-}
 .gap-1 {
   gap: 0.25rem;
 }
@@ -684,13 +710,22 @@ video {
 .border-\[rgba\(255\,255\,255\,0\.2\)\] {
   border-color: rgba(255, 255, 255, 0.2);
 }
+.border-\[rgba\(54\,129\,198\,1\)\] {
+  border-color: rgba(54, 129, 198, 1);
+}
 .border-\[rgba\(82\,82\,82\,1\)\] {
   border-color: rgba(82, 82, 82, 1);
 }
+.border-transparent {
+  border-color: transparent;
+}
 .border-x_alert {
   --tw-border-opacity: 1;
   border-color: rgb(255 183 77 / var(--tw-border-opacity));
 }
+.border-x_error_border {
+  border-color: rgba(255, 111, 0, 1);
+}
 .bg-\[\#272e40\] {
   --tw-bg-opacity: 1;
   background-color: rgb(39 46 64 / var(--tw-bg-opacity));
@@ -739,6 +774,12 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(51 150 255 / var(--tw-bg-opacity));
 }
+.bg-x_error_background {
+  background-color: rgba(255, 202, 40, 0.1);
+}
+.bg-gradient-to-l {
+  background-image: linear-gradient(to left, var(--tw-gradient-stops));
+}
 .bg-gradient-to-r {
   background-image: linear-gradient(to right, var(--tw-gradient-stops));
 }
@@ -747,9 +788,28 @@ video {
   --tw-gradient-to: rgb(54 129 198 / 0) var(--tw-gradient-to-position);
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
 }
+.from-\[rgba\(54\,129\,198\,1\)\] {
+  --tw-gradient-from: rgba(54,129,198,1) var(--tw-gradient-from-position);
+  --tw-gradient-to: rgba(54, 129, 198, 0) var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
+.from-x_blue_light {
+  --tw-gradient-from: rgba(54,129,198,1) var(--tw-gradient-from-position);
+  --tw-gradient-to: rgba(54, 129, 198, 0) var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
 .to-\[\#2b4a9d\] {
   --tw-gradient-to: #2b4a9d var(--tw-gradient-to-position);
 }
+.to-\[rgba\(43\,74\,157\,1\)\] {
+  --tw-gradient-to: rgba(43,74,157,1) var(--tw-gradient-to-position);
+}
+.to-x_blue_dark {
+  --tw-gradient-to: rgba(43,74,157,1) var(--tw-gradient-to-position);
+}
+.bg-clip-text {
+  background-clip: text;
+}
 .p-0 {
   padding: 0px;
 }
@@ -771,6 +831,9 @@ video {
 .p-6 {
   padding: 1.5rem;
 }
+.p-\[5px\] {
+  padding: 5px;
+}
 .px-0 {
   padding-left: 0px;
   padding-right: 0px;
@@ -787,6 +850,10 @@ video {
   padding-left: 0.75rem;
   padding-right: 0.75rem;
 }
+.px-4 {
+  padding-left: 1rem;
+  padding-right: 1rem;
+}
 .px-\[24px\] {
   padding-left: 24px;
   padding-right: 24px;
@@ -811,9 +878,24 @@ video {
   padding-top: 1rem;
   padding-bottom: 1rem;
 }
+.pl-4 {
+  padding-left: 1rem;
+}
+.pr-8 {
+  padding-right: 2rem;
+}
+.pt-2 {
+  padding-top: 0.5rem;
+}
+.text-left {
+  text-align: left;
+}
 .text-center {
   text-align: center;
 }
+.text-right {
+  text-align: right;
+}
 .align-middle {
   vertical-align: middle;
 }
@@ -834,30 +916,39 @@ video {
   font-size: 1rem;
   line-height: 1.5rem;
 }
-.text-lg {
-  font-size: 1.125rem;
-  line-height: 1.75rem;
-}
 .text-sm {
   font-size: 0.875rem;
   line-height: 1.25rem;
 }
+.text-xl {
+  font-size: 1.25rem;
+  line-height: 1.75rem;
+}
 .text-xs {
   font-size: 0.75rem;
   line-height: 1rem;
 }
+.font-light {
+  font-weight: 300;
+}
 .font-medium {
   font-weight: 500;
 }
 .font-normal {
   font-weight: 400;
 }
+.leading-\[10px\] {
+  line-height: 10px;
+}
 .leading-\[16px\] {
   line-height: 16px;
 }
 .leading-\[41px\] {
   line-height: 41px;
 }
+.leading-none {
+  line-height: 1;
+}
 .text-\[\#888\] {
   --tw-text-opacity: 1;
   color: rgb(136 136 136 / var(--tw-text-opacity));
@@ -866,6 +957,10 @@ video {
   --tw-text-opacity: 1;
   color: rgb(224 231 250 / var(--tw-text-opacity));
 }
+.text-\[\#ffa726\] {
+  --tw-text-opacity: 1;
+  color: rgb(255 167 38 / var(--tw-text-opacity));
+}
 .text-\[rgb\(100\,200\,100\)\] {
   --tw-text-opacity: 1;
   color: rgb(100 200 100 / var(--tw-text-opacity));
@@ -888,6 +983,9 @@ video {
 .text-\[rgba\(255\,255\,255\,0\.6\)\] {
   color: rgba(255, 255, 255, 0.6);
 }
+.text-transparent {
+  color: transparent;
+}
 .text-white {
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity));
@@ -896,6 +994,10 @@ video {
   --tw-text-opacity: 1;
   color: rgb(255 226 183 / var(--tw-text-opacity));
 }
+.text-x_green {
+  --tw-text-opacity: 1;
+  color: rgb(102 187 106 / var(--tw-text-opacity));
+}
 .no-underline {
   text-decoration-line: none;
 }
@@ -1000,13 +1102,7 @@ video {
   outline-offset: 2px;
 }
 @media (min-width: 640px) {
-  .sm\:w-\[482px\] {
-    width: 482px;
-  }
-  .sm\:flex-row {
-    flex-direction: row;
-  }
-  .sm\:justify-start {
-    justify-content: flex-start;
+  .sm\:w-\[600px\] {
+    width: 600px;
   }
 }

package/dist/index.d.mts

@@ -1,24 +1,9 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
 import { BigNumber, ethers, BigNumberish } from 'ethers';
 import { TransactionRequest } from '@ethersproject/providers';
 
 declare const Alert: ({ desc }: {
     desc: string;
-}) => react_jsx_runtime.JSX.Element;
-
-declare function openTxConfigForm({ dstChainId, dstTokenAddr, customContractCalls, desc, supportedChains, }: {
-    dstChainId: any;
-    dstTokenAddr: any;
-    customContractCalls: any;
-    desc: any;
-    supportedChains: any;
-}): Promise<any>;
-
-declare const Skeleton: ({ w, h }: Style) => react_jsx_runtime.JSX.Element;
-type Style = {
-    w: string;
-    h: string;
-};
+}) => JSX.Element;
 
 type Addresses = {
     [chainId: string]: Contracts;
@@ -256,12 +241,30 @@ type Transaction = {
     status: TransactionStatus;
 };
 
+type TxConfigFormProps = {
+    dstChainId: string;
+    dstTokenAddr: string;
+    customContractCalls: ContractCall[];
+    desc?: string;
+    supportedChains: Chain[];
+};
+declare const openTxConfigForm: ({ dstChainId, dstTokenAddr, customContractCalls, desc, supportedChains, }: TxConfigFormProps) => Promise<Route>;
+
+declare const Skeleton: ({ w, h }: Style) => JSX.Element;
+type Style = {
+    w: string;
+    h: string;
+};
+
 declare const DEFAULT_ECOSYSTEM = Ecosystem.EVM;
 declare const NUMBER_INPUT_REGEX: RegExp;
 declare const SLIPPAGE_PRESETS: number[];
-declare const FALLBACK_CROSSCHAIN_ESTIMATION_TIME: number;
+declare const DELIVERY_TIME: number;
+declare const EXPRESS_DELIVERY_TIME: number;
 declare const BALANCES_CHUNK_SIZE = 500;
 declare const BALANCE_DISPLAY_MIN_LIMIT = 0.0001;
+declare const ROUTE_TIMEOUT_MS = 5000;
+declare const MINIMUM_DISPLAYED_TOKEN_AMOUNT = 0.00001;
 
 declare const BatchQueryAbi: ({
     inputs: {
@@ -516,4 +519,4 @@ declare const deepMergeObjects: (obj1: Record<string, any>, obj2: Record<string,
 };
 declare const chunkArray: (array: any[], chunkSize: number) => any[][];
 
-export { ADDRESSES, type AddReferralPayload, type Addresses, Alert, BALANCES_CHUNK_SIZE, BALANCE_DISPLAY_MIN_LIMIT, BatchQueryAbi, type BridgeToken, type Chain, type CoinTypeAddress, type CollectFees, type ContractCall, ContractName, type Contracts, DEFAULT_ECOSYSTEM, ERC20Abi, Ecosystem, Environment, FALLBACK_CROSSCHAIN_ESTIMATION_TIME, type GenerateStakingCallsParams, type GetPricesPayload, type GetRoutePayload, type GetSwapTxPayload, IERC20, NUMBER_INPUT_REGEX, type Prices, type Protocol, type Referral, type ReferralInfo, type Route, SLIPPAGE_PRESETS, Skeleton, type Token, type TokenBalances, type TokenPrices, type Transaction, type TransactionHistory, type TransactionStatus, type Transactions, type TxConfigFormData, Web3Environment, XSwapCallType, type XSwapConfig, type XSwapFee, type XSwapFees, XSwapRouterAbi, chunkArray, deepMergeObjects, findPlaceholderIndex, generateApproveTxData, generateRandomBigNumber, generateStakingCalls, generateUniqueRandomBigNumber, getBalanceOf, getBalances, getBridgeTokens, getChainData, getChains, getHistory, getPrices, getRoute, getSwapTx, getTokens, openTxConfigForm, replaceNull, safeBigNumberFrom, shortAddress, weiToHumanReadable };
+export { ADDRESSES, type AddReferralPayload, type Addresses, Alert, BALANCES_CHUNK_SIZE, BALANCE_DISPLAY_MIN_LIMIT, BatchQueryAbi, type BridgeToken, type Chain, type CoinTypeAddress, type CollectFees, type ContractCall, ContractName, type Contracts, DEFAULT_ECOSYSTEM, DELIVERY_TIME, ERC20Abi, EXPRESS_DELIVERY_TIME, Ecosystem, Environment, type GenerateStakingCallsParams, type GetPricesPayload, type GetRoutePayload, type GetSwapTxPayload, IERC20, MINIMUM_DISPLAYED_TOKEN_AMOUNT, NUMBER_INPUT_REGEX, type Prices, type Protocol, ROUTE_TIMEOUT_MS, type Referral, type ReferralInfo, type Route, SLIPPAGE_PRESETS, Skeleton, type Token, type TokenBalances, type TokenPrices, type Transaction, type TransactionHistory, type TransactionStatus, type Transactions, type TxConfigFormData, type TxConfigFormProps, Web3Environment, XSwapCallType, type XSwapConfig, type XSwapFee, type XSwapFees, XSwapRouterAbi, chunkArray, deepMergeObjects, findPlaceholderIndex, generateApproveTxData, generateRandomBigNumber, generateStakingCalls, generateUniqueRandomBigNumber, getBalanceOf, getBalances, getBridgeTokens, getChainData, getChains, getHistory, getPrices, getRoute, getSwapTx, getTokens, openTxConfigForm, replaceNull, safeBigNumberFrom, shortAddress, weiToHumanReadable };

package/dist/index.d.ts

@@ -1,24 +1,9 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
 import { BigNumber, ethers, BigNumberish } from 'ethers';
 import { TransactionRequest } from '@ethersproject/providers';
 
 declare const Alert: ({ desc }: {
     desc: string;
-}) => react_jsx_runtime.JSX.Element;
-
-declare function openTxConfigForm({ dstChainId, dstTokenAddr, customContractCalls, desc, supportedChains, }: {
-    dstChainId: any;
-    dstTokenAddr: any;
-    customContractCalls: any;
-    desc: any;
-    supportedChains: any;
-}): Promise<any>;
-
-declare const Skeleton: ({ w, h }: Style) => react_jsx_runtime.JSX.Element;
-type Style = {
-    w: string;
-    h: string;
-};
+}) => JSX.Element;
 
 type Addresses = {
     [chainId: string]: Contracts;
@@ -256,12 +241,30 @@ type Transaction = {
     status: TransactionStatus;
 };
 
+type TxConfigFormProps = {
+    dstChainId: string;
+    dstTokenAddr: string;
+    customContractCalls: ContractCall[];
+    desc?: string;
+    supportedChains: Chain[];
+};
+declare const openTxConfigForm: ({ dstChainId, dstTokenAddr, customContractCalls, desc, supportedChains, }: TxConfigFormProps) => Promise<Route>;
+
+declare const Skeleton: ({ w, h }: Style) => JSX.Element;
+type Style = {
+    w: string;
+    h: string;
+};
+
 declare const DEFAULT_ECOSYSTEM = Ecosystem.EVM;
 declare const NUMBER_INPUT_REGEX: RegExp;
 declare const SLIPPAGE_PRESETS: number[];
-declare const FALLBACK_CROSSCHAIN_ESTIMATION_TIME: number;
+declare const DELIVERY_TIME: number;
+declare const EXPRESS_DELIVERY_TIME: number;
 declare const BALANCES_CHUNK_SIZE = 500;
 declare const BALANCE_DISPLAY_MIN_LIMIT = 0.0001;
+declare const ROUTE_TIMEOUT_MS = 5000;
+declare const MINIMUM_DISPLAYED_TOKEN_AMOUNT = 0.00001;
 
 declare const BatchQueryAbi: ({
     inputs: {
@@ -516,4 +519,4 @@ declare const deepMergeObjects: (obj1: Record<string, any>, obj2: Record<string,
 };
 declare const chunkArray: (array: any[], chunkSize: number) => any[][];
 
-export { ADDRESSES, type AddReferralPayload, type Addresses, Alert, BALANCES_CHUNK_SIZE, BALANCE_DISPLAY_MIN_LIMIT, BatchQueryAbi, type BridgeToken, type Chain, type CoinTypeAddress, type CollectFees, type ContractCall, ContractName, type Contracts, DEFAULT_ECOSYSTEM, ERC20Abi, Ecosystem, Environment, FALLBACK_CROSSCHAIN_ESTIMATION_TIME, type GenerateStakingCallsParams, type GetPricesPayload, type GetRoutePayload, type GetSwapTxPayload, IERC20, NUMBER_INPUT_REGEX, type Prices, type Protocol, type Referral, type ReferralInfo, type Route, SLIPPAGE_PRESETS, Skeleton, type Token, type TokenBalances, type TokenPrices, type Transaction, type TransactionHistory, type TransactionStatus, type Transactions, type TxConfigFormData, Web3Environment, XSwapCallType, type XSwapConfig, type XSwapFee, type XSwapFees, XSwapRouterAbi, chunkArray, deepMergeObjects, findPlaceholderIndex, generateApproveTxData, generateRandomBigNumber, generateStakingCalls, generateUniqueRandomBigNumber, getBalanceOf, getBalances, getBridgeTokens, getChainData, getChains, getHistory, getPrices, getRoute, getSwapTx, getTokens, openTxConfigForm, replaceNull, safeBigNumberFrom, shortAddress, weiToHumanReadable };
+export { ADDRESSES, type AddReferralPayload, type Addresses, Alert, BALANCES_CHUNK_SIZE, BALANCE_DISPLAY_MIN_LIMIT, BatchQueryAbi, type BridgeToken, type Chain, type CoinTypeAddress, type CollectFees, type ContractCall, ContractName, type Contracts, DEFAULT_ECOSYSTEM, DELIVERY_TIME, ERC20Abi, EXPRESS_DELIVERY_TIME, Ecosystem, Environment, type GenerateStakingCallsParams, type GetPricesPayload, type GetRoutePayload, type GetSwapTxPayload, IERC20, MINIMUM_DISPLAYED_TOKEN_AMOUNT, NUMBER_INPUT_REGEX, type Prices, type Protocol, ROUTE_TIMEOUT_MS, type Referral, type ReferralInfo, type Route, SLIPPAGE_PRESETS, Skeleton, type Token, type TokenBalances, type TokenPrices, type Transaction, type TransactionHistory, type TransactionStatus, type Transactions, type TxConfigFormData, type TxConfigFormProps, Web3Environment, XSwapCallType, type XSwapConfig, type XSwapFee, type XSwapFees, XSwapRouterAbi, chunkArray, deepMergeObjects, findPlaceholderIndex, generateApproveTxData, generateRandomBigNumber, generateStakingCalls, generateUniqueRandomBigNumber, getBalanceOf, getBalances, getBridgeTokens, getChainData, getChains, getHistory, getPrices, getRoute, getSwapTx, getTokens, openTxConfigForm, replaceNull, safeBigNumberFrom, shortAddress, weiToHumanReadable };