Merge branch 'feature/we-1872-add-a-possibility-to-add-emergency-bann…

…er-to-landing-with' of github.com:lidofinance/lido-cms into feature/we-1872-add-a-possibility-to-add-emergency-banner-to-landing-with
lidofinance · Jan 29, 2025 · 120e013 · 120e013
2 parents d401f18 + 1a63bc5
commit 120e013
Show file tree

Hide file tree

Showing 4 changed files with 50 additions and 0 deletions.
diff --git a/features/cms/initialize/collections/stethInDefiConfig/files/project.ts b/features/cms/initialize/collections/stethInDefiConfig/files/project.ts
@@ -54,6 +54,30 @@ export const project: CmsCollectionFile = {
         },
       ],
     },
+    {
+      name: "networks",
+      label: "Networks",
+      widget: "list",
+      label_singular: "new network",
+      summary: "{{fields.label}}",
+      fields: [
+        {
+          name: "id",
+          widget: "uuid",
+          hide: true,
+        } as unknown as CmsField,
+        {
+          label: "Logo",
+          name: "logo",
+          widget: "svg",
+        } as unknown as CmsField,
+        {
+          label: "Label",
+          name: "label",
+          widget: "string",
+        },
+      ],
+    },
     {
       name: "additionalRewards",
       label: "Additional Rewards",

diff --git a/features/cms/initialize/collections/stethInDefiProject/stethInDefiProject.ts b/features/cms/initialize/collections/stethInDefiProject/stethInDefiProject.ts
@@ -71,6 +71,16 @@ export const stethInDefiProject: CmsCollection = {
       valueField: "depositableTokens.*.id",
       displayFields: ["depositableTokens.*.label"],
     } as unknown as CmsField,
+    {
+      label: "Network",
+      name: "networkId",
+      widget: "relation",
+      collection: "steth-in-defi-config",
+      file: "project-steth-in-defi-config",
+      searchFields: ["networks.*.label"],
+      valueField: "networks.*.id",
+      displayFields: ["networks.*.label"],
+    } as unknown as CmsField,
     { label: "TVL Key", name: "tvlId", widget: "string", required: false },
     {
       label: "Additional Rewards",

diff --git a/features/cms/previews/stethInDefiProject/stethInDefiProject.tsx b/features/cms/previews/stethInDefiProject/stethInDefiProject.tsx
@@ -25,6 +25,7 @@ type Project = {
   curatorId: string;
   protocol?: string;
   depositableTokenId: string;
+  networkId: string;
   additionalRewardsId: string[];
   additionalRewardsLabel?: string;
   link: string;
@@ -65,6 +66,7 @@ export const StethInDefiProjectPreview = ({
     curatorId,
     protocol,
     depositableTokenId,
+    networkId,
     additionalRewardsId,
     additionalRewardsLabel,
     featureMode,
@@ -78,6 +80,8 @@ export const StethInDefiProjectPreview = ({
   else if (!config && data?.depositableTokenId)
     config =
       data.depositableTokenId?.["steth-in-defi-config"]?.[depositableTokenId];
+  else if (!config && data?.networkId)
+    config = data.networkId?.["steth-in-defi-config"]?.[networkId];
   else if (!config && data?.additionalRewardsId)
     config =
       data.additionalRewardsId?.["steth-in-defi-config"]?.[
@@ -91,6 +95,8 @@ export const StethInDefiProjectPreview = ({
   const { logo: depositableTokenLogo, label: depositableTokenLabel } =
     config?.depositableTokens.find((item) => item.id === depositableTokenId) ??
     {};
+  const { logo: networkLogo } =
+    config?.networks.find((item) => item.id === networkId) ?? {};
   const additionalRewards =
     config?.additionalRewards?.filter((item) =>
       additionalRewardsId?.includes(item.id)
@@ -141,6 +147,7 @@ export const StethInDefiProjectPreview = ({
             <Row>
               <Label>Depositable Token</Label>
               <Block>
+                <img src={networkLogo} className={"networkLogo"} />
                 <img src={depositableTokenLogo} />
                 <Text>{depositableTokenLabel}</Text>
               </Block>

diff --git a/features/cms/previews/stethInDefiProject/stethInDefiProjectStyles.ts b/features/cms/previews/stethInDefiProject/stethInDefiProjectStyles.ts
@@ -69,6 +69,7 @@ export const Label = styled.span`
 `;
 
 export const Block = styled.div`
+  position: relative;
   display: flex;
   align-items: center;
   gap: 10px;
@@ -77,6 +78,14 @@ export const Block = styled.div`
     width: 36px;
     height: 36px;
   }
+
+  & > img.networkLogo {
+    position: absolute;
+    top: -8px;
+    left: 20px;
+    width: 24px;
+    height: 24px;
+  }
 `;
 
 export const FlexColumnWrapper = styled.div`