AKASHAorg · quininez · Feb 12, 2025 · Feb 13, 2025 · Feb 20, 2025 · Feb 20, 2025
diff --git a/extensions/apps/world-builder/src/components/app-routes/index.tsx b/extensions/apps/world-builder/src/components/app-routes/index.tsx
@@ -14,7 +14,7 @@ import {
   WorldConfigFormStep1Page,
   WorldConfigFormStep2Page,
   ConfigSuccessPage,
-  WorldCustomizeFormPage,
+  WorldCustomiseFormPage,
   WorldCreateFormPage,
   CreateSuccessPage,
 } from '../pages/index';
@@ -59,7 +59,7 @@ const configSuccessRoute = createRoute({
     return { worldId: search.worldId as string, worldName: search.worldName as string };
   },
   component: () => {
-    const { worldId, worldName } = createSuccessRoute.useSearch();
+    const { worldId, worldName } = configSuccessRoute.useSearch();
     return (
       <CatchBoundary
         getResetKey={() => 'config_success_main_reset'}
@@ -168,7 +168,7 @@ const worldCustomizeRoute = createRoute({
         getResetKey={() => 'world_customize_form_main_reset'}
         errorComponent={RouteErrorComponent}
       >
-        <WorldCustomizeFormPage />
+        <WorldCustomiseFormPage />
       </CatchBoundary>
     );
   },

diff --git a/extensions/apps/world-builder/src/components/pages/index.ts b/extensions/apps/world-builder/src/components/pages/index.ts
@@ -5,4 +5,4 @@ export * from './world-config/world-config-main-page';
 export * from './world-config/world-config-form-step1';
 export * from './world-config/world-config-form-step2';
 export * from './world-config/config-success';
-export * from './world-customize/world-customize-form';
+export * from './world-customise/world-customise-form';
diff --git a/extensions/apps/world-builder/src/components/pages/main/dashboard.tsx b/extensions/apps/world-builder/src/components/pages/main/dashboard.tsx
@@ -16,17 +16,32 @@ import {
 } from '@akashaorg/ui/lib/akasha-components/error-loader';
 import { Typography } from '@akashaorg/ui/lib/akasha-components/typography';
 import { Button } from '@akashaorg/ui/lib/akasha-components/button';
-import { useAkashaStore, useRootComponentProps } from '@akashaorg/ui-core-hooks';
+import { Separator } from '@akashaorg/ui/lib/components/separator';
+import { transformSource, useAkashaStore, useRootComponentProps } from '@akashaorg/ui-core-hooks';
 import { HOME } from '../../../routes';
 import { LandingPageComponent } from './landing-page-component';
 import {
+  useGetWorldConfigExtensionsQuery,
   useGetWorldConfigQuery,
+  useGetWorldFullInfoQuery,
   useGetWorldsByCreatorDidQuery,
 } from '@akashaorg/ui-core-hooks/lib/generated';
 import { Eye, Loader2, Pencil } from 'lucide-react';
 import { Stack } from '@akashaorg/ui/lib/akasha-components/stack';
 import { selectWorldData } from '@akashaorg/ui-core-hooks/lib/selectors/get-worlds-by-creator-did-query';
-import { selectWorldConfigData } from '@akashaorg/ui-core-hooks/lib/selectors/get-world-config-query';
+import {
+  selectWorldConfigData,
+  selectWorldMetaInfoData,
+} from '@akashaorg/ui-core-hooks/lib/selectors/get-world-full-info-query';
+import { selectWorldConfigData as selectWorldConfigInfo } from '@akashaorg/ui-core-hooks/lib/selectors/get-world-config-query';
+import { selectWorldConfigExtensions } from '@akashaorg/ui-core-hooks/lib/selectors/get-world-config-extensions-query';
+import {
+  ExtensionAvatar,
+  ExtensionAvatarFallback,
+  ExtensionAvatarImage,
+} from '@/ui/extension-avatar';
+import { Image } from '@akashaorg/ui/lib/akasha-components/image';
+import { IconContainer } from '@akashaorg/ui/lib/akasha-components/icon-container';
 
 export const DashboardPage: React.FC = () => {
   const navigate = useNavigate();
@@ -60,6 +75,15 @@ export const DashboardPage: React.FC = () => {
 
   const worldData = selectWorldData(worldsByCreatorDidReq);
 
+  const {
+    data: worldFullInfoReq,
+    loading: loadingWorldFullInfoQuery,
+    error: worldFullInfoError,
+  } = useGetWorldFullInfoQuery({
+    variables: { id: worldData?.id, creator: worldData?.creator?.id },
+    skip: !worldData?.id,
+  });
+
   const {
     data: worldConfigReq,
     loading: loadingWorldConfigQuery,
@@ -69,16 +93,37 @@ export const DashboardPage: React.FC = () => {
     skip: !worldData?.id,
   });
 
-  const worldConfig = selectWorldConfigData(worldConfigReq);
+  const worldConfig = selectWorldConfigInfo(worldConfigReq);
+  const worldMetaInfo = selectWorldMetaInfoData(worldFullInfoReq);
+
+  const {
+    data: worldConfigExtensionsReq,
+    loading: loadingWorldConfigExtensionsQuery,
+    error: worldConfigExtensionsError,
+  } = useGetWorldConfigExtensionsQuery({
+    variables: { configID: worldConfig?.id },
+    skip: !worldConfig?.id,
+  });
+
+  const worldConfigExtensions = selectWorldConfigExtensions(worldConfigExtensionsReq);
 
-  const handleNavToConfigfForm = () => {
+  const handleNavToConfigForm = () => {
     navigate({ to: '/world-config-form/$worldId/step1', params: { worldId: worldData?.id } });
   };
 
+  const handleNavToCustomiseForm = () => {
+    navigate({ to: '/world-customize-form', params: { worldId: worldData?.id } });
+  };
+
   const handleNavToWorldCreate = () => {
     navigate({ to: '/world-create-form' });
   };
 
+  const getExtensionDataById = (extId: string) => {
+    const extension = worldConfigExtensions?.find(ext => ext.extensionID === extId);
+    return extension?.extension;
+  };
+
   if (!authenticatedDID) {
     return (
       <ErrorLoader type="not-authenticated">
@@ -122,32 +167,135 @@ export const DashboardPage: React.FC = () => {
           </CardDescription>
         </CardHeader>
         <CardContent className="flex-col gap-4">
-          <Stack direction="column" spacing={4}>
-            <Stack direction="row" justifyContent="between">
-              <Typography variant="h6">{worldData?.name}</Typography>
-              <Button variant="outline" size="sm">
-                <Eye />
-                {t('Preview')}
-              </Button>
+          <Stack direction="row" spacing={4}>
+            <ExtensionAvatar size="xl" extensionId={worldData?.id}>
+              <ExtensionAvatarImage src={transformSource(worldData?.icon?.default)?.src} />
+              <ExtensionAvatarFallback />
+            </ExtensionAvatar>
+            <Stack direction="column" spacing={4}>
+              <Stack direction="row" justifyContent="between">
+                <Typography variant="h6">{worldData?.name}</Typography>
+                <Button variant="outline" size="sm">
+                  <Eye />
+                  {t('Preview')}
+                </Button>
+              </Stack>
+              <Typography variant="sm">
+                {t(
+                  'Your world doesn’t have a description yet! Let’s bring it to life by adding one in the World Customizer section.',
+                )}
+              </Typography>
             </Stack>
-            <Typography variant="sm">
-              {t(
-                'Your world doesn’t have a description yet! Let’s bring it to life by adding one in the World Customizer section.',
-              )}
-            </Typography>
           </Stack>
           <Stack direction="column" spacing={4}>
-            <Stack direction="row" justifyContent="between">
+            <Stack direction="row" justifyContent="between" alignItems="center">
               <Typography variant="h6">{t('World Creation')}</Typography>
-              <Button onClick={handleNavToWorldCreate}>
-                <Pencil />
-              </Button>
+              <button onClick={handleNavToWorldCreate}>
+                <IconContainer className="bg-secondary">
+                  <Pencil />
+                </IconContainer>
+              </button>
             </Stack>
+            {worldData?.extensionPublishers?.length > 0 && (
+              <Stack direction="column" spacing={2}>
+                <Typography variant="sm" bold>
+                  {t('Extension Publishers')}
+                </Typography>
+                <div className="flex flex-wrap gap-2">
+                  {worldData?.extensionPublishers?.map((extPublisher, idx) => (
+                    <Typography key={idx} variant="sm">
+                      {extPublisher?.id}
+                    </Typography>
+                  ))}
+                </div>
+              </Stack>
+            )}
+            {worldData?.icon && (
+              <Stack direction="column" spacing={2}>
+                <Typography variant="sm" bold>
+                  {t('Icon')}
+                </Typography>
+                <Image
+                  width={24}
+                  height={24}
+                  src={transformSource(worldData?.icon?.default)?.src}
+                />
+              </Stack>
+            )}
+            {worldData?.instanceURL && (
+              <Stack direction="column" spacing={2}>
+                <Typography variant="sm" bold>
+                  {t('Instance URL')}
+                </Typography>
+                <Typography variant="sm">{worldData?.instanceURL}</Typography>
+              </Stack>
+            )}
           </Stack>
+          <Separator />
           <Stack direction="column" spacing={4}>
-            <Stack direction="row" justifyContent="between">
+            <Stack direction="row" justifyContent="between" alignItems="center">
               <Typography variant="h6">{t('World Config')}</Typography>
-              <Button onClick={handleNavToConfigfForm}>{t('Configure World')}</Button>
+
+              {worldConfig?.id ? (
+                <button onClick={handleNavToConfigForm}>
+                  <IconContainer className="bg-secondary">
+                    <Pencil />
+                  </IconContainer>
+                </button>
+              ) : (
+                <Button onClick={handleNavToConfigForm}>{t('Configure World')}</Button>
+              )}
+            </Stack>
+            <Stack direction="column" spacing={2}>
+              <Typography variant="sm" bold>
+                {t('Layout')}
+              </Typography>
+              <Typography variant="sm">
+                {getExtensionDataById(worldConfig?.layoutExtension)?.displayName}
+              </Typography>
+            </Stack>
+            <Stack direction="column" spacing={2}>
+              <Typography variant="sm" bold>
+                {t('Extension App')}
+              </Typography>
+              <Typography variant="sm">
+                {getExtensionDataById(worldConfig?.registryExtension)?.displayName}
+              </Typography>
+            </Stack>
+            <Stack direction="column" spacing={2}>
+              <Typography variant="sm" bold>
+                {t('World Extensions')}
+              </Typography>
+              <div className="flex flex-wrap gap-2">
+                {worldConfigExtensions?.map((extension, idx) => (
+                  <Typography key={idx} variant="sm">
+                    {extension?.extension?.displayName}
+                  </Typography>
+                ))}
+              </div>
+            </Stack>
+            <Stack direction="column" spacing={2}>
+              <Typography variant="sm" bold>
+                {t('Homepage')}
+              </Typography>
+              <Typography variant="sm">
+                {getExtensionDataById(worldConfig?.homepageExtension)?.displayName}
+              </Typography>
+            </Stack>
+          </Stack>
+          <Separator />
+          <Stack direction="column" spacing={4}>
+            <Stack direction="row" justifyContent="between" alignItems="center">
+              <Typography variant="h6">{t('World Customisation')}</Typography>
+              {worldMetaInfo?.id ? (
+                <button onClick={handleNavToCustomiseForm}>
+                  <IconContainer className="bg-secondary">
+                    <Pencil />
+                  </IconContainer>
+                </button>
+              ) : (
+                <Button onClick={handleNavToCustomiseForm}>{t('Customise World')}</Button>
+              )}
             </Stack>
           </Stack>
         </CardContent>

diff --git a/extensions/apps/world-builder/src/components/pages/world-config/config-success.tsx b/extensions/apps/world-builder/src/components/pages/world-config/config-success.tsx
@@ -55,7 +55,7 @@ export const ConfigSuccessPage: React.FC<ConfigSuccessPageProps> = ({ worldId, w
         <Typography variant="p">{t(`The preview will open in a new tab`)}</Typography>
       </CardDescription>
       <CardFooter>
-        <Button className="px-6" onClick={handleNavToDashboard}>
+        <Button variant="outline" className="px-6" onClick={handleNavToDashboard}>
           {t('Do it later')}
         </Button>
         <Button className="px-6" onClick={handleOpenPreview}>

diff --git a/extensions/apps/world-builder/src/components/pages/world-config/world-config-form-step1.tsx b/extensions/apps/world-builder/src/components/pages/world-config/world-config-form-step1.tsx
@@ -1,4 +1,4 @@
-import React, { useContext } from 'react';
+import React, { useContext, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from '@tanstack/react-router';
 import { Button } from '@akashaorg/ui/lib/akasha-components/button';
@@ -32,6 +32,12 @@ import {
 } from '@akashaorg/ui/lib/akasha-components/form';
 import { useAtom } from 'jotai';
 import { AtomContext, FormData } from './world-config-main-page';
+import {
+  useGetWorldByIdQuery,
+  useGetWorldConfigQuery,
+} from '@akashaorg/ui-core-hooks/lib/generated';
+import { selectWorldData } from '@akashaorg/ui-core-hooks/lib/selectors/get-world-by-id-query';
+import { selectWorldConfigData } from '@akashaorg/ui-core-hooks/lib/selectors/get-world-config-query';
 
 type WorldConfigFormStep1Props = {
   worldId: string;
@@ -42,6 +48,29 @@ export const WorldConfigFormStep1Page: React.FC<WorldConfigFormStep1Props> = ({
 
   const navigate = useNavigate();
 
+  const {
+    data: getWorldByIdReq,
+    loading: loadingWorldByIdQuery,
+    error: getWorldByIdError,
+  } = useGetWorldByIdQuery({
+    variables: {
+      id: worldId,
+    },
+  });
+
+  const worldData = selectWorldData(getWorldByIdReq);
+
+  const {
+    data: worldConfigReq,
+    loading: loadingWorldConfigQuery,
+    error: worldConfigError,
+  } = useGetWorldConfigQuery({
+    variables: { worldID: worldData?.id },
+    skip: !worldData?.id,
+  });
+
+  const worldConfig = selectWorldConfigData(worldConfigReq);
+
   // TODO: use hooks to fetch realtime data and provide alternative options
   const registryExtensionOptions = [
     {
@@ -64,13 +93,22 @@ export const WorldConfigFormStep1Page: React.FC<WorldConfigFormStep1Props> = ({
   const form = useForm<z.infer<typeof FormSchema>>({
     resolver: zodResolver(FormSchema),
     defaultValues: {
-      layoutExtension: '',
-      registryExtension: '',
+      layoutExtension: worldConfig?.layoutExtension || '',
+      registryExtension: worldConfig?.registryExtension || '',
     },
     mode: 'onChange',
   });
 
-  const { isDirty, isValid } = form.formState;
+  const { isValid } = form.formState;
+
+  useEffect(() => {
+    if (worldConfig?.layoutExtension) {
+      form.setValue('layoutExtension', worldConfig?.layoutExtension);
+    }
+    if (worldConfig?.registryExtension) {
+      form.setValue('registryExtension', worldConfig?.registryExtension);
+    }
+  }, [worldConfig, form]);
 
   const handleCancel = () => {
     navigate({ to: '/dashboard' });
@@ -113,7 +151,11 @@ export const WorldConfigFormStep1Page: React.FC<WorldConfigFormStep1Props> = ({
                     )}
                   </FormDescription>
 
-                  <Select onValueChange={field.onChange} required>
+                  <Select
+                    onValueChange={field.onChange}
+                    required
+                    value={field.value || worldConfig?.layoutExtension}
+                  >
                     <FormControl>
                       <SelectTrigger className="w-full">
                         <SelectValue placeholder={t('Select a layout extension')} />
@@ -143,7 +185,11 @@ export const WorldConfigFormStep1Page: React.FC<WorldConfigFormStep1Props> = ({
                       `Choose the default extension app where you will find installable extensions and publish yours.`,
                     )}
                   </FormDescription>
-                  <Select onValueChange={field.onChange} required>
+                  <Select
+                    onValueChange={field.onChange}
+                    required
+                    value={field.value || worldConfig?.registryExtension}
+                  >
                     <FormControl>
                       <SelectTrigger className="w-full">
                         <SelectValue placeholder={t('Select a registry extension')} />
@@ -166,7 +212,7 @@ export const WorldConfigFormStep1Page: React.FC<WorldConfigFormStep1Props> = ({
             <Button className="px-6" variant="outline" onClick={handleCancel}>
               {t('Cancel')}
             </Button>
-            <Button type="submit" className="px-6" disabled={!isDirty || !isValid}>
+            <Button type="submit" className="px-6" disabled={!isValid}>
               {t('Next')}
             </Button>
           </CardFooter>