Use destination instead of target for bridge address/network (#279)

Author: dguenther

renderer/components/BridgeAssetsForm/BridgeAssetsForm.tsx

@@ -99,15 +99,15 @@ function BridgeAssetsFormContent({
       fromAccount: defaultFromAccount,
       assetId: defaultAssetId,
       destinationNetworkId: null,
-      targetAddress: "",
+      destinationAddress: "",
     },
   });
 
   const amountValue = watch("amount");
   const fromAccountValue = watch("fromAccount");
   const assetIdValue = watch("assetId");
   const destinationNetworkId = watch("destinationNetworkId");
-  const targetAddress = watch("targetAddress");
+  const destinationAddress = watch("destinationAddress");
 
   const { data: tokenPathsResponse, isLoading: tokenPathsLoading } =
     trpcReact.getChainportTokenPaths.useQuery(
@@ -180,20 +180,20 @@ function BridgeAssetsFormContent({
     [selectedAsset, setError],
   );
 
-  const targetAddressIcon = useMemo(() => {
-    if (targetAddress.length === 0) {
+  const destinationAddressIcon = useMemo(() => {
+    if (destinationAddress.length === 0) {
       return null;
     }
 
-    return targetAddress.length > 0 && isAddress(targetAddress) ? (
+    return destinationAddress.length > 0 && isAddress(destinationAddress) ? (
       <chakra.svg width="18" height="13" viewBox="0 0 18 13" fill="none" mr={1}>
         <path
           d="M6.54961 13L0.849609 7.29998L2.27461 5.87498L6.54961 10.15L15.7246 0.974976L17.1496 2.39998L6.54961 13Z"
           fill="#6A991C"
         />
       </chakra.svg>
     ) : null;
-  }, [targetAddress]);
+  }, [destinationAddress]);
 
   // Try to reset selected asset to a valid one if the current one is disabled
   useEffect(() => {
@@ -257,7 +257,7 @@ function BridgeAssetsFormContent({
             fromAccount: data.fromAccount,
             assetId: data.assetId,
             destinationNetwork: destinationNetwork,
-            targetAddress: getChecksumAddress(data.targetAddress),
+            destinationAddress: getChecksumAddress(data.destinationAddress),
           });
         })}
       >
@@ -389,12 +389,12 @@ function BridgeAssetsFormContent({
               />
             )
           }
-          targetAddressInput={
+          destinationAddressInput={
             <TextInput
-              {...register("targetAddress")}
-              label="Target Address"
-              error={formErrors.targetAddress?.message}
-              icon={targetAddressIcon}
+              {...register("destinationAddress")}
+              label="Destination Address"
+              error={formErrors.destinationAddress?.message}
+              icon={destinationAddressIcon}
             />
           }
           topLevelErrorMessage={transactionDetailsError}
@@ -404,7 +404,7 @@ function BridgeAssetsFormContent({
         <BridgeConfirmationModal
           onClose={() => setConfirmationData(null)}
           formData={confirmationData}
-          targetNetwork={confirmationData.destinationNetwork}
+          destinationNetwork={confirmationData.destinationNetwork}
           selectedAsset={assetOptionsMap.get(confirmationData.assetId)!}
           chainportToken={chainportTokensMap[confirmationData.assetId]!}
           handleTransactionDetailsError={(errorMessage) =>
@@ -439,7 +439,7 @@ export function BridgeAssetsForm() {
         assetAmountInput={<Skeleton height={71} />}
         bridgeProviderInput={<Skeleton height={71} w="50%" />}
         destinationNetworkInput={<Skeleton height={71} w="50%" />}
-        targetAddressInput={<Skeleton height={71} w="100%" />}
+        destinationAddressInput={<Skeleton height={71} w="100%" />}
       />
     );
   }

renderer/components/BridgeAssetsForm/BridgeAssetsFormShell.tsx

@@ -18,15 +18,15 @@ export function BridgeAssetsFormShell({
   assetAmountInput,
   bridgeProviderInput,
   destinationNetworkInput,
-  targetAddressInput,
+  destinationAddressInput,
   topLevelErrorMessage,
 }: {
   status?: "LOADING";
   fromAccountInput: ReactNode;
   assetAmountInput: ReactNode;
   bridgeProviderInput: ReactNode;
   destinationNetworkInput: ReactNode;
-  targetAddressInput: ReactNode;
+  destinationAddressInput: ReactNode;
   topLevelErrorMessage?: string;
 }) {
   const { formatMessage } = useIntl();
@@ -86,7 +86,7 @@ export function BridgeAssetsFormShell({
             }}
           >
             <HStack>{destinationNetworkInput}</HStack>
-            <Box>{targetAddressInput}</Box>
+            <Box>{destinationAddressInput}</Box>
           </VStack>
         </VStack>
       </VStack>

renderer/components/BridgeAssetsForm/BridgeConfirmationModal/BridgeConfirmationModal.tsx

@@ -72,7 +72,7 @@ type ChainportNetwork =
 type Props = {
   onClose: () => void;
   formData: BridgeAssetsConfirmationData;
-  targetNetwork: ChainportNetwork;
+  destinationNetwork: ChainportNetwork;
   selectedAsset: AssetOptionType;
   chainportToken: ChainportToken;
   handleTransactionDetailsError: (error: string) => void;
@@ -81,7 +81,7 @@ type Props = {
 export function BridgeConfirmationModal({
   onClose,
   formData,
-  targetNetwork,
+  destinationNetwork,
   selectedAsset,
   chainportToken,
   handleTransactionDetailsError,
@@ -114,8 +114,8 @@ export function BridgeConfirmationModal({
     {
       amount: convertedAmount.toString(),
       assetId: chainportToken.web3_address,
-      to: formData.targetAddress,
-      selectedNetwork: targetNetwork.chainport_network_id,
+      to: formData.destinationAddress,
+      selectedNetwork: destinationNetwork.chainport_network_id,
     },
     {
       retry: false,
@@ -279,11 +279,11 @@ export function BridgeConfirmationModal({
           {isSubmitIdle && (
             <StepIdle
               fromAccount={formData.fromAccount}
-              targetNetwork={targetNetwork.label}
-              targetNetworkIcon={targetNetwork.network_icon}
+              destinationNetwork={destinationNetwork.label}
+              destinationNetworkIcon={destinationNetwork.network_icon}
               amountSending={amountToSend}
               amountReceiving={amountToReceive}
-              targetAddress={formData.targetAddress}
+              destinationAddress={formData.destinationAddress}
               chainportGasFee={chainportGasFee}
               chainportBridgeFee={chainportBridgeFee}
               feeRate={feeRate}

renderer/components/BridgeAssetsForm/BridgeConfirmationModal/StepIdle.tsx

@@ -38,8 +38,8 @@ const messages = defineMessages({
   sourceNetworkLabel: {
     defaultMessage: "Source Network",
   },
-  targetNetworkLabel: {
-    defaultMessage: "Target Network",
+  destinationNetworkLabel: {
+    defaultMessage: "Destination Network",
   },
   sendingLabel: {
     defaultMessage: "Sending",
@@ -51,14 +51,14 @@ const messages = defineMessages({
     defaultMessage:
       "Sending amount minus the bridge fee. This is an estimate, and you may receive a slightly different amount.",
   },
-  targetAddressLabel: {
-    defaultMessage: "Target Address",
+  destinationAddressLabel: {
+    defaultMessage: "Destination Address",
   },
   gasFeeLabel: {
     defaultMessage: "Gas fee",
   },
   gasFeeTooltip: {
-    defaultMessage: "The fee for transacting on the target network",
+    defaultMessage: "The fee for transacting on the destination network",
   },
   bridgeFeeLabel: {
     defaultMessage: "Bridge fee",
@@ -82,11 +82,11 @@ const messages = defineMessages({
 
 type Props = {
   fromAccount: string;
-  targetNetwork: string;
-  targetNetworkIcon: string;
+  destinationNetwork: string;
+  destinationNetworkIcon: string;
   amountSending: ReactNode;
   amountReceiving: ReactNode;
-  targetAddress: string;
+  destinationAddress: string;
   chainportGasFee: ReactNode;
   chainportBridgeFee: ReactNode;
   estimatedFees: UseTRPCQueryResult<
@@ -100,11 +100,11 @@ type Props = {
 
 export function StepIdle({
   fromAccount,
-  targetNetwork,
-  targetNetworkIcon,
+  destinationNetwork,
+  destinationNetworkIcon,
   amountSending,
   amountReceiving,
-  targetAddress,
+  destinationAddress,
   chainportGasFee,
   chainportBridgeFee,
   estimatedFees,
@@ -167,9 +167,9 @@ export function StepIdle({
           </GridItem>
           <GridItem>
             <LineItem
-              label={formatMessage(messages.targetNetworkLabel)}
-              content={targetNetwork}
-              icon={targetNetworkIcon}
+              label={formatMessage(messages.destinationNetworkLabel)}
+              content={destinationNetwork}
+              icon={destinationNetworkIcon}
             />
           </GridItem>
           <GridItem
@@ -216,8 +216,8 @@ export function StepIdle({
         <Divider />
 
         <LineItem
-          label={formatMessage(messages.targetAddressLabel)}
-          content={targetAddress}
+          label={formatMessage(messages.destinationAddressLabel)}
+          content={destinationAddress}
         />
 
         <Divider />

renderer/components/BridgeAssetsForm/bridgeAssetsSchema.ts

@@ -16,7 +16,7 @@ export const bridgeAssetsFormSchema = z.object({
     }, "Amount must be greater than 0"),
   assetId: z.string().min(1),
   destinationNetworkId: z.string().min(1).nullable(),
-  targetAddress: z.string().superRefine((value, ctx) => {
+  destinationAddress: z.string().superRefine((value, ctx) => {
     try {
       getChecksumAddress(value);
     } catch (err) {

renderer/components/BridgeTransactionInformation/BridgeTransactionInformation.tsx

@@ -94,7 +94,7 @@ export function BridgeTransactionInformation({
       type={transaction.type}
       address={chainportData.address}
       networkIcon={otherNetwork?.network_icon ?? ""}
-      targetTxHash={destinationTxHashContent?.txHash ?? undefined}
+      destinationTxHash={destinationTxHashContent?.txHash ?? undefined}
       blockExplorerUrl={destinationTxHashContent?.href}
       sourceNetwork={sourceNetwork}
       {...rest}

renderer/components/BridgeTransactionInformation/BridgeTransactionInformationShell.tsx

@@ -48,7 +48,7 @@ type Props = BoxProps & {
   type: ReactNode;
   address: string;
   networkIcon?: string;
-  targetTxHash?: string;
+  destinationTxHash?: string;
   blockExplorerUrl?: string;
   sourceNetwork?: {
     name: string;
@@ -61,7 +61,7 @@ export function BridgeTransactionInformationShell({
   type,
   address,
   networkIcon,
-  targetTxHash,
+  destinationTxHash,
   blockExplorerUrl,
   sourceNetwork,
   ...rest
@@ -176,12 +176,12 @@ export function BridgeTransactionInformationShell({
                   </Text>
                   <Box fontSize="md">
                     <VStack alignItems="flex-start">
-                      {targetTxHash ? (
+                      {destinationTxHash ? (
                         <CopyAddress
                           fontSize="md"
                           color={COLORS.BLACK}
                           _dark={{ color: COLORS.WHITE }}
-                          address={targetTxHash}
+                          address={destinationTxHash}
                           parts={2}
                         />
                       ) : (

renderer/intl/locales/en-US.json

@@ -26,6 +26,9 @@
   "/km2Zu": {
     "message": "Import Account"
   },
+  "/nrkEG": {
+    "message": "The fee for transacting on the destination network"
+  },
   "/tbC+S": {
     "description": "Button to export account in the specified format",
     "message": "Export Account"
@@ -69,9 +72,6 @@
   "2qzbcD": {
     "message": "Min Peers"
   },
-  "3+EYHL": {
-    "message": "Target Network"
-  },
   "3/a0Ho": {
     "message": "We're not able to download release notes right now."
   },
@@ -168,6 +168,9 @@
   "7N6OYQ": {
     "message": "View Transaction"
   },
+  "7Qw9T7": {
+    "message": "Destination Network"
+  },
   "8GvVWZ": {
     "message": "Something went wrong, please try again."
   },
@@ -249,9 +252,6 @@
   "D5NqQO": {
     "message": "Memo"
   },
-  "DOMotB": {
-    "message": "Target Address"
-  },
   "Dh1MGS": {
     "message": "Account Syncing"
   },
@@ -859,9 +859,6 @@
   "rqrhXg": {
     "message": "Confirm Your Recovery Phrase"
   },
-  "ru6717": {
-    "message": "The fee for transacting on the target network"
-  },
   "sXlL42": {
     "message": "Encrypted Wallets Unsupported"
   },

renderer/utils/chainport/useChainportTransactionStatus.ts

@@ -19,10 +19,10 @@ const chainportStatusMessages = defineMessages({
     defaultMessage: "Submitted",
   },
   bridge_pending: {
-    defaultMessage: "Preparing target txn",
+    defaultMessage: "Preparing destination txn",
   },
   bridge_submitted: {
-    defaultMessage: "Submitted target txn",
+    defaultMessage: "Submitted destination txn",
   },
   complete: {
     defaultMessage: "Complete",