Minor UX tweaks + allowing the bridge form to work even if user has no bridgable assets (#224)

Author: dgca

renderer/components/BridgeAssetsForm/BridgeAssetsForm.tsx

@@ -77,12 +77,14 @@ function BridgeAssetsFormContent({
   }, [accountsData]);
 
   const defaultFromAccount = accountOptions[0]?.value;
-  const defaultAssetId = accountsData[0]?.balances.iron.asset.id;
+  const defaultAssetId =
+    accountsData[0]?.balances.iron.asset.id ||
+    Object.values(chainportTokensMap)[0]?.ironfishId;
   const defaultDestinationNetwork =
     chainportTokensMap[defaultAssetId]?.targetNetworks[0].value.toString();
 
   if (!defaultDestinationNetwork) {
-    throw new Error("No default destination network found");
+    console.error("No default destination network found.");
   }
 
   const {
@@ -144,7 +146,7 @@ function BridgeAssetsFormContent({
         const isBridgableForNetwork = chainportTokensMap[
           item.asset.id
         ]?.targetNetworks.some(
-          (network) => network.chainId === currentNetwork.chainId,
+          (network) => network.chainId === currentNetwork?.chainId,
         );
         return {
           ...item,
@@ -171,7 +173,7 @@ function BridgeAssetsFormContent({
   const availableNetworks = chainportTokensMap[assetIdValue]?.targetNetworks;
 
   if (!availableNetworks) {
-    throw new Error("No available networks found");
+    console.error("No available networks found");
   }
 
   const selectedAsset = assetOptionsMap.get(assetIdValue);
@@ -335,11 +337,11 @@ function BridgeAssetsFormContent({
               {...register("destinationNetwork")}
               value={destinationNetworkValue}
               label={formatMessage(messages.destinationNetwork)}
-              options={availableNetworks}
+              options={availableNetworks ?? []}
               renderChildren={(children) => (
                 <HStack>
                   <ChakraImage
-                    src={currentNetwork.networkIcon}
+                    src={currentNetwork?.networkIcon}
                     boxSize="24px"
                   />
                   {children}

renderer/components/BridgeAssetsForm/BridgeConfirmationModal/StepIdle.tsx

@@ -162,6 +162,7 @@ export function StepIdle({
             display="flex"
             alignItems="center"
             justifyContent="center"
+            mx={8}
           >
             <Flex
               bg="#F3DEF5"

renderer/components/BridgeTransactionInformation/BridgeTransactionInformation.tsx

@@ -67,7 +67,9 @@ export function BridgeTransactionInformation({ transaction, ...rest }: Props) {
         ?.explorer_url;
 
     return {
-      href: baseUrl + "tx/" + chainportStatus.target_tx_hash,
+      href: baseUrl
+        ? baseUrl + "tx/" + chainportStatus.target_tx_hash
+        : undefined,
       txHash: chainportStatus.target_tx_hash,
     };
   }, [chainportMeta, chainportStatus]);

renderer/components/BridgeTransactionInformation/BridgeTransactionInformationShell.tsx

@@ -68,6 +68,7 @@ export function BridgeTransactionInformationShell({
 }: Props) {
   const { formatMessage } = useIntl();
   const isSend = type === "send";
+
   return (
     <Box {...rest}>
       <Heading as="h3" fontSize="2xl" mb={8}>