Merge pull request #239 from bnb-chain/feat/sendConfirmPopup1230

Feat/send confirm popup1230

apps/canonical-bridge-server/src/shared/web3/web3.service.ts

@@ -60,34 +60,49 @@ export class Web3Service {
   }
 
   async getTransferConfigsForAll() {
-    const { data } = await this.httpService.axiosRef.get<ITransferConfigsForAll>(
-      `${CBRIDGE_ENDPOINT}/v2/getTransferConfigsForAll`,
-    );
-    return data;
+    try {
+      const { data } = await this.httpService.axiosRef.get<ITransferConfigsForAll>(
+        `${CBRIDGE_ENDPOINT}/v2/getTransferConfigsForAll`,
+      );
+      return data;
+    } catch (e) {
+      console.error(`Failed to retrieve cBridge data at ${new Date().getTime()}`, e.message);
+    }
   }
 
   async getDebridgeChains() {
-    const { data } = await this.httpService.axiosRef.get<{ chains: IDebridgeChain[] }>(
-      `${DEBRIDGE_ENDPOINT}/supported-chains-info`,
-    );
+    try {
+      const { data } = await this.httpService.axiosRef.get<{ chains: IDebridgeChain[] }>(
+        `${DEBRIDGE_ENDPOINT}/supported-chains-info`,
+      );
 
-    return data;
+      return data;
+    } catch (e) {
+      console.error(`Failed to retrieve DeBridge chain data at ${new Date().getTime()}`, e.message);
+    }
   }
 
   async getDebridgeChainTokens(chainId: number) {
-    const { data } = await this.httpService.axiosRef.get<{
-      tokens: Record<string, IDebridgeToken>;
-    }>(`${DEBRIDGE_ENDPOINT}/token-list?chainId=${chainId}`);
+    try {
+      const { data } = await this.httpService.axiosRef.get<{
+        tokens: Record<string, IDebridgeToken>;
+      }>(`${DEBRIDGE_ENDPOINT}/token-list?chainId=${chainId}`);
 
-    return data;
+      return data;
+    } catch (e) {
+      console.error(
+        `Failed to retrieve DeBridge token data from ${chainId} at ${new Date().getTime()}`,
+        e.message,
+      );
+    }
   }
 
   async getStargateConfigs() {
-    const { data } = await this.httpService.axiosRef.get<IStargateTokenList>(
-      `${STARGATE_ENDPOINT}`,
-    );
-    const processedTokenList = [];
     try {
+      const { data } = await this.httpService.axiosRef.get<IStargateTokenList>(
+        `${STARGATE_ENDPOINT}`,
+      );
+      const processedTokenList = [];
       const v2List = data.v2;
       v2List.forEach((token) => {
         const chainInfo = STARGATE_CHAIN_INFO.filter(
@@ -97,17 +112,22 @@ export class Web3Service {
           processedTokenList.push({ ...token, endpointID: chainInfo[0].endpointID });
         }
       });
+      return processedTokenList;
     } catch (e) {
-      console.log(`Failed to retrieve Stargate API data at ${new Date().getTime()}`, e);
+      console.error(`Failed to retrieve Stargate API data at ${new Date().getTime()}`, e.message);
     }
-    return processedTokenList;
   }
 
   async getMesonConfigs() {
-    const { data } = await this.httpService.axiosRef.get<{ result: IMesonChain[] }>(
-      `${MESON_ENDPOINT}/limits`,
-    );
-    return data;
+    try {
+      const { data } = await this.httpService.axiosRef.get<{ result: IMesonChain[] }>(
+        `${MESON_ENDPOINT}/limits`,
+      );
+      return data;
+    } catch (e) {
+      console.log(`Failed to retrieve Meson API data at ${new Date().getTime()}`, e);
+      return [];
+    }
   }
 
   async getAssetPlatforms() {

apps/canonical-bridge-ui/core/components/ThemeProvider/index.tsx

@@ -24,6 +24,9 @@ export const ThemeProvider = ({ children }: ThemeProviderProps) => {
       global: ({ colorMode }: { colorMode: ColorMode }) => ({
         body: {
           bg: theme.colors[colorMode].background[3],
+          '.bccb-widget-transaction-summary-modal-overlap': {
+            opacity: '0.88 !important',
+          },
         },
       }),
     },

packages/canonical-bridge-sdk/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @bnb-chain/canonical-bridge-sdk
 
+## 0.4.6
+
+### Patch Changes
+
+- Use stargate & meson api to fetch chain & token config
+- 2538636: Remove duplicated tokens for stargate
+- c4f3ee7: Update token element's info
+- 7caf17e: Fix meson token display symbol issue
+
 ## 0.4.6-alpha.3
 
 ### Patch Changes

packages/canonical-bridge-sdk/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bnb-chain/canonical-bridge-sdk",
-  "version": "0.4.6-alpha.3",
+  "version": "0.4.6",
   "description": "canonical bridge sdk",
   "author": "bnb-chain",
   "private": false,

packages/canonical-bridge-widget/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @bnb-chain/canonical-bridge-widget
 
+## 0.5.16
+
+### Patch Changes
+
+- Use stargate & meson api to fetch chain & token config
+- 2538636: Remove duplicated tokens for stargate
+- 5d08223: Fix stargate fee display and handle api error
+- c4f3ee7: Update token element's info
+- 7caf17e: Fix meson token display symbol issue
+- e19a76c: Fix tron does not display due to its id
+- b930ad4: Add more token info to token element
+
 ## 0.5.16-alpha.5
 
 ### Patch Changes

packages/canonical-bridge-widget/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bnb-chain/canonical-bridge-widget",
-  "version": "0.5.16-alpha.5",
+  "version": "0.5.16",
   "description": "canonical bridge widget",
   "author": "bnb-chain",
   "private": false,

packages/canonical-bridge-widget/src/core/components/icons/InfoIcon.tsx

@@ -1,6 +1,11 @@
 import { Icon, IconProps } from '@bnb-chain/space';
 
-export function InfoIcon(props: IconProps) {
+interface InfoIconProps extends IconProps {
+  iconcolor?: string;
+  iconbgcolor?: string;
+}
+
+export function InfoIcon(props: InfoIconProps) {
   return (
     <Icon
       width="24px"
@@ -12,11 +17,11 @@ export function InfoIcon(props: IconProps) {
     >
       <path
         d="M2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12Z"
-        fill="#E1E2E5"
+        fill={props.iconbgcolor ?? '#E1E2E5'}
       />
       <path
         d="M11.9982 8.59998C11.7513 8.59998 11.5454 8.51695 11.3806 8.35088C11.2158 8.18483 11.1334 7.97835 11.1334 7.73145C11.1334 7.48455 11.2164 7.27869 11.3825 7.11387C11.5485 6.94906 11.755 6.86665 12.0019 6.86665C12.2488 6.86665 12.4547 6.94968 12.6195 7.11573C12.7843 7.2818 12.8667 7.48828 12.8667 7.73518C12.8667 7.98208 12.7837 8.18794 12.6176 8.35277C12.4516 8.51758 12.2451 8.59998 11.9982 8.59998ZM12.0001 17.1333C11.8519 17.1333 11.726 17.0815 11.6223 16.9778C11.5186 16.8741 11.4667 16.7481 11.4667 16.6V11.2C11.4667 11.0518 11.5186 10.9259 11.6223 10.8222C11.726 10.7185 11.8519 10.6667 12.0001 10.6667C12.1482 10.6667 12.2741 10.7185 12.3778 10.8222C12.4815 10.9259 12.5334 11.0518 12.5334 11.2V16.6C12.5334 16.7481 12.4815 16.8741 12.3778 16.9778C12.2741 17.0815 12.1482 17.1333 12.0001 17.1333Z"
-        fill="#373943"
+        fill={props.iconcolor ?? '#373943'}
       />
     </Icon>
   );

packages/canonical-bridge-widget/src/core/components/icons/TransferToIcon.tsx

@@ -1,6 +1,10 @@
 import { Icon, IconProps } from '@bnb-chain/space';
 
-export function TransferToIcon(props: IconProps) {
+interface TransferToIconProps extends IconProps {
+  iconopacity?: string;
+}
+
+export function TransferToIcon(props: TransferToIconProps) {
   return (
     <Icon
       xmlns="http://www.w3.org/2000/svg"
@@ -13,7 +17,7 @@ export function TransferToIcon(props: IconProps) {
       <path
         d="M24.5304 6.52734C24.8233 6.23441 24.8232 5.75953 24.5303 5.46668L19.7567 0.694287C19.4638 0.40143 18.9889 0.401488 18.6961 0.694417C18.4032 0.987346 18.4033 1.46222 18.6962 1.75508L22.9393 5.9972L18.6972 10.2404C18.4044 10.5333 18.4044 11.0082 18.6973 11.301C18.9903 11.5939 19.4651 11.5938 19.758 11.3009L24.5304 6.52734ZM9.15527e-05 6.75L24.0001 6.74707L23.9999 5.24707L-9.15527e-05 5.25L9.15527e-05 6.75Z"
         fill={`url(#paint0_linear_2473_21184_)`}
-        fillOpacity="0.3"
+        fillOpacity={props?.iconopacity ?? '0.3'}
       />
     </Icon>
   );

packages/canonical-bridge-widget/src/core/locales/en.ts

@@ -62,6 +62,12 @@ export const en = {
   'transfer.button.switch-network': 'Switch Network in Wallet',
   'transfer.button.wallet-connect': 'Connect Wallet',
   'transfer.button.switch-wallet': 'Switch Wallet',
+  'transfer.button.confirm-summary': 'Confirm Transfer',
+  'transfer.button.confirm-loading': 'Reloading Quotation',
+
+  'transfer.warning.confirm.to.address': 'Please double check the received token address:',
+  'transfer.warning.sol.balance':
+    'At least {min} SOL is required to proceed with this transaction.',
 
   'modal.approve.title': 'Approve Token',
   'modal.approve.desc.1': 'Please approve at least ',
@@ -81,6 +87,13 @@ export const en = {
   'modal.confirm.title': 'Waiting for Confirmation',
   'modal.confirm.desc': 'Confirm this transaction in your wallet',
 
+  'modal.summary.title': 'Confirm Transaction',
+
+  'modal.quote.error.title': 'Failed to Get the Quotation',
+  'modal.quote.error.desc':
+    'We’ve encountered an unknown issue on this route. Please try again later.',
+  'modal.quote.error.button.close': 'OK',
+
   'select-modal.tag.incompatible': 'Incompatible',
   'select-modal.search.no-result.title': 'No result found',
   'select-modal.search.no-result.warning':

packages/canonical-bridge-widget/src/modules/aggregator/adapters/cBridge/components/CBridgeOption.tsx

@@ -25,7 +25,6 @@ export const CBridgeOption = () => {
   const estimatedAmount = useAppSelector((state) => state.transfer.estimatedAmount);
   const sendValue = useAppSelector((state) => state.transfer.sendValue);
   const routeError = useAppSelector((state) => state.transfer.routeError);
-  const routeFees = useAppSelector((state) => state.transfer.routeFees);
 
   const receiveAmt = useMemo(() => {
     return estimatedAmount &&
@@ -89,12 +88,7 @@ export const CBridgeOption = () => {
         toTokenInfo={toTokenInfo?.['cBridge']}
       />
       <EstimatedArrivalTime isError={isError} bridgeType={'cBridge'} />
-      <FeesInfo
-        isError={isError}
-        bridgeType="cBridge"
-        summary={routeFees?.['cBridge']?.summary ?? '--'}
-        breakdown={routeFees?.['cBridge']?.breakdown}
-      />
+      <FeesInfo isError={isError} bridgeType="cBridge" />
       <AllowedSendAmount
         position={'static'}
         isError={isAllowSendError}