Merge pull request #1550 from starknet-io/bugfix/fix-cms-wallet-section

Fix cms wallet section

_data/pages/block-explorers.yml

@@ -37,7 +37,7 @@ blocks:
         link_url: https://www.oklink.com/starknet
         website_url: https://www.oklink.com/starknet
         image: /assets/oklink-logo.jpeg
-        discordHandle: ""
+        discord: ""
         twitter: https://twitter.com/OKLink
     title: Block explorers
     randomize: true

_data/pages/wallets.yml

@@ -10,4 +10,58 @@ blocks:
     title: Wallets
     description: "Explore the wallets that allow you to interact with and build in
       the Starknet ecosystem. "
-  - type: wallets
+  - type: card_list
+    randomize: false
+    card_list_items:
+      - title: Argent X
+        description: Earn, stake and trade with low fees, high speeds & strong security.
+        link_url: https://www.argent.xyz/argent-x/
+        website_url: https://www.argent.xyz/argent-x/
+        discord: https://discord.gg/8yVmtsgtgm
+        twitter: https://twitter.com/argentHQ
+        image: /assets/argent.jpg
+        type_list:
+          - type: Browser Extension
+            url: https://chrome.google.com/webstore/detail/argent-x/dlcobpjiigpikoobohmabehhmhfoodbb
+          - type: ios
+            url: https://apps.apple.com/us/app/argent-defi-in-a-tap/id1358741926
+          - type: Android
+            url: https://play.google.com/store/apps/details?id=im.argent.contractwalletclient
+          - type: SDK
+            url: https://www.argent.xyz/web-wallet-sdk
+      - title: OKX
+        description: World's leading Web3 multi-chain wallet.
+        website_url: https://www.okx.com/web3
+        discord: https://discord.com/invite/okx
+        twitter: https://twitter.com/okxweb3
+        type_list:
+          - type: Browser Extension
+            url: https://chrome.google.com/webstore/detail/okx-wallet/mcohilncbfahbmgdjkbpemcciiolgcge
+          - type: ios
+            url: https://apps.apple.com/us/app/okx-buy-bitcoin-eth-crypto/id1327268470
+          - type: Android
+            url: https://play.google.com/store/apps/details?id=com.okinc.okex.gp
+        image: /assets/unnamed.jpg
+      - title: MetaMask Snaps
+        description: Manage your Starknet assets with MetaMask
+        link_url: https://snaps.consensys.io/starknet
+        image: /assets/starkware-metamask.png
+        website_url: https://snaps.consensys.io/starknet
+        twitter: https://twitter.com/MetaMask
+        discord: https://discord.com/invite/consensys
+      - image: /assets/braavos.jpg
+        title: Braavos
+        link_url: https://braavos.app
+        description: " Braavos Smart Wallet offers an unparalleled UX and advance
+          security via its Hardware Signer 2-factor authentication and
+          multi-signer 3-factor authentication capabilities."
+        website_url: https://braavos.app
+        twitter: https://twitter.com/myBraavos
+        discord: https://discord.com/invite/bFvwjYhuqp
+        type_list:
+          - type: Browser Extension
+            url: https://chrome.google.com/webstore/detail/braavos-smart-wallet/jnlgamecbpmbajjfhmmmlhejkemejdma
+          - type: ios
+            url: https://apps.apple.com/us/app/braavos-wallet/id1636013523
+          - type: Android
+            url: https://play.google.com/store/apps/details?id=app.braavos.wallet

workspaces/cms-config/src/blocks.ts

@@ -128,12 +128,6 @@ export const cardListItem = [
     widget: "string",
     crowdin: false,
   },
-  {
-    label: "Link url",
-    name: "link_url",
-    widget: "string",
-    crowdin: false,
-  },
   {
     label: "Image",
     required: false,
@@ -149,7 +143,7 @@ export const cardListItem = [
     index_file: "",
     meta: false
   },
-    {
+  {
     label: "Twitter",
     name: "twitter",
     required: false,
@@ -173,14 +167,6 @@ export const cardListItem = [
     index_file: "",
     meta: false
   },
-  {
-    label: "Tags (separate by comma)",
-    name: "tags",
-    required: false,
-    widget: "string",
-    index_file: "",
-    meta: false
-  },
   {
     label: "City",
     name: "city",
@@ -198,16 +184,8 @@ export const cardListItem = [
     meta: false
   },
   {
-    label: "Venue",
-    name: "venue",
-    required: false,
-    widget: "string",
-    index_file: "",
-    meta: false
-  },
-  {
-    label: "Discord handle",
-    name: "discordHandle",
+    label: "Discord",
+    name: "discord",
     required: false,
     widget: "string",
     index_file: "",
@@ -241,14 +219,6 @@ export const cardListItem = [
     index_file: "",
     meta: false
   },
-  {
-    label: "Is image rounded",
-    name: "is_rounded",
-    required: false,
-    widget: "boolean",
-    index_file: "",
-    meta: false
-  },
   {
     label: "Recap",
     name: "recap",
@@ -330,23 +300,6 @@ export const blocks = [
       },
     ],
   },
-  {
-    name: "wallets",
-    label: "Wallets block",
-    widget: "object",
-    fields: [
-      {
-        name: "type",
-        widget: "hidden",
-      },
-      {
-        name: "no_of_items",
-        required: false,
-        widget: "string",
-        crowdin: false
-      },
-    ],
-  },
   {
     name: "basic_card",
     label: "Basic card",

workspaces/cms-data/src/pages.ts

@@ -16,10 +16,6 @@ export interface AmbassadorsListBlock {
   readonly type: "ambassadors_list";
 }
 
-export interface WalletsBlock {
-  readonly type: "wallets";
-  readonly no_of_items: number;
-}
 export interface BasicCardBlock {
   readonly type: "basic_card";
   readonly title: string;
@@ -44,20 +40,23 @@ export interface ImageIconLinkCardBlock {
     | "grey";
 }
 
-interface Icon {
-  icon: string;
-  linkUrl: string;
-}
-
-interface ListCardItems {
+export interface ListCardItems {
   title: string;
   description: string;
-  linkUrl: string;
-  icons: Icon;
+  image: string;
   website_url: string;
   twitter: string;
-  image: string;
+  start_date_time: string;
+  location: string;
+  city: string;
+  discord: string;
+  type_list: {
+    type: string;
+    url: string;
+  }[];
+  type: string;
 }
+
 export interface ListCardItemsBlock {
   readonly type: "card_list";
   readonly title: string;
@@ -152,7 +151,6 @@ export type HeadingVariant = "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
 export type Block =
   | MarkdownBlock
   | CommunityEventsBlock
-  | WalletsBlock
   | BasicCardBlock
   | ImageIconLinkCardBlock
   | HeroBlock

workspaces/website/src/blocks/Block.tsx

@@ -8,7 +8,6 @@ import { HeroImage } from "@ui/HeroImage/HeroImage";
 import { BlockGrouping } from "./BlockGrouping";
 import { ImageIconCard } from "../components/Card/ImageIconCard";
 import ListCardItems from "./ListCardItems";
-import BlockWallets from "./dataBlocks/BlockWallets/BlockWallets";
 import { Container } from "./Container";
 import { LinkList } from "./LinkList";
 import { AccordionItem, AccordionRoot } from "./AccordionBlock";
@@ -156,14 +155,6 @@ export function Block({ block, locale }: Props): JSX.Element | null {
         }}
       />
     );
-  } else if (block.type === "wallets") {
-    return (
-      <BlockWallets
-        params={{
-          locale,
-        }}
-      />
-    );
   } else {
     // this will report type error if there is unhandled block.type
     block satisfies never;

workspaces/website/src/blocks/ListCardItems.tsx

@@ -3,25 +3,7 @@ import { ListCard } from "@ui/Card/ListCard";
 import { Heading } from "@ui/Typography/Heading";
 import { Text } from "@ui/Typography/Text";
 import { slugify } from "@starknet-io/cms-utils/src/index";
-
-interface Icon {
-  icon: string;
-  linkUrl: string;
-}
-
-interface ListCardItems {
-  title: string;
-  description: string;
-  linkUrl: string;
-  icons: Icon;
-  website_url: string;
-  twitter: string;
-  image: string;
-  type_list: {
-    type: string;
-    url: string;
-  }[];
-}
+import type { ListCardItems } from "@starknet-io/cms-data/src/pages";
 
 interface Props extends LocaleProps {
   title: string,
@@ -43,16 +25,19 @@ Props): JSX.Element {
         {title && <Heading color="heading-navy-fg" variant="h3" mb="10px" id={`toc-${slugify(title)}`}>{title}</Heading>}
         {description && <Text variant="body" mb="24px">{description}</Text>}
         <Flex gap={4} direction="column" flex={1}>
-          {card_list_items?.map((card, i) => {
+          {card_list_items?.map(({
+            start_date_time,
+            type,
+            website_url,
+            ...card
+          }, i) => {
             return (
               <ListCard
-                href={card.website_url}
-                twitterHandle={card.twitter}
-                image={card.image}
+                href={website_url}
                 key={`${card.title}-${i}`}
-                description={card.description}
-                title={card.title}
-                type_list={card.type_list}
+                startDateTime={start_date_time}
+                type={type?.split(",")}
+                {...card}
               />
             );
           })}

workspaces/website/src/components/Card/Card.stories.tsx

@@ -623,8 +623,8 @@ export const Listcard = () => (
             type_list={hit.type_list}
             city={hit.city}
             country={hit.country}
-            twitterHandle={hit.twitter}
-            discordHandle={hit.discord}
+            twitter={hit.twitter}
+            discord={hit.discord}
             recap={hit.recap}
           />
         );

workspaces/website/src/components/Card/ListCard.tsx

@@ -31,16 +31,13 @@ type Props = {
   readonly location?: string;
   readonly image?: string;
   readonly href: string;
-  readonly tags?: string[];
   readonly city?: string;
   readonly country?: string;
-  readonly venue?: string;
-  readonly twitterHandle?: string;
-  readonly discordHandle?: string;
-  readonly variant?: "default" | "dapp" | "event" | "job" | "wallet";
+  readonly twitter?: string;
+  readonly discord?: string;
+  readonly variant?: "default" | "event" | "job";
   readonly type_list?: Type[];
   readonly type?: string[];
-  readonly isRounded?: boolean;
   readonly recap?: {
     label?: string;
     link: string;
@@ -216,10 +213,10 @@ export const ListCard = (props: Props) => {
                         />
                       </Link>
                     )}
-                  {props.twitterHandle && (
+                  {props.twitter && (
                     <Link
                       isExternal
-                      href={`${props.twitterHandle}`}
+                      href={`${props.twitter}`}
                     >
                       <Icon
                         boxSize="18px"
@@ -228,10 +225,10 @@ export const ListCard = (props: Props) => {
                       />
                     </Link>
                   )}
-                  {props.discordHandle && (
+                  {props.discord && (
                     <Link
                       isExternal
-                      href={`${props.discordHandle}`}
+                      href={`${props.discord}`}
                     >
                       <Icon
                         boxSize="18px"