Various bridge page improvements (#274)

* Fix bridge confirmation modal icon bg in dark mode

* Add link to Chainport terms of service

* Change Receiving to estimate with tooltip

* Change destination chain to target network

Author: dguenther

renderer/components/BridgeAssetsForm/BridgeConfirmationModal/StepIdle.tsx

@@ -6,6 +6,7 @@ import {
   Flex,
   Code,
   Text,
+  Box,
 } from "@chakra-ui/react";
 import { UseTRPCQueryResult } from "@trpc/react-query/dist/shared";
 import { ReactNode } from "react";
@@ -30,6 +31,10 @@ const messages = defineMessages({
   bridgeProviderLabel: {
     defaultMessage: "Bridge Provider",
   },
+  bridgeProviderTerms: {
+    defaultMessage:
+      "By bridging your assets, you agree to Chainport's <link>terms of service</link>.",
+  },
   sourceNetworkLabel: {
     defaultMessage: "Source Network",
   },
@@ -40,7 +45,11 @@ const messages = defineMessages({
     defaultMessage: "Sending",
   },
   receivingLabel: {
-    defaultMessage: "Receiving",
+    defaultMessage: "Receiving (Estimated)",
+  },
+  receivingTooltip: {
+    defaultMessage:
+      "Sending amount minus the bridge fee. This is an estimate, and you may receive a slightly different amount.",
   },
   targetAddressLabel: {
     defaultMessage: "Target Address",
@@ -49,7 +58,7 @@ const messages = defineMessages({
     defaultMessage: "Gas fee",
   },
   gasFeeTooltip: {
-    defaultMessage: "The fee for transacting on the destination chain",
+    defaultMessage: "The fee for transacting on the target network",
   },
   bridgeFeeLabel: {
     defaultMessage: "Bridge fee",
@@ -125,6 +134,27 @@ export function StepIdle({
           href="https://www.chainport.io/"
         />
 
+        <Text
+          color={COLORS.GRAY_MEDIUM}
+          _dark={{
+            color: COLORS.DARK_MODE.GRAY_LIGHT,
+          }}
+        >
+          {formatMessage(messages.bridgeProviderTerms, {
+            link: (msg: ReactNode) => (
+              <Box
+                as="a"
+                rel="noreferrer"
+                target="_blank"
+                textDecoration="underline"
+                href="https://www.chainport.io/terms-of-services"
+              >
+                {msg}
+              </Box>
+            ),
+          })}
+        </Text>
+
         <Divider />
 
         <Grid templateColumns="auto 1fr auto">
@@ -152,9 +182,11 @@ export function StepIdle({
             mx={8}
           >
             <Flex
+              _dark={{
+                bg: "#431848",
+              }}
               bg="#F3DEF5"
               color={COLORS.ORCHID}
-              border="3px solid white"
               borderRadius={4}
               alignItems="center"
               justifyContent="center"
@@ -175,6 +207,7 @@ export function StepIdle({
             <LineItem
               label={formatMessage(messages.receivingLabel)}
               content={amountReceiving}
+              tooltip={formatMessage(messages.receivingTooltip)}
               icon={chainportIcon}
             />
           </GridItem>

renderer/intl/locales/en-US.json

@@ -93,6 +93,9 @@
   "3euoRJ": {
     "message": "Recovery Phrase"
   },
+  "3v74IM": {
+    "message": "By bridging your assets, you agree to Chainport's <link>terms of service</link>."
+  },
   "47FYwb": {
     "message": "Cancel"
   },
@@ -150,6 +153,9 @@
   "6q3tCn": {
     "message": "Connecting"
   },
+  "6ugwQB": {
+    "message": "Receiving (Estimated)"
+  },
   "7/GPHF": {
     "message": "Iron Fish transaction fee"
   },
@@ -340,6 +346,9 @@
     "description": "Change as in the money that is returned to the sender after a transaction",
     "message": "Change"
   },
+  "KIbwgQ": {
+    "message": "Sending amount minus the bridge fee. This is an estimate, and you may receive a slightly different amount."
+  },
   "KJMlfb": {
     "message": "Destination network"
   },
@@ -433,9 +442,6 @@
   "OC6jXV": {
     "message": "Transaction Expiration Delta"
   },
-  "OEEl0G": {
-    "message": "Receiving"
-  },
   "OfA95/": {
     "message": "Selected file: {fileName}"
   },
@@ -655,9 +661,6 @@
   "c/KktL": {
     "message": "Resources"
   },
-  "cwqQqt": {
-    "message": "The fee for transacting on the destination chain"
-  },
   "dJMieh": {
     "message": "Connect account"
   },
@@ -868,6 +871,9 @@
   "rqrhXg": {
     "message": "Confirm Your Recovery Phrase"
   },
+  "ru6717": {
+    "message": "The fee for transacting on the target network"
+  },
   "sXlL42": {
     "message": "Encrypted Wallets Unsupported"
   },