Clean up versioning and packageJson uses (#6196)

src/renderer/components/+welcome/welcome.tsx

@@ -10,12 +10,13 @@ import type { IComputedValue } from "mobx";
 import type { CarouselProps } from "react-material-ui-carousel";
 import LegacyCarousel from "react-material-ui-carousel";
 import { Icon } from "../icon";
-import { productName, slackUrl } from "../../../common/vars";
+import { slackUrl } from "../../../common/vars";
 import { withInjectables } from "@ogre-tools/injectable-react";
 import welcomeMenuItemsInjectable from "./welcome-menu-items/welcome-menu-items.injectable";
 import type { WelcomeMenuRegistration } from "./welcome-menu-items/welcome-menu-registration";
 import welcomeBannerItemsInjectable from "./welcome-banner-items/welcome-banner-items.injectable";
 import type { WelcomeBannerRegistration } from "./welcome-banner-items/welcome-banner-registration";
+import productNameInjectable from "../../../common/vars/product-name.injectable";
 
 export const defaultWidth = 320;
 
@@ -25,9 +26,14 @@ const Carousel = LegacyCarousel as React.ComponentType<CarouselProps>;
 interface Dependencies {
   welcomeMenuItems: IComputedValue<WelcomeMenuRegistration[]>;
   welcomeBannerItems: IComputedValue<WelcomeBannerRegistration[]>;
+  productName: string;
 }
 
-const NonInjectedWelcome = observer(({ welcomeMenuItems, welcomeBannerItems }: Dependencies) => {
+const NonInjectedWelcome = observer(({
+  welcomeMenuItems,
+  welcomeBannerItems,
+  productName,
+}: Dependencies) => {
   const welcomeBanners = welcomeBannerItems.get();
 
   // if there is banner with specified width, use it to calculate the width of the container
@@ -129,5 +135,6 @@ export const Welcome = withInjectables<Dependencies>(NonInjectedWelcome, {
   getProps: (di) => ({
     welcomeMenuItems: di.inject(welcomeMenuItemsInjectable),
     welcomeBannerItems: di.inject(welcomeBannerItemsInjectable),
+    productName: di.inject(productNameInjectable),
   }),
 });