Updated subscription type handling on frontend

Including icon changes (icon_url being passed from backend).

frontend/src/components/NewModalSubscripton.js

@@ -94,13 +94,12 @@ const NewSubscription = ({ isFreeOption, onClose }) => {
 
           <FormControl isInvalid={errors.subscription_type}>
             <HStack {...group} alignItems="stretch">
-              {typesCache.data.subscriptions.map((type) => {
+              {typesCache.data.map((type) => {
                 const radio = getRadioProps({
                   value: type.id,
                   isDisabled:
                     !type.active ||
-                    (isFreeOption &&
-                      type.subscription_type !== "ethereum_blockchain"),
+                    (isFreeOption && type.id !== "ethereum_blockchain"),
                 });
                 return (
                   <RadioCard key={`subscription_type_${type.id}`} {...radio}>

frontend/src/components/NewSubscription.js

@@ -103,13 +103,12 @@ const _NewSubscription = ({ isFreeOption, onClose, setIsLoading }) => {
 
         <FormControl isInvalid={errors?.subscription_type}>
           <HStack {...group} alignItems="stretch">
-            {typesCache.data.subscriptions.map((type) => {
+            {typesCache.data.map((type) => {
               const radio = getRadioProps({
                 value: type.id,
                 isDisabled:
                   !type.active ||
-                  (isFreeOption &&
-                    type.subscription_type !== "ethereum_blockchain"),
+                  (isFreeOption && type.id !== "ethereum_blockchain"),
               });
               return (
                 <RadioCard key={`subscription_type_${type.id}`} {...radio}>

frontend/src/components/SubscriptionsList.js

@@ -22,8 +22,12 @@ import ConfirmationRequest from "./ConfirmationRequest";
 import ColorSelector from "./ColorSelector";
 
 const SubscriptionsList = ({ emptyCTA }) => {
-  const { subscriptionsCache, updateSubscription, deleteSubscription } =
-    useSubscriptions();
+  const {
+    subscriptionsCache,
+    updateSubscription,
+    deleteSubscription,
+    subscriptionTypeIcons,
+  } = useSubscriptions();
 
   const updateCallback = ({ id, label, color }) => {
     const data = { id: id };
@@ -61,27 +65,8 @@ const SubscriptionsList = ({ emptyCTA }) => {
         </Thead>
         <Tbody>
           {subscriptionsCache.data.subscriptions.map((subscription) => {
-            let iconLink;
-            switch (subscription.subscription_type_id) {
-              case "0":
-                iconLink =
-                  "https://ethereum.org/static/c48a5f760c34dfadcf05a208dab137cc/31987/eth-diamond-rainbow.png";
-                break;
-              case `ethereum_txpool`:
-                iconLink =
-                  "https://ethereum.org/static/a183661dd70e0e5c70689a0ec95ef0ba/31987/eth-diamond-purple.png";
-                break;
-              case `algorand_blockchain`:
-                iconLink =
-                  "https://www.algorand.com/assets/media-kit/logos/logo-marks/png/algorand_logo_mark_black.png";
-                break;
-              case `algorand_txpool`:
-                iconLink =
-                  "https://www.algorand.com/assets/media-kit/logos/logo-marks/png/algorand_logo_mark_white.png";
-                break;
-              default:
-                console.error("no icon found for this pool");
-            }
+            const iconLink =
+              subscriptionTypeIcons[subscription.subscription_type_id];
             return (
               <Tr key={`token-row-${subscription.id}`}>
                 <Td>

frontend/src/core/hooks/useSubscriptions.js

@@ -1,14 +1,17 @@
+import { useState, useEffect } from "react";
+import { useQuery } from "react-query";
 import { SubscriptionsService } from "../services";
 import { useMutation } from "react-query";
 import { useToast } from ".";
 import { queryCacheProps } from "./hookCommon";
 import useStripe from "./useStripe";
-import { useQuery } from "react-query";
 
 const useSubscriptions = () => {
   const toast = useToast();
   const stripe = useStripe();
 
+  const [subscriptionTypeIcons, setSubscriptionTypeIcons] = useState({});
+
   const getSubscriptions = async () => {
     const response = await SubscriptionsService.getSubscriptions();
     return response.data;
@@ -23,7 +26,11 @@ const useSubscriptions = () => {
 
   const getSubscriptionTypes = async () => {
     const response = await SubscriptionsService.getTypes();
-    return response.data;
+    let result = [];
+    if (response.data.subscription_types) {
+      result = response.data.subscription_types;
+    }
+    return result;
   };
 
   const typesCache = useQuery(["subscription_types"], getSubscriptionTypes, {
@@ -33,6 +40,17 @@ const useSubscriptions = () => {
     },
   });
 
+  useEffect(() => {
+    let icons = {};
+    if (typesCache.data) {
+      typesCache.data.forEach(
+        (subscriptionType) =>
+          (icons[subscriptionType.id] = subscriptionType.icon_url)
+      );
+      setSubscriptionTypeIcons(icons);
+    }
+  }, [typesCache.data]);
+
   const createSubscription = useMutation(
     SubscriptionsService.createSubscription(),
     {
@@ -76,6 +94,7 @@ const useSubscriptions = () => {
     typesCache,
     updateSubscription,
     deleteSubscription,
+    subscriptionTypeIcons,
   };
 };