Add subscription type name to tooltip.

frontend/src/components/SubscriptionsList.js

@@ -35,6 +35,7 @@ const SubscriptionsList = ({ emptyCTA }) => {
     updateSubscription,
     deleteSubscription,
     subscriptionTypeIcons,
+    subscriptionTypeNames,
   } = useSubscriptions();
 
   const updateCallback = ({ id, label, color }) => {
@@ -79,7 +80,12 @@ const SubscriptionsList = ({ emptyCTA }) => {
             return (
               <Tr key={`token-row-${subscription.id}`}>
                 <Td>
-                  <Tooltip label="Ethereum blockchain" fontSize="md">
+                  <Tooltip
+                    label={`${
+                      subscriptionTypeNames[subscription.subscription_type_id]
+                    }`}
+                    fontSize="md"
+                  >
                     <Image h="32px" src={iconLink} alt="pool icon" />
                   </Tooltip>
                 </Td>

frontend/src/core/hooks/useSubscriptions.js

@@ -11,6 +11,7 @@ const useSubscriptions = () => {
   const stripe = useStripe();
 
   const [subscriptionTypeIcons, setSubscriptionTypeIcons] = useState({});
+  const [subscriptionTypeNames, setSubscriptionTypeNames] = useState({});
 
   const getSubscriptions = async () => {
     const response = await SubscriptionsService.getSubscriptions();
@@ -42,11 +43,13 @@ const useSubscriptions = () => {
 
   useEffect(() => {
     let icons = {};
+    let display_names = {};
     if (typesCache.data) {
-      typesCache.data.forEach(
-        (subscriptionType) =>
-          (icons[subscriptionType.id] = subscriptionType.icon_url)
-      );
+      typesCache.data.forEach((subscriptionType) => {
+        icons[subscriptionType.id] = subscriptionType.icon_url;
+        display_names[subscriptionType.id] = subscriptionType.name;
+      });
+      setSubscriptionTypeNames(display_names);
       setSubscriptionTypeIcons(icons);
     }
   }, [typesCache.data]);
@@ -95,6 +98,7 @@ const useSubscriptions = () => {
     updateSubscription,
     deleteSubscription,
     subscriptionTypeIcons,
+    subscriptionTypeNames,
   };
 };