Dev (#381)

* ci: workflow dispatch triggle dev deploy

* Addition of Get Ring page (#380)

* fix(start): fix start script

* Update index.tsx

* Update index.tsx

* create bridge and add new pages

* add bridge to header

* add data

* fix buttons and add data for cards

* change bridge name

* fix bridge link

* change bridge name to ring

* fix bg

* add tracking

* fix padding for cards

* fix flex-wrap

* fix(menu item): fix menu item for bridge

* fix scroll

* add href link for bridge

* chore: added readme

* fix pull request comment

---------

Co-authored-by: Hamid Roohi <[email protected]>
Co-authored-by: Hamid Roohi <[email protected]>

* Fix bridge link and navigation

---------

Co-authored-by: Furqan A <[email protected]>
Co-authored-by: Hamid Roohi <[email protected]>
Co-authored-by: Hamid Roohi <[email protected]>

.github/workflows/deploy-dev.yml

@@ -2,6 +2,7 @@ name: Deploy develop
 
 on:
   pull_request:
+  workflow_dispatch:
 
 jobs:
   deploy:

README.md

@@ -1 +1,11 @@
 # Darwinia Home
+
+This repository is for the website of Darwinia Network. Learn more about Darwinia [here](https://darwinia.network).
+
+### Powering Your DApp’s Cross-Chain Capabilities.
+
+Darwinia is the community-run technology and service powering the cross-chain capabilities of decentralized applications. By crafting secure and efficient cross-chain messaging protocols, Darwinia is at the forefront of facilitating seamless communication between disparate blockchain networks. The newest addition to our suite of protocols is Msgport, an innovative messaging abstraction that has been successfully implemented across a wide array of mainstream smart contract platforms, broadening the potential for interoperability and enabling developers to create more versatile and connected blockchain ecosystems.
+
+### How to run
+```npm install```      
+``` npm start```

package.json

@@ -34,7 +34,7 @@
     "web-vitals": "^2.1.4"
   },
   "scripts": {
-    "start": "BROWSER=none PORT=3003 react-scripts start",
+    "start": "set PORT=3003 && react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject",

src/components/Header/data.ts

@@ -1,53 +1,114 @@
-export const navigations: { label: string; sub: { label: string; link: string; isExternal?: boolean }[] }[] = [
+export const navigations: {
+  label: string;
+  sub: { label: string; link: string; isExternal?: boolean }[];
+  link?: string;
+  isExternal?: boolean;
+}[] = [
   {
     label: "Use Darwinia",
     sub: [
-      { label: "Get RING", link: "https://darwinia.notion.site/Where-can-I-get-the-RING-token-c0932eaa99454be99335fdfff106e789", isExternal: true },
-      { label: "Stake RING", link: "https://docs.darwinia.network/staking-guide-4306a2a3f25f4ea0b41377e267e1d319", isExternal: true },
-      { label: "Run A Node", link: "https://docs.darwinia.network/run-collator-node-af6bce360d5b49ddacc56e4587510210", isExternal: true },
-      { label: "Cross-Chain Asset Bridge", link: "https://docs.darwinia.network/tokenasset-bridge-c2b42b6e0c3348ddb91333a4f24ac4d9", isExternal: true },
-      { label: "Cross-Chain DAO Governance", link: "https://docs.darwinia.network/multi-chain-dao-governance-d3b2e194828d4af8bad8e3fa28219fc3", isExternal: true },
+      // { label: "Get RING", link: "https://darwinia.notion.site/Where-can-I-get-the-RING-token-c0932eaa99454be99335fdfff106e789", isExternal: true },
+      {
+        label: "Get RING",
+        link: "/get-ring",
+        isExternal: false,
+      },
+      {
+        label: "Stake RING",
+        link: "https://docs.darwinia.network/staking-guide-4306a2a3f25f4ea0b41377e267e1d319",
+        isExternal: true,
+      },
+      {
+        label: "Run A Node",
+        link: "https://docs.darwinia.network/run-collator-node-af6bce360d5b49ddacc56e4587510210",
+        isExternal: true,
+      },
+      {
+        label: "Cross-Chain Asset Bridge",
+        link: "https://docs.darwinia.network/tokenasset-bridge-c2b42b6e0c3348ddb91333a4f24ac4d9",
+        isExternal: true,
+      },
+      {
+        label: "Cross-Chain DAO Governance",
+        link: "https://docs.darwinia.network/multi-chain-dao-governance-d3b2e194828d4af8bad8e3fa28219fc3",
+        isExternal: true,
+      },
     ],
   },
   {
     label: "Learn",
     sub: [
       { label: "What Is Darwinia", link: "https://docs.darwinia.network/", isExternal: true },
-      { label: "What Is RING", link: "https://docs.darwinia.network/token-and-economic-model-ebfbf88c76794215a4abe75ae13f596b", isExternal: true },
+      {
+        label: "What Is RING",
+        link: "https://docs.darwinia.network/token-and-economic-model-ebfbf88c76794215a4abe75ae13f596b",
+        isExternal: true,
+      },
       { label: "Darwinia Ecosystem DApps", link: "https://apps.darwinia.network/", isExternal: true },
       { label: "Darwinia News & Updates", link: "https://medium.com/darwinianetwork", isExternal: true },
-      { label: "Darwinia Roadmap", link: "https://darwinia.notion.site/c700133dd5a04c2494ceab489c75c907?v=8ff88199019d4236a3b9a190f5e7b9d5", isExternal: true },
+      {
+        label: "Darwinia Roadmap",
+        link: "https://darwinia.notion.site/c700133dd5a04c2494ceab489c75c907?v=8ff88199019d4236a3b9a190f5e7b9d5",
+        isExternal: true,
+      },
       { label: "Darwinia Genepaper v4", link: "/Genepaper_v4.pdf", isExternal: true },
       { label: "Paper Resources", link: "/papers", isExternal: false },
-      { label: "Glossary", link: "https://docs.darwinia.network/glossary-8967fc4aa6a046a69b525dff7bf70a50", isExternal: true },
+      {
+        label: "Glossary",
+        link: "https://docs.darwinia.network/glossary-8967fc4aa6a046a69b525dff7bf70a50",
+        isExternal: true,
+      },
       { label: "FAQ", link: "https://darwinia.notion.site/FAQ-c9412ead803542f197ba1ccafb72c427", isExternal: true },
     ],
   },
   {
     label: "Developers",
     sub: [
       { label: "Documentation", link: "https://docs.darwinia.network/", isExternal: true },
-      { label: "Use Cases", link: "https://docs.darwinia.network/use-cases-d707f114326a4fed8cdc6c2b37b444b1", isExternal: true },
+      {
+        label: "Use Cases",
+        link: "https://docs.darwinia.network/use-cases-d707f114326a4fed8cdc6c2b37b444b1",
+        isExternal: true,
+      },
     ],
   },
   {
     label: "Technology",
     sub: [
-      { label: "Messaging Protocols", link: "https://docs.darwinia.network/messaging-protocols-69586eedc835438cbed676ef4f35cb93", isExternal: true },
-      { label: "Darwinia EVM+", link: "https://docs.darwinia.network/darwinia-evm-df814f681ec248438cb762df8aaddbd6", isExternal: true },
+      {
+        label: "Messaging Protocols",
+        link: "https://docs.darwinia.network/messaging-protocols-69586eedc835438cbed676ef4f35cb93",
+        isExternal: true,
+      },
+      {
+        label: "Darwinia EVM+",
+        link: "https://docs.darwinia.network/darwinia-evm-df814f681ec248438cb762df8aaddbd6",
+        isExternal: true,
+      },
     ],
   },
   {
     label: "Community",
     sub: [
       { label: "Online Communities", link: "/online-communities", isExternal: false },
       { label: "Get Involved", link: "/get-involved", isExternal: false },
-      { label: "Grants", link: "https://github.com/darwinia-network/collaboration/blob/master/grant/README.md", isExternal: true },
+      {
+        label: "Grants",
+        link: "https://github.com/darwinia-network/collaboration/blob/master/grant/README.md",
+        isExternal: true,
+      },
       { label: "Bug Bounty Program", link: "https://immunefi.com/bounty/darwinia/", isExternal: true },
-      { label: "Help Center", link: "https://darwinia.notion.site/a76d5bdc7ad242bea991c023dfca208f?v=5fb127fc9a7a4d67a3bbc3ed50445180", isExternal: true },
-      { label: "Brand Assets", link: "https://darwinia.notion.site/Brand-Assets-9bd35f88f0674232954737577616f2c2", isExternal: true },
+      {
+        label: "Help Center",
+        link: "https://darwinia.notion.site/a76d5bdc7ad242bea991c023dfca208f?v=5fb127fc9a7a4d67a3bbc3ed50445180",
+        isExternal: true,
+      },
+      {
+        label: "Brand Assets",
+        link: "https://darwinia.notion.site/Brand-Assets-9bd35f88f0674232954737577616f2c2",
+        isExternal: true,
+      },
     ],
   },
+  { label: "Bridge", sub: [], link: "https://helixbridge.app/?token_category=ring", isExternal: true },
 ];
-
-

src/components/Navigation/DesktopNavigation.tsx

@@ -4,7 +4,12 @@ import { Dispatch, SetStateAction, useCallback } from "react";
 import ExternalIcon from "../ExternalIcon";
 
 interface Props {
-  data: { label: string; sub: { label: string; link: string; isExternal?: boolean }[] }[];
+  data: {
+    label: string;
+    sub: { label: string; link: string; isExternal?: boolean }[];
+    link?: string;
+    isExternal?: boolean;
+  }[];
   isHomePage?: boolean;
   isNavigationActive: boolean[];
   setIsNavigationActive: Dispatch<SetStateAction<boolean[]>>;
@@ -23,17 +28,41 @@ export default function DesktopNavigation({ data, isHomePage, isNavigationActive
 
   return (
     <div className="hidden lg:flex items-center gap-[2.5rem]">
-      {data.map(({ label, sub }, index) => (
-        <Navigation
-          key={label}
-          index={index}
-          label={label}
-          sub={sub}
-          isHomePage={isHomePage}
-          isActive={isNavigationActive[index]}
-          onActiveChange={handleActiveChange}
-        />
-      ))}
+      {data.map(({ label, sub, link, isExternal }, index) =>
+        sub.length ? (
+          <Navigation
+            key={label}
+            index={index}
+            label={label}
+            sub={sub}
+            isHomePage={isHomePage}
+            isActive={isNavigationActive[index]}
+            onActiveChange={handleActiveChange}
+          />
+        ) : isExternal ? (
+          <a
+            key={label}
+            className={`whitespace-nowrap transition-colors text-app-black hover:text-app-main ${
+              isHomePage ? "text-t20" : "text-t16b"
+            }`}
+            target="_blank"
+            rel="noopener noreferrer"
+            href={link}
+          >
+            {label}
+          </a>
+        ) : (
+          <Link
+            key={label}
+            className={`whitespace-nowrap transition-colors text-app-black hover:text-app-main ${
+              isHomePage ? "text-t20" : "text-t16b"
+            }`}
+            to={link ?? "/"}
+          >
+            {label}
+          </Link>
+        )
+      )}
     </div>
   );
 }
@@ -63,9 +92,9 @@ function Navigation({
       placement="bottom"
       label={
         <span
-          className={`whitespace-nowrap transition-colors hover:text-app-main ${isHomePage ? 'text-t20' : 'text-t16b'} ${
-            isActive ? "text-app-main" : "text-app-black"
-          }`}
+          className={`whitespace-nowrap transition-colors hover:text-app-main ${
+            isHomePage ? "text-t20" : "text-t16b"
+          } ${isActive ? "text-app-main" : "text-app-black"}`}
         >
           {label}
         </span>

src/components/Navigation/MobileNavigation.tsx

@@ -3,7 +3,12 @@ import { Link } from "react-router-dom";
 import ExternalIcon from "../ExternalIcon";
 
 interface Props {
-  data: { label: string; sub: { label: string; link: string; isExternal?: boolean }[] }[];
+  data: {
+    label: string;
+    sub: { label: string; link: string; isExternal?: boolean }[];
+    link?: string;
+    isExternal?: boolean;
+  }[];
 }
 
 export default function MobileNavigation({ data }: Props) {
@@ -12,30 +17,52 @@ export default function MobileNavigation({ data }: Props) {
 
   return (
     <div className="flex flex-col lg:hidden w-full">
-      {data.map(({ label, sub }, index) => (
+      {data.map(({ label, sub, link, isExternal }, index) => (
         <div key={label} className="w-full flex flex-col items-end">
-          <button
-            className="px-[1.25rem] py-[1.0625rem] flex items-center justify-end gap-[0.625rem] w-full"
-            onClick={() => setActiveIndex((prev) => (prev === index ? -1 : index))}
-          >
-            <span className="text-t16b text-app-white">{label}</span>
-            <Arrow isOpen={index === activeIndex} />
-          </button>
-          <div
-            className="transition-[height] duration-200 overflow-y-hidden w-full"
-            style={{ height: index === activeIndex ? ref.current[index]?.clientHeight : 0 }}
-          >
-            <div
-              className="bg-app-inner-black flex flex-col items-end"
-              ref={(node) => {
-                ref.current[index] = node;
-              }}
+          {sub.length ? (
+            <>
+              <button
+                className="px-[1.25rem] py-[1.0625rem] flex items-center justify-end gap-[0.625rem] w-full"
+                onClick={() => setActiveIndex((prev) => (prev === index ? -1 : index))}
+              >
+                <span className="text-t16b text-app-white">{label}</span>
+                <Arrow isOpen={index === activeIndex} />
+              </button>
+              <div
+                className="transition-[height] duration-200 overflow-y-hidden w-full"
+                style={{ height: index === activeIndex ? ref.current[index]?.clientHeight : 0 }}
+              >
+                <div
+                  className="bg-app-inner-black flex flex-col items-end"
+                  ref={(node) => {
+                    ref.current[index] = node;
+                  }}
+                >
+                  {sub.map((s) => (
+                    <SubItem key={s.label} label={s.label} link={s.link} isExternal={s.isExternal} />
+                  ))}
+                </div>
+              </div>
+            </>
+          ) : isExternal ? (
+            <a
+              href={link}
+              rel="noopener noreferrer"
+              target="_blank"
+              className="px-[1.25rem] py-[1.0625rem] inline-flex items-center justify-end gap-[0.625rem] w-full"
             >
-              {sub.map((s) => (
-                <SubItem key={s.label} label={s.label} link={s.link} isExternal={s.isExternal} />
-              ))}
-            </div>
-          </div>
+              <span className="text-t16b text-app-white">{label}</span>
+              <Arrow className="invisible" />
+            </a>
+          ) : (
+            <Link
+              to={link ?? "/"}
+              className="px-[1.25rem] py-[1.0625rem] inline-flex items-center justify-end gap-[0.625rem] w-full"
+            >
+              <span className="text-t16b text-app-white">{label}</span>
+              <Arrow className="invisible" />
+            </Link>
+          )}
         </div>
       ))}
     </div>
@@ -80,10 +107,10 @@ function SubItem({ label, link, isExternal }: { label: string; link: string; isE
   );
 }
 
-function Arrow({ isOpen }: { isOpen?: boolean }) {
+function Arrow({ isOpen, className }: { isOpen?: boolean; className?: string }) {
   return (
     <div
-      className="border-t-[0.3125rem] border-t-app-white border-x-[0.25rem] border-x-transparent shrink-0 transition-transform"
+      className={`border-t-[0.3125rem] border-t-app-white border-x-[0.25rem] border-x-transparent shrink-0 transition-transform ${className}`}
       style={{ transform: isOpen ? "rotateX(180deg)" : "rotateX(0)" }}
     />
   );

src/components/ring/BgBlackContainer.tsx

@@ -0,0 +1,23 @@
+// BgBlackContainer.tsx
+import React, { ReactNode, forwardRef } from 'react';
+import PropTypes from 'prop-types';
+
+type BgBlackContainerProps = {
+  children: ReactNode;
+};
+
+const BgBlackContainer = forwardRef<HTMLDivElement, BgBlackContainerProps>(({ children }, ref) => {
+  return (
+    <div className='lg:w-[695px] bg-black rounded-[30px] p-[20px] lg:p-[40px] flex flex-col gap-[30px] mx-[20px] lg:mx-0 h-fit' ref={ref}>
+      {children}
+    </div>
+  );
+});
+
+BgBlackContainer.displayName = 'BgBlackContainer';
+
+BgBlackContainer.propTypes = {
+  children: PropTypes.node.isRequired
+};
+
+export default BgBlackContainer;