add plugin props

locales/de.json

@@ -133,5 +133,8 @@
   "Issuance": {
     "title": "Ausgabe",
     "select": "Wählen"
+  },
+  "Plugin": {
+    "not-found": "Plugin nicht gefunden"
   }
 }

locales/en.json

@@ -133,5 +133,8 @@
   "Issuance": {
     "title": "Issuance",
     "select": "Select"
+  },
+  "Plugin": {
+    "not-found": "Plugin not found"
   }
 }
\ No newline at end of file

src/app/[locale]/wallet/plugins/[plugin]/page.tsx

@@ -3,6 +3,8 @@
 import { RemoteComponent } from '@/RemoteComponent';
 import { type Plugin as IPlugin } from '@/components/side-menu/WalletSideMenu';
 import { useQueryClient } from '@tanstack/react-query';
+import { useTranslations } from 'next-intl';
+import { useAuth } from 'oidc-react';
 import { useEffect, useState } from 'react';
 
 interface PluginProps {
@@ -14,6 +16,13 @@ interface PluginProps {
 const Plugin = ({ params }: PluginProps): JSX.Element => {
   const [PluginComponent, setPluginComponent] = useState<JSX.Element>();
   const pluginDiscoveryData = useQueryClient().getQueryData<IPlugin[]>(['pluginDiscovery']);
+  const t = useTranslations('Plugin');
+  const { userData } = useAuth();
+  const pluginMetadata = {
+    example1: 'Example 1',
+    example2: 'Example 2',
+    example3: 'Example 3',
+  };
 
   const fetchPluginData = (pluginDiscovery: IPlugin[], pluginRoute: string): void => {
     const foundPlugin = pluginDiscovery.find(plugin => plugin.route === pluginRoute);
@@ -22,12 +31,18 @@ const Plugin = ({ params }: PluginProps): JSX.Element => {
       process.env.NODE_ENV !== 'development' ? process.env.ENV_URL : 'https://cloud-wallet.xfsc.dev'
     }/api/dynamic/plugins${foundPlugin?.url}/main.js`;
 
-    setPluginComponent(<RemoteComponent url={url} />);
+    setPluginComponent(
+      <RemoteComponent
+        url={url}
+        token={userData?.access_token}
+        metadata={pluginMetadata}
+      />
+    );
   };
 
   useEffect(() => {
     if (!pluginDiscoveryData) {
-      setPluginComponent(<div>Plugin not found</div>);
+      setPluginComponent(<div>{t('not-found')}</div>);
     } else {
       fetchPluginData(pluginDiscoveryData, params.plugin);
     }