Add example of CSP embed page (#75)

* Add example of CSP embed page

* Tweak background colors

* Update spacing and content

* Add months switcher

* add embed for July 2023

* add third web client id and required parameters

* use optional chaining

if currentWidget is undefined, the expression will safely evaluate to undefined without causing an error

* add embed for August 2023

replacing the test embed with the mainnet deployment

* description update and minor changes

* fix preload current month

* link discord channel to claim the supporter role (#77)

* Cross-link the CSP page (#78)

---------

Co-authored-by: Shankar D. Warang <[email protected]>
Co-authored-by: Pranav Chandrakant Pawar <[email protected]>

components/pages/contribute/contribute-edgizen.tsx

@@ -1,7 +1,7 @@
 import { Button } from 'components/common/button';
 import { socialMediaUrls } from 'data/config';
 
-import OpenArmLineIcon from 'remixicon/icons/User/open-arm-line.svg';
+import OpenArmLineIcon from 'remixicon/icons/User & Faces/open-arm-line.svg';
 
 export const ContributeEDGizen = () => {
   return (

components/pages/ecosystem/widget/widget-transfer-selector.tsx

@@ -1,4 +1,4 @@
-import IconArrow from 'remixicon/icons/System/arrow-right-line.svg';
+import IconArrow from 'remixicon/icons/Arrows/arrow-right-line.svg';
 
 type WidgetTransferSelectorProps = {
   targetTransferType: 'deposit' | 'withdrawal';

components/pages/ecosystem/widget/widget-wallet-selector.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import type { Account } from './web3-context';
-import IconArrow from 'remixicon/icons/System/arrow-down-s-line.svg';
+import IconArrow from 'remixicon/icons/Arrows/arrow-down-s-line.svg';
 import { Listbox } from '@headlessui/react';
 
 type WidgetWalletSelectorProps = {

components/pages/home/homepage-teasers.tsx

@@ -1,21 +1,25 @@
 import * as React from 'react';
 
 const TEASERS = {
-  binance: {
-    href: '/binance',
-    alt: 'Binance sends out EDG',
+  csp: {
+    href: '/csp',
+    alt: 'Support the ongoing community contributions through the monthly editions of limited NFTs and get exclusive perks.',
   },
   evm: {
     href: 'https://docs.edgeware.wiki/development/develop/smart-contracts/evm-smart-contracts',
-    alt: 'EdgeEVM coming soon - ETH developers now port their work to EDG with virtually zero changes. Grow your Dapp.',
+    alt: 'Explore the vanilla implementation of full-fledged EVM running in the same high-performant substrate solochain.',
+  },
+  binance: {
+    href: '/binance',
+    alt: 'Binance distributed EDG to their ETH holding users of lockdrop timeframe.',
   },
   kabocha: {
     href: 'https://www.kabocha.network/',
     alt: 'Kabocha Parachain',
   },
   events: {
     href: 'https://calendar.google.com/calendar/u/0/embed?src=commonwealth.im_ihbs892pqubvogtoim6c1hf7ck@group.calendar.google.com',
-    alt: 'Community Events every week',
+    alt: 'Join the weekly Community Calls to shape the evolution of Edgeware ecosystem.',
   },
 };
 

components/pages/society/society-start.tsx

@@ -1,12 +1,12 @@
 import { IconLogo } from 'components/common/icon-logo';
 
-import OpenArmLineIcon from 'remixicon/icons/User/open-arm-line.svg';
+import OpenArmLineIcon from 'remixicon/icons/User & Faces/open-arm-line.svg';
 import FundsLineIcon from 'remixicon/icons/Finance/funds-line.svg';
 import EarthLineIcon from 'remixicon/icons/Map/earth-line.svg';
 
 import FingerprintFillIcon from 'remixicon/icons/Device/fingerprint-fill.svg';
 import CompassDiscoverLineIcon from 'remixicon/icons/Map/compass-discover-line.svg';
-import User4LineIcon from 'remixicon/icons/User/user-4-line.svg';
+import User4LineIcon from 'remixicon/icons/User & Faces/user-4-line.svg';
 
 import ScalesLineIcon from 'remixicon/icons/Others/scales-line.svg';
 import CommandLineIcon from 'remixicon/icons/Development/command-line.svg';

package.json

@@ -39,7 +39,7 @@
     "react-slick": "^0.28.1",
     "react-typing-effect": "^2.0.5",
     "react-use": "^17.3.1",
-    "remixicon": "^2.5.0",
+    "remixicon": "^3.5.0",
     "sass": "1.39.0",
     "slugify": "^1.6.0",
     "tailwindcss": "^3.0.24",

pages/csp.tsx

@@ -0,0 +1,107 @@
+import { useState } from 'react';
+
+const WidgetMonths = [
+  {
+    month: 'July 2023',
+    src: 'https://embed.ipfscdn.io/ipfs/bafybeihazpt6pkm4azgtupdz7hc2j3o4zpjsvtcgfq4t2keozxkss3ud6q/?contract=0x6B7508b491b907B2C6d86737516F3786Ddc75063&chain=%7B%22name%22%3A%22Edgeware+EdgeEVM+Mainnet%22%2C%22chain%22%3A%22EDG%22%2C%22rpc%22%3A%5B%22https%3A%2F%2Fedgeware-edgeevm.rpc.thirdweb.com%2F%24%7BTHIRDWEB_API_KEY%7D%22%5D%2C%22nativeCurrency%22%3A%7B%22name%22%3A%22Edgeware%22%2C%22symbol%22%3A%22EDG%22%2C%22decimals%22%3A18%7D%2C%22shortName%22%3A%22edg%22%2C%22chainId%22%3A2021%2C%22testnet%22%3Afalse%2C%22slug%22%3A%22edgeware-edgeevm%22%2C%22icon%22%3A%7B%22url%22%3A%22ipfs%3A%2F%2FQmS3ERgAKYTmV7bSWcUPSvrrCC9wHQYxtZqEQYx9Rw4RGA%22%2C%22width%22%3A352%2C%22height%22%3A304%2C%22format%22%3A%22png%22%7D%7D&clientId=57b1f3ff173c0acef018fbca1356a7af&primaryColor=purple&month=July&year=2023',
+  },
+  {
+    month: 'August 2023',
+    src: 'https://embed.ipfscdn.io/ipfs/bafybeihazpt6pkm4azgtupdz7hc2j3o4zpjsvtcgfq4t2keozxkss3ud6q/?contract=0x9DD893814e0934C038EeD71eD0591DB201674747&chain=%7B%22name%22%3A%22Edgeware+EdgeEVM+Mainnet%22%2C%22chain%22%3A%22EDG%22%2C%22rpc%22%3A%5B%22https%3A%2F%2Fedgeware-edgeevm.rpc.thirdweb.com%2F%24%7BTHIRDWEB_API_KEY%7D%22%5D%2C%22nativeCurrency%22%3A%7B%22name%22%3A%22Edgeware%22%2C%22symbol%22%3A%22EDG%22%2C%22decimals%22%3A18%7D%2C%22shortName%22%3A%22edg%22%2C%22chainId%22%3A2021%2C%22testnet%22%3Afalse%2C%22slug%22%3A%22edgeware-edgeevm%22%2C%22icon%22%3A%7B%22url%22%3A%22ipfs%3A%2F%2FQmS3ERgAKYTmV7bSWcUPSvrrCC9wHQYxtZqEQYx9Rw4RGA%22%2C%22width%22%3A352%2C%22height%22%3A304%2C%22format%22%3A%22png%22%7D%7D&clientId=57b1f3ff173c0acef018fbca1356a7af&primaryColor=yellow&month=August&year=2023',
+  },
+];
+
+const getCurrent = () => {
+  const now = new Date();
+  const month = now.toLocaleString('default', { month: 'long' });
+  const year = now.getFullYear();
+  return `${month} ${year}`;
+};
+
+export default function SocietyPage() {
+  // find key for current month
+  const currentMonth = getCurrent();
+  const [activeMonth, setActiveMonth] = useState<string>(currentMonth);
+
+  const currentWidget = WidgetMonths.find((m) => m.month === activeMonth);
+
+  return (
+    <>
+      <section id="edgeware-csp" className="mt-24 px-4 text-center">
+        <h1 className="my-8 text-6xl">Contributors' Support Program</h1>
+        <p className="my-4 mx-auto max-w-prose text-lg leading-relaxed">
+          Contributors' Support Program allows anyone to support the currently non-treasury funded
+          contributors to continue their contributions to the Edgeware community through the monthly
+          limited editions of NFTs. This program aims to provide basic minimal monthly incentives
+          for Edgeware contributors who are consistent with their contributions.
+        </p>
+        <p className="my-4 mx-auto max-w-prose leading-relaxed">
+          Click on the month below to mint the corresponding CSP NFT(s):
+        </p>
+      </section>
+
+      <section id="edgeware-csp-widget" className="py-8 pb-24 text-center">
+        <div className="flex flex-wrap justify-center">
+          {WidgetMonths.map((m) => (
+            <button
+              key={m.month}
+              className={`mx-2 my-2 rounded-lg border-2  px-4 py-2 ${
+                activeMonth === m.month
+                  ? 'border-primary-500 bg-primary-500 font-semibold text-white'
+                  : 'border-primary-700 bg-primary-700 opacity-90 hover:opacity-100'
+              }`}
+              onClick={() => setActiveMonth(m.month)}
+            >
+              {m.month}
+            </button>
+          ))}
+        </div>
+        <div className="mb-8 py-4">
+          <iframe
+            className="mx-auto rounded-lg border-0 shadow-2xl outline-none focus:outline-none focus:ring-0"
+            title="Edgeware CSP Widget"
+            src={currentWidget?.src}
+            width="600px"
+            height="600px"
+          />
+        </div>
+        <p className="my-4 mx-auto max-w-3xl leading-relaxed">
+          Minted the NFT(s)? Claim your discord role and perks now:{' '}
+          <a
+            href="https://discord.gg/uNY622UGh4"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="hover:text-blue-600 text-primary-500 underline"
+          >
+            click here
+          </a>
+          🤘
+        </p>
+        <p className="my-4 mx-auto max-w-3xl leading-relaxed">
+          To learn more about the Contributors' Support Program, please visit{' '}
+          <a
+            href="https://gov.edgewa.re/discussion/12279-contributors-support-program-csp"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="hover:text-blue-600 text-primary-500 underline"
+          >
+            the governance forum thread
+          </a>
+          .
+        </p>
+      </section>
+    </>
+  );
+}
+
+export async function getStaticProps() {
+  return {
+    props: {
+      meta: {
+        title: 'Edgeware Contributors Support Program',
+        description:
+          'Support the ongoing community contributions through the monthly editions of limited NFTs and get exclusive perks.',
+      },
+    },
+  };
+}

pages/get-started.tsx

@@ -3,11 +3,11 @@ import * as React from 'react';
 import IconBank from 'remixicon/icons/Buildings/bank-line.svg';
 import IconPost from 'remixicon/icons/Document/draft-line.svg';
 import IconList from 'remixicon/icons/Document/file-list-3-line.svg';
-import IconUser from 'remixicon/icons/User/open-arm-line.svg';
+import IconUser from 'remixicon/icons/User & Faces/open-arm-line.svg';
 
 import IconGov from 'remixicon/icons/Buildings/government-line.svg';
 import IconPaper from 'remixicon/icons/Document/file-list-line.svg';
-import IconDiscord from 'remixicon/icons/Logos/discord-line.svg';
+// import IconDiscord from 'remixicon/icons/Logos/discord-line.svg';
 // import IconBubbles from 'remixicon/icons/Business/bubble-chart-line.svg';
 import IconTools from 'remixicon/icons/Design/tools-line.svg';
 
@@ -26,6 +26,7 @@ import IconNews from 'remixicon/icons/Document/newspaper-line.svg';
 import IconArticle from 'remixicon/icons/Document/article-line.svg';
 import IconDocs from 'remixicon/icons/Development/code-s-slash-line.svg';
 import IconMarkets from 'remixicon/icons/Business/line-chart-line.svg';
+import IconShakeHands from 'remixicon/icons/Business/shake-hands-line.svg';
 
 import { LinksList } from '../components/pages/get-started/links-list';
 import type { LinkItem } from '../components/pages/get-started/links-list';
@@ -43,8 +44,8 @@ const LINKS: Record<string, LinkItem[]> = {
       icon: IconPaper,
       href: '/assets/whitepaper/edgeware-whitepaper.pdf',
     },
-    { label: 'Discord', icon: IconDiscord, href: 'https://discord.gg/4pnzjWTJ9b' },
     { label: 'Tools', icon: IconTools, href: '/tools' },
+    { label: 'CSP', icon: IconShakeHands, href: '/csp' },
   ],
 
   wallets: [

yarn.lock

@@ -7617,10 +7617,10 @@ regjsparser@^0.6.4:
   dependencies:
     jsesc "~0.5.0"
 
-remixicon@^2.5.0:
-  version "2.5.0"
-  resolved "https://registry.npmjs.org/remixicon/-/remixicon-2.5.0.tgz"
-  integrity sha512-q54ra2QutYDZpuSnFjmeagmEiN9IMo56/zz5dDNitzKD23oFRw77cWo4TsrAdmdkPiEn8mxlrTqxnkujDbEGww==
+remixicon@^3.5.0:
+  version "3.5.0"
+  resolved "https://registry.yarnpkg.com/remixicon/-/remixicon-3.5.0.tgz#ad3ea8e6cd80d6bc7a9a261fafc229f04a32ce5f"
+  integrity sha512-wNzWGKf4frb3tEmgvP5shry0n1OdTjjEk9RHLuRuAhfA50bvEdpKH1XWNUYrHUSjAQQkkdyIm+lf4mOuysIKTQ==
 
 [email protected]:
   version "0.4.2"