Merge branch 'master' into rotorsoft/10214-create-address

packages/commonwealth/client/scripts/views/Sublayout.tsx

@@ -7,7 +7,6 @@ import app from 'state';
 import useSidebarStore from 'state/ui/sidebar';
 import { SublayoutHeader } from 'views/components/SublayoutHeader';
 import { Sidebar } from 'views/components/sidebar';
-import twitterspaceGrowlImage from '../../assets/img/TwitterspaceGrowlImage.png';
 import { useHandleInviteLink } from '../hooks/useHandleInviteLink';
 import useNecessaryEffect from '../hooks/useNecessaryEffect';
 import useStickyHeader from '../hooks/useStickyHeader';
@@ -23,7 +22,6 @@ import { AdminOnboardingSlider } from './components/AdminOnboardingSlider';
 import { Breadcrumbs } from './components/Breadcrumbs';
 import MobileNavigation from './components/MobileNavigation';
 import AuthButtons from './components/SublayoutHeader/AuthButtons';
-import { CWGrowlTemplate } from './components/SublayoutHeader/GrowlTemplate/CWGrowlTemplate';
 import useJoinCommunity from './components/SublayoutHeader/useJoinCommunity';
 import { UserTrainingSlider } from './components/UserTrainingSlider';
 import { CWModal } from './components/component_kit/new_designs/CWModal';
@@ -196,16 +194,6 @@ const Sublayout = ({ children, isInsideCommunity }: SublayoutProps) => {
             )}
             {children}
           </div>
-          <CWGrowlTemplate
-            growlType="twitterspace"
-            growlImage={twitterspaceGrowlImage}
-            headerText="Livestream with How To DAO this Thursday!"
-            bodyText="Join Dillon Chen (Common CEO) and Kevin Owocki (Gitcoin Co-Founder) on 12/19 at 11am ET to
-            shape the future of digital collaboration and community building"
-            buttonText="Reserve Your Spot!"
-            buttonLink="https://lu.ma/8nk6j7n4"
-            extraText='Exclusive bundle offer: "How To DAO" book + more!'
-          />
         </div>
         <WelcomeOnboardModal
           isOpen={isWelcomeOnboardModalOpen}

packages/commonwealth/client/scripts/views/components/CommunityInformationForm/CommunityInformationForm.tsx

@@ -21,6 +21,7 @@ import {
   ETHEREUM_MAINNET_ID,
   OSMOSIS_ID,
   POLYGON_ETH_CHAIN_ID,
+  SKALE_ID,
   alphabeticallyStakeWiseSortedChains as sortedChains,
 } from './constants';
 import {
@@ -116,6 +117,8 @@ const CommunityInformationForm = ({
               return options?.find((o) => o.value === OSMOSIS_ID);
             case CommunityType.Blast:
               return options?.find((o) => o.value === BLAST_ID);
+            case CommunityType.Skale:
+              return options?.find((o) => o.value === SKALE_ID);
             case CommunityType.Polygon:
             case CommunityType.Solana:
               return options?.[0];

packages/commonwealth/client/scripts/views/components/CommunityInformationForm/constants.ts

@@ -9,6 +9,7 @@ export const ETHEREUM_MAINNET_ID = '1';
 export const BASE_ID = '8453';
 export const OSMOSIS_ID = 'osmosis';
 export const BLAST_ID = '81457';
+export const SKALE_ID = '974399131';
 
 const removeTestCosmosNodes = (nodeInfo: NodeInfo): boolean => {
   return !(

packages/commonwealth/client/scripts/views/components/SublayoutHeader/DesktopHeader/DesktopHeader.tsx

@@ -7,6 +7,7 @@ import KnockNotifications from 'views/components/KnockNotifications';
 import { CWDivider } from 'views/components/component_kit/cw_divider';
 import { CWIconButton } from 'views/components/component_kit/cw_icon_button';
 import { isWindowSmallInclusive } from 'views/components/component_kit/helpers';
+import { CWButton } from 'views/components/component_kit/new_designs/CWButton';
 import { CWSearchBar } from 'views/components/component_kit/new_designs/CWSearchBar';
 import { CWTooltip } from 'views/components/component_kit/new_designs/CWTooltip';
 import { CreateContentPopover } from 'views/menus/CreateContentMenu';
@@ -83,6 +84,24 @@ const DesktopHeader = ({ onMobile, onAuthModalOpen }: DesktopHeaderProps) => {
             })}
           >
             <CreateContentPopover />
+            {!isWindowSmallInclusive(window.innerWidth) && (
+              <CWTooltip
+                content="About Common"
+                placement="bottom"
+                renderTrigger={(handleInteraction) => (
+                  <CWButton
+                    buttonType="secondary"
+                    buttonHeight="sm"
+                    label="About"
+                    onClick={() =>
+                      window.open('https://landing.common.xyz', '_blank')
+                    }
+                    onMouseEnter={handleInteraction}
+                    onMouseLeave={handleInteraction}
+                  />
+                )}
+              />
+            )}
             <CWTooltip
               content="Explore communities"
               placement="bottom"

packages/commonwealth/client/scripts/views/components/component_kit/new_designs/CWCommunitySelector/CWCommunitySelector.tsx

@@ -17,6 +17,7 @@ export enum CommunityType {
   Cosmos = 'cosmos',
   Polygon = 'polygon',
   Solana = 'solana',
+  Skale = 'skale',
 }
 
 export type SelectedCommunity = {

packages/commonwealth/client/scripts/views/components/component_kit/new_designs/CWTooltip/CWTooltip.scss

@@ -69,14 +69,6 @@
 
     &.tipBottom {
       @include tip(-4px, auto, auto, calc(50% - 8px));
-
-      @include medium {
-        @include tip(-4px, auto, auto, calc(20% - 8px));
-      }
-    }
-
-    &.tipBottomSidebarHidden {
-      @include tip(-4px, auto, auto, calc(20% - 8px / 2));
     }
 
     &.tipLeft {

packages/commonwealth/client/scripts/views/components/component_kit/new_designs/CWTooltip/TooltipContainer.tsx

@@ -1,6 +1,5 @@
 import { Placement } from '@popperjs/core/lib';
 import React, { FC } from 'react';
-import useSidebarStore from 'state/ui/sidebar';
 import { getClasses } from 'views/components/component_kit/helpers';
 import { ComponentType } from 'views/components/component_kit/types';
 
@@ -13,8 +12,6 @@ export const TooltipContainer: FC<ContainerProps> = ({
   placement,
   children,
 }) => {
-  const { menuVisible } = useSidebarStore();
-
   return (
     <div className={getClasses({ placement }, ComponentType.Tooltip)}>
       {children}
@@ -24,7 +21,6 @@ export const TooltipContainer: FC<ContainerProps> = ({
             placement,
             Arrow: true,
             tipTop: placement === 'top',
-            tipBottomSidebarHidden: placement === 'bottom' && !menuVisible,
             tipRight: placement === 'right',
             tipBottom: placement === 'bottom',
             tipLeft: placement === 'left',

packages/commonwealth/client/scripts/views/components/sidebar/sidebar_quick_switcher.tsx

@@ -6,6 +6,8 @@ import useUserStore from 'state/ui/user';
 import { CWCommunityAvatar } from '../component_kit/cw_community_avatar';
 import { CWDivider } from '../component_kit/cw_divider';
 import { CWIconButton } from '../component_kit/cw_icon_button';
+import { isWindowSmallInclusive } from '../component_kit/helpers';
+import { CWTooltip } from '../component_kit/new_designs/CWTooltip';
 import './sidebar_quick_switcher.scss';
 
 export const SidebarQuickSwitcher = ({
@@ -40,6 +42,23 @@ export const SidebarQuickSwitcher = ({
             setMenu({ name: 'exploreCommunities' });
           }}
         />
+        {isWindowSmallInclusive(window.innerWidth) && (
+          <CWTooltip
+            content="About Common"
+            placement="bottom"
+            renderTrigger={(handleInteraction) => (
+              <CWIconButton
+                iconButtonTheme="neutral"
+                iconName="infoEmpty"
+                onClick={() =>
+                  window.open('https://landing.common.xyz', '_blank')
+                }
+                onMouseEnter={handleInteraction}
+                onMouseLeave={handleInteraction}
+              />
+            )}
+          />
+        )}
       </div>
       <CWDivider />
       <div className="scrollable-community-bar">

packages/commonwealth/client/scripts/views/modals/AuthModal/types.ts

@@ -21,6 +21,7 @@ export type ModalVariantProps = {
     | ChainBase.CosmosSDK
     | ChainBase.Solana
     | ChainBase.Substrate;
+
   showAuthOptionFor?: AuthWallets | AuthSSOs;
   onSignInClick?: () => void;
 };

packages/commonwealth/client/scripts/views/pages/CreateCommunity/steps/CommunityTypeStep/CommunityTypeStep.tsx

@@ -83,8 +83,13 @@ const CommunityTypeStep = ({
     handleContinue();
   };
 
-  const [baseOption, blastOption, ethereumOption, ...advancedOptions] =
-    communityTypeOptions;
+  const [
+    baseOption,
+    blastOption,
+    ethereumOption,
+    skaleOption,
+    ...advancedOptions
+  ] = communityTypeOptions;
 
   return (
     <div className="CommunityTypeStep">
@@ -136,6 +141,19 @@ const CommunityTypeStep = ({
             })
           }
         />
+        <CWCommunitySelector
+          key={skaleOption.type}
+          img={skaleOption.img}
+          title={skaleOption.title}
+          description={skaleOption.description}
+          isRecommended={skaleOption.isRecommended}
+          onClick={() =>
+            handleCommunitySelection({
+              type: skaleOption.type,
+              chainBase: skaleOption.chainBase,
+            })
+          }
+        />
       </div>
       <div className="advanced-options-container">
         <CWText type="h4">Advanced Options</CWText>

packages/commonwealth/client/scripts/views/pages/CreateCommunity/steps/CommunityTypeStep/helpers.ts

@@ -4,6 +4,7 @@ import blastImg from 'assets/img/communitySelector/blast.png';
 import cosmosImg from 'assets/img/communitySelector/cosmos.svg';
 import ethereumImg from 'assets/img/communitySelector/ethereum.svg';
 import polygonImg from 'assets/img/communitySelector/polygon.svg';
+import skaleImg from 'assets/img/communitySelector/skale.svg';
 import solanaImg from 'assets/img/communitySelector/solana.svg';
 import { CommunityType } from 'views/components/component_kit/new_designs/CWCommunitySelector';
 
@@ -37,7 +38,19 @@ export const communityTypeOptions = [
       'Tokens built on the ERC20 protocol are fungible, meaning they are interchangeable. ' +
       'Select this community type if you have minted a token on the Ethereum blockchain.',
   },
-
+  {
+    type: CommunityType.Skale,
+    img: skaleImg,
+    chainBase: ChainBase.Ethereum,
+    title: 'Skale',
+    isRecommended: false,
+    isHidden: false,
+    description:
+      // eslint-disable-next-line max-len
+      'SKALE is an on-demand blockchain network with zero gas fees. ' +
+      // eslint-disable-next-line max-len
+      'Allowing quick deployment of interoperable EVM-compatible chains without compromising security or decentralization',
+  },
   {
     type: CommunityType.Cosmos,
     img: cosmosImg,