Sd 106 update metadata

index.html

@@ -5,13 +5,13 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta name="description" content="Privacy for all crypto.">
     <link rel="icon" type="image/svg+xm" href="/favicon.svg">
-    <title>Common Web App</title>
+    <title>Blanksquare Web App</title>
 
-    <meta property="og:title" content="Common Web App" />
+    <meta property="og:title" content="Blanksquare Web App" />
     <meta property="og:description" content="Privacy for all crypto." />
     <meta property="og:image" content="%PUBLIC_VAR_OG_IMAGE_URL%" />
 
-    <meta name="twitter:title" content="Common Web App">
+    <meta name="twitter:title" content="Blanksquare Web App">
     <meta name="twitter:description" content="Privacy for all crypto.">
     <meta name="twitter:image" content="%PUBLIC_VAR_OG_IMAGE_URL%">
 

scripts/generateIcons.ts

@@ -5,7 +5,7 @@ import { fileURLToPath } from 'url';
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
 const rootDir = path.resolve(__dirname, '..');
-const iconsDir = path.join(rootDir, 'src/domains/misc/components/CIcon/icons');
+const iconsDir = path.join(rootDir, 'src/domains/misc/components/BIcon/icons');
 
 if (!fs.existsSync(iconsDir)) {
   console.error(`Icons directory not found: ${iconsDir}`);
@@ -40,7 +40,7 @@ export type IconName = keyof typeof icons;
 `;
 
   fs.writeFileSync(
-    path.join(rootDir, 'src/domains/misc/components/CIcon/icons.ts'),
+    path.join(rootDir, 'src/domains/misc/components/BIcon/icons.ts'),
     content
   );
 

src/domains/chains/components/ChainSelector.tsx

@@ -6,8 +6,8 @@ import ChainIcon from 'src/domains/chains/components/ChainIcon';
 import { Definition } from 'src/domains/chains/utils/definitions';
 import supportedChains from 'src/domains/chains/utils/supportedChains';
 import useChain from 'src/domains/chains/utils/useChain';
+import BIcon from 'src/domains/misc/components/BIcon';
 import Button from 'src/domains/misc/components/Button';
-import CIcon from 'src/domains/misc/components/CIcon';
 import SelectBox from 'src/domains/misc/components/SelectBox';
 import { BOTTOM_MENU_BREAKPOINT, BREAKPOINTS } from 'src/domains/misc/consts/consts';
 import { typography } from 'src/domains/styling/utils/tokens';
@@ -29,7 +29,7 @@ const ChainSelector = () => {
         <Option>
           <ChainIcon size={20} chainId={chain.id} />
           <p>{chain.name}</p>
-          {chainConfig?.id === chain.id && <CIcon size={20} icon="CheckmarkRegular" />}
+          {chainConfig?.id === chain.id && <BIcon size={20} icon="CheckmarkRegular" />}
         </Option>
       ),
   });
@@ -51,7 +51,7 @@ const ChainSelector = () => {
         ) : (
           'Select Network'
         )}
-        <CIcon icon="Chevron" color={vars('--color-neutral-foreground-3-rest')} />
+        <BIcon icon="Chevron" color={vars('--color-neutral-foreground-3-rest')} />
         <UnderLine />
       </StyledButton>
     </StyledSelectBox>
@@ -101,7 +101,7 @@ const Option = styled.div`
 
   ${typography.body1Strong};
 
-  & > ${CIcon} {
+  & > ${BIcon} {
     margin-left: auto;
   }
 `;

src/domains/chains/components/ConnectModal.tsx

@@ -1,8 +1,8 @@
 import styled from 'styled-components';
 
 import { useWallet } from 'src/domains/chains/components/WalletProvider';
+import BIcon from 'src/domains/misc/components/BIcon';
 import Button from 'src/domains/misc/components/Button';
-import CIcon from 'src/domains/misc/components/CIcon';
 import Modal, { useModalControls } from 'src/domains/misc/components/Modal';
 import CheckedContainer from 'src/domains/misc/components/PatternContainer';
 import { PRIVACY_POLICY_LINK, TERMS_OF_CONDITIONS_LINK, TERMS_OF_SERVICE_LINK } from 'src/domains/misc/consts/consts';
@@ -28,9 +28,9 @@ const ConnectModal = () => {
               <CheckedContainer>
                 <Branding>
                   <LogoContainer>
-                    <CIcon icon="Common" size={26} color="#406EB2" />
+                    <BIcon icon="Blanksquare" size={26} />
                   </LogoContainer>
-                  <p>Common Web App</p>
+                  <p>Blanksquare Web App</p>
                 </Branding>
               </CheckedContainer>
               <Title>
@@ -42,15 +42,15 @@ const ConnectModal = () => {
               </Text>
               <LinksWrapper>
                 <Link href={TERMS_OF_SERVICE_LINK} target="_blank" rel="noopener noreferrer">
-                  <CIcon icon="DocumentText" size={20} />
+                  <BIcon icon="DocumentText" size={20} />
                   <p>Terms of service</p>
                 </Link>
                 <Link href={TERMS_OF_CONDITIONS_LINK} target="_blank" rel="noopener noreferrer">
-                  <CIcon icon="DocumentText" size={20} />
+                  <BIcon icon="DocumentText" size={20} />
                   <p>Terms and Conditions</p>
                 </Link>
                 <Link href={PRIVACY_POLICY_LINK} target="_blank" rel="noopener noreferrer">
-                  <CIcon icon="DocumentText" size={20} />
+                  <BIcon icon="DocumentText" size={20} />
                   <p>Privacy policy</p>
                 </Link>
               </LinksWrapper>
@@ -128,14 +128,11 @@ const Branding = styled.div`
   position: relative;
   gap: ${vars('--spacing-s')};
   align-items: center;
-  color: ${vars('--color-neutral-foreground-2-rest')};
   ${typography.subtitle1};
 `;
 
 const LogoContainer = styled.div`
   display: grid;
   place-items: center;
   padding: ${vars('--spacing-xxs')};
-  border-radius: ${vars('--spacing-s-nudge')};
-  background: #E5EFFF;
 `;

src/domains/misc/components/AccountTypeIcon.tsx

@@ -1,7 +1,7 @@
 import styled, { css } from 'styled-components';
 
 import ChainIcon from 'src/domains/chains/components/ChainIcon';
-import CIcon from 'src/domains/misc/components/CIcon';
+import BIcon from 'src/domains/misc/components/BIcon';
 import vars from 'src/domains/styling/utils/vars';
 
 type Props = {
@@ -15,7 +15,7 @@ type Props = {
 const AccountTypeIcon = ({ type, size, className, withBorder, chainId }: Props) => (
   <Wrapper>
     <IconWrapper className={className} $size={size} $withBorder={withBorder}>
-      <CIcon
+      <BIcon
         icon={type === 'public' ? 'PersonFilled' : 'ShieldedFilled'}
         size={size / 1.6}
       />

src/domains/misc/components/CIcon/CIcon.tsx → src/domains/misc/components/BIcon/BIcon.tsx

@@ -13,7 +13,7 @@ type Props = {
   className?: string,
 } & ComponentProps<'svg'>;
 
-const CIcon = forwardRef<SVGSVGElement, Props>(({
+const BIcon = forwardRef<SVGSVGElement, Props>(({
   icon,
   size = 24,
   color,
@@ -36,9 +36,9 @@ const CIcon = forwardRef<SVGSVGElement, Props>(({
   );
 });
 
-CIcon.displayName = 'CIcon';
+BIcon.displayName = 'BIcon';
 
-export default styled(CIcon)``;
+export default styled(BIcon)``;
 
 const Icon = styled.div<{
   $size: Size,

src/domains/misc/components/CIcon/icons.ts → src/domains/misc/components/BIcon/icons.ts

@@ -4,6 +4,7 @@
  * @warning Do not modify this file directly. Add or update SVG files in the icons directory and run the generator
  */
 
+import Blanksquare from './icons/Blanksquare.svg?react';
 import Add from './icons/add.svg?react';
 import AddCircle from './icons/addCircle.svg?react';
 import AddSquare from './icons/addSquare.svg?react';
@@ -76,6 +77,7 @@ import WarningRegular from './icons/warningRegular.svg?react';
 import XSM from './icons/xSM.svg?react';
 
 export const icons = {
+  Blanksquare,
   Add,
   AddCircle,
   AddSquare,

src/domains/misc/components/CIcon/index.ts → src/domains/misc/components/BIcon/index.ts

@@ -1,2 +1,2 @@
-export { default } from './CIcon';
+export { default } from './BIcon';
 export { type IconName } from './icons';

src/domains/misc/components/Badge.tsx

@@ -1,7 +1,7 @@
 import { ComponentProps, forwardRef, type ReactElement } from 'react';
 import styled, { RuleSet } from 'styled-components';
 
-import CIcon, { IconName } from 'src/domains/misc/components/CIcon';
+import BIcon, { IconName } from 'src/domains/misc/components/BIcon';
 import { typography } from 'src/domains/styling/utils/tokens';
 import vars from 'src/domains/styling/utils/vars';
 
@@ -45,7 +45,7 @@ const Badge = forwardRef<HTMLButtonElement, Props>(({
       {...props}
     >
       {typeof leftIcon === 'string' ? (
-        <StyledCIcon variant={variant} design={design} size={size} icon={leftIcon} color={iconColor} />
+        <StyledBIcon variant={variant} design={design} size={size} icon={leftIcon} color={iconColor} />
       ) : leftIcon}
       {text && (
         <BadgeText
@@ -58,7 +58,7 @@ const Badge = forwardRef<HTMLButtonElement, Props>(({
         </BadgeText>
       )}
       {typeof rightIcon ==='string' ? (
-        <StyledCIcon variant={variant} design={design} size={size} icon={rightIcon} color={iconColor} />
+        <StyledBIcon variant={variant} design={design} size={size} icon={rightIcon} color={iconColor} />
       ): rightIcon}
     </StyledBadge>
   );
@@ -201,7 +201,7 @@ const StyledBadge = styled.div.withConfig({
   })};
 `;
 
-const StyledCIcon = styled(CIcon).withConfig({
+const StyledBIcon = styled(BIcon).withConfig({
   shouldForwardProp: prop => !['size', 'variant', 'design'].includes(prop),
 })<Props>`
   display: flex;

src/domains/misc/components/Button/Button.tsx

@@ -1,7 +1,7 @@
 import { ComponentProps, forwardRef, ReactNode } from 'react';
 import styled, { css, RuleSet } from 'styled-components';
 
-import CIcon, { type IconName } from 'src/domains/misc/components/CIcon';
+import BIcon, { type IconName } from 'src/domains/misc/components/BIcon';
 import { transitionTime, typography } from 'src/domains/styling/utils/tokens';
 import vars from 'src/domains/styling/utils/vars';
 
@@ -46,9 +46,9 @@ const Button = forwardRef<HTMLButtonElement, Props>(({
     selected={selected}
     $iconOnly={!children}
   >
-    {isLoading ? <LoadingIcon icon="Spinner" size={ICON_SIZE_MAP[size] * 0.75} /> : leftIcon && <CIcon icon={leftIcon} size={ICON_SIZE_MAP[size]} />}
+    {isLoading ? <LoadingIcon icon="Spinner" size={ICON_SIZE_MAP[size] * 0.75} /> : leftIcon && <BIcon icon={leftIcon} size={ICON_SIZE_MAP[size]} />}
     {children}
-    {rightIcon && <CIcon icon={rightIcon} size={ICON_SIZE_MAP[size]} />}
+    {rightIcon && <BIcon icon={rightIcon} size={ICON_SIZE_MAP[size]} />}
   </DomButton>
 ));
 
@@ -308,7 +308,7 @@ const DomButton = styled.button.withConfig({
   }
 `;
 
-const LoadingIcon = styled(CIcon)`
+const LoadingIcon = styled(BIcon)`
   animation: spin 1.4s linear infinite;
 
   & *:first-of-type {

src/domains/misc/components/CopyButton.tsx

@@ -4,7 +4,7 @@ import { MouseEvent, type ReactNode, useState } from 'react';
 import styled from 'styled-components';
 import { isNullish } from 'utility-types';
 
-import CIcon from 'src/domains/misc/components/CIcon';
+import BIcon from 'src/domains/misc/components/BIcon';
 import { typography } from 'src/domains/styling/utils/tokens';
 import vars from 'src/domains/styling/utils/vars';
 
@@ -51,7 +51,7 @@ const CopyButton = ({
         initial={{ opacity: 0, y: isSuccess ? -5 : 0 }}
         animate={{ opacity: 1, y: 0 }}
       >
-        <CIcon
+        <BIcon
           icon={isSuccess ? 'CheckmarkCircle' : 'Copy'}
           color={isSuccess ? vars('--color-status-success-foreground-1-rest') : undefined}
           size={size}

src/domains/misc/components/InfoPair.tsx

@@ -3,7 +3,7 @@ import {
 } from 'react';
 import { styled } from 'styled-components';
 
-import CIcon from 'src/domains/misc/components/CIcon';
+import BIcon from 'src/domains/misc/components/BIcon';
 import Tooltip from 'src/domains/misc/components/Tooltip';
 import { typography } from 'src/domains/styling/utils/tokens';
 import vars from 'src/domains/styling/utils/vars';
@@ -23,7 +23,7 @@ const InfoPair = ({ label, className, tooltipText, ...props }: Props) => (
       {label}
       {tooltipText && (
         <Tooltip text={tooltipText}>
-          <CIcon icon="Info" color={vars('--color-neutral-foreground-4-rest')} size={16} />
+          <BIcon icon="Info" color={vars('--color-neutral-foreground-4-rest')} size={16} />
         </Tooltip>
       )}
     </Label>

src/domains/misc/components/Layout/Footer.tsx

@@ -25,12 +25,12 @@ const Footer = () => (
       <Link href={FAUCET_LINK} target="_blank" rel="noopener noreferrer">
         Get Testnet Tokens
       </Link>
-      <Link href={LANDING_PAGE_LINK} target="_blank" rel="noopener noreferrer">common.fi</Link>
+      <Link href={LANDING_PAGE_LINK} target="_blank" rel="noopener noreferrer">blanksquare.io</Link>
     </InnerContainer>
     <CopyrightContainer data-chromatic="ignore">
       <InnerContainer>
         <Copyright>
-          Copyright © {new Date().getFullYear()} Common, ver. {import.meta.env.APP_VERSION}
+          Copyright © {new Date().getFullYear()} Blanksquare, ver. {import.meta.env.APP_VERSION}
         </Copyright>
         <Link href={TERMS_OF_SERVICE_LINK} target="_blank" rel="noopener noreferrer">
           Terms of service

src/domains/misc/components/PasteButton.tsx

@@ -2,7 +2,7 @@ import { motion } from 'framer-motion';
 import { type ReactNode, useState } from 'react';
 import styled from 'styled-components';
 
-import CIcon from 'src/domains/misc/components/CIcon';
+import BIcon from 'src/domains/misc/components/BIcon';
 import { typography } from 'src/domains/styling/utils/tokens';
 import vars from 'src/domains/styling/utils/vars';
 
@@ -48,7 +48,7 @@ const PasteButton = ({
         initial={{ opacity: 0, y: isSuccess ? -5 : 0 }}
         animate={{ opacity: 1, y: 0 }}
       >
-        <CIcon
+        <BIcon
           icon={isSuccess ? 'CheckmarkCircle' : 'ClipboardPaste'}
           color={isSuccess ? vars('--color-status-success-foreground-1-rest') : undefined}
           size={size}

src/domains/misc/components/SelectBox.tsx

@@ -3,7 +3,7 @@ import { motion } from 'framer-motion';
 import { Fragment, ReactElement, ReactNode, useState } from 'react';
 import styled, { ThemeProvider } from 'styled-components';
 
-import CIcon, { IconName } from 'src/domains/misc/components/CIcon';
+import BIcon, { IconName } from 'src/domains/misc/components/BIcon';
 import { boxShadows, typography } from 'src/domains/styling/utils/tokens';
 import vars from 'src/domains/styling/utils/vars';
 
@@ -109,7 +109,7 @@ const SelectBox = ({
                         >
                           {checkMarkPosition === 'left' && selectedIndex !== undefined &&
                             <Checkmark icon="CheckmarkRegular" $active={selectedIndex === optionIndex} />}
-                          {option.icon && <CIcon icon={option.icon} />}
+                          {option.icon && <BIcon icon={option.icon} />}
                           {option.text}
                           {
                             option.rightSideEl ?? (checkMarkPosition === 'right' && selectedIndex !== undefined &&
@@ -153,7 +153,7 @@ const Section = styled.div`
   }
 `;
 
-const Checkmark = styled(CIcon)<{ $active: boolean }>`
+const Checkmark = styled(BIcon)<{ $active: boolean }>`
   opacity: ${({ $active }) => $active ? 1 : 0};
 `;
 

src/domains/misc/components/TextInput.tsx

@@ -2,7 +2,7 @@ import { AnimatePresence, motion } from 'framer-motion';
 import { ComponentProps, useRef, MouseEvent } from 'react';
 import styled, { css, RuleSet } from 'styled-components';
 
-import CIcon, { IconName } from 'src/domains/misc/components/CIcon';
+import BIcon, { IconName } from 'src/domains/misc/components/BIcon';
 import { transitionTime, typography } from 'src/domains/styling/utils/tokens';
 import vars from 'src/domains/styling/utils/vars';
 
@@ -42,7 +42,7 @@ const TextInput = ({
       onClick={() => inputRef.current?.focus()}
       className={className}
     >
-      {leftIcon && <CIcon icon={leftIcon} size={24} />}
+      {leftIcon && <BIcon icon={leftIcon} size={24} />}
       <Input ref={inputRef} {...props} />
       <AnimatePresence>
         {onClear && !!props.value?.toString().length && (
@@ -58,7 +58,7 @@ const TextInput = ({
           />
         )}
       </AnimatePresence>
-      {rightIcon && <CIcon icon={rightIcon} size={24} />}
+      {rightIcon && <BIcon icon={rightIcon} size={24} />}
     </Container>
   );
 };