Blanksquare rebranding

.github/actions/build-and-push/action.yml

@@ -64,12 +64,6 @@ runs:
       with:
         node-version: ${{ inputs.node-version }}
 
-    - name: Set NPM_TOKEN
-      env:
-        NPM_TOKEN: ${{ inputs.npm-token }}
-      shell: bash
-      run: npm config set '//registry.npmjs.org/:_authToken' "${{ env.NPM_TOKEN }}"
-
     - name: Clean install
       shell: bash
       run: npm ci

.github/actions/setup-project/action.yml

@@ -1,11 +1,6 @@
 name: Setup project
 description: Setup npm project in Node.js
 
-inputs:
-  NPM_TOKEN:
-    required: true
-    description: NPM_TOKEN
-
 outputs:
   node-version:
     description: The resolved and installed Node.js version.
@@ -32,12 +27,8 @@ runs:
         key: os-${{ runner.os }}/node-${{ steps.node.outputs.version }}/node_modules-${{ hashFiles('package-lock.json') }}
     - name: Install dependencies
       if: ${{ steps.cache-node-modules.outputs.cache-hit != 'true' }}
-      run: |
-        echo "//registry.npmjs.org/:_authToken=\${NPM_TOKEN}" > .npmrc
-        npm ci
+      run: npm ci
       shell: bash
-      env:
-        NPM_TOKEN: ${{ inputs.NPM_TOKEN }}
     - name: Cache node_modules
       if: ${{ steps.cache-node-modules.outputs.cache-hit != 'true' }}
       uses: actions/cache@v4

.github/workflows/build-and-push-prod.yml

@@ -29,5 +29,4 @@ jobs:
           aws-access-key-id: ${{ secrets.AWS_S3_PROD_ACCESS_KEY_ID }}
           aws-secret-access-key: ${{ secrets.AWS_S3_PROD_SECRET_ACCESS_KEY }}
           s3-bucket-name: ${{ secrets.AWS_S3_PROD_BUCKET_NAME }}
-          amplify-app-id: ${{ secrets.AWS_AMPLIFY_PROD_APP_ID }}
-          npm-token: ${{ secrets.NPM_TOKEN }}
+          amplify-app-id: ${{ secrets.AWS_AMPLIFY_PROD_APP_ID }}

.github/workflows/build-and-push-stage.yml

@@ -29,5 +29,4 @@ jobs:
           aws-access-key-id: ${{ secrets.AWS_S3_STAGE_ACCESS_KEY_ID }}
           aws-secret-access-key: ${{ secrets.AWS_S3_STAGE_SECRET_ACCESS_KEY }}
           s3-bucket-name: ${{ secrets.AWS_S3_STAGE_BUCKET_NAME }}
-          amplify-app-id: ${{ secrets.AWS_AMPLIFY_STAGE_APP_ID }}
-          npm-token: ${{ secrets.NPM_TOKEN }}
+          amplify-app-id: ${{ secrets.AWS_AMPLIFY_STAGE_APP_ID }}

.github/workflows/chromatic.yml

@@ -16,8 +16,6 @@ jobs:
     steps:
       - uses: actions/checkout@v4
       - uses: ./.github/actions/setup-project
-        with:
-          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
 
   storybook:
     name: Chromatic toolset initialization

.github/workflows/code-quality.yml

@@ -11,8 +11,6 @@ jobs:
     steps:
       - uses: actions/checkout@v4
       - uses: ./.github/actions/setup-project
-        with:
-          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
 
   lint-commits:
     name: Lint commits
@@ -23,8 +21,6 @@ jobs:
         with:
           fetch-depth: 0
       - uses: ./.github/actions/setup-project
-        with:
-          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
       - run: npx commitlint --from ${{ github.event.pull_request.head.sha }}~${{ github.event.pull_request.commits }} --to ${{ github.event.pull_request.head.sha }} --verbose
 
   type-check:
@@ -34,8 +30,6 @@ jobs:
     steps:
       - uses: actions/checkout@v4
       - uses: ./.github/actions/setup-project
-        with:
-          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
       - run: npm run type-check
 
   lint:
@@ -45,8 +39,6 @@ jobs:
     steps:
       - uses: actions/checkout@v4
       - uses: ./.github/actions/setup-project
-        with:
-          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
       - run: npm run lint
 
   test:
@@ -57,8 +49,6 @@ jobs:
     steps:
       - uses: actions/checkout@v4
       - uses: ./.github/actions/setup-project
-        with:
-          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
       - name: Export variables
         shell: bash
         env:

README.md

@@ -1 +1 @@
-# Shielding dApp
+# BlankSquare WebApp

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%">
 

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "shielding-dapp",
+  "name": "blanksquare-webapp",
   "private": true,
   "version": "0.0.0",
   "type": "module",

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>
@@ -82,11 +82,12 @@ const StyledButton = styled(Button)`
   padding-inline: ${vars('--spacing-s')};
   width: ${CHAIN_SELECTOR_WIDTH}px;
 
+  border-radius: ${vars('--spacing-s')};
   background: ${vars('--color-neutral-background-1-rest')};
   border-color: ${vars('--color-neutral-stroke-2-rest')};
   overflow: hidden;
 
-  ${typography.web.body1};
+  ${typography.body1};
 
   @media (width <= ${BOTTOM_MENU_BREAKPOINT}) { /* stylelint-disable-line media-query-no-invalid */
     width: fit-content;
@@ -99,9 +100,9 @@ const Option = styled.div`
   gap: ${vars('--spacing-s')};
   width: 100%;
 
-  ${typography.web.body1Strong};
+  ${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>
@@ -81,7 +81,7 @@ const Content = styled.div`
 `;
 
 const Title = styled.h3`
-  ${typography.decorative.subtitle1};
+  ${typography.subtitle1};
 `;
 
 const Text = styled.p`
@@ -92,7 +92,7 @@ const Text = styled.p`
 
   text-wrap: pretty;
 
-  ${typography.decorative.body1};
+  ${typography.body1};
 `;
 
 const Buttons = styled.div`
@@ -115,7 +115,7 @@ const Link = styled.a`
   display: flex;
   gap: ${vars('--spacing-xs')};
   color: ${vars('--color-brand-foreground-link-rest')};
-  ${typography.web.body1};
+  ${typography.body1};
 
   & > a {
     color: ${vars('--color-brand-foreground-link-rest')};
@@ -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.web.subtitle1};
+  ${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';
@@ -27,7 +28,6 @@ import Chevron from './icons/chevron.svg?react';
 import ChevronDoubleDownRegular from './icons/chevronDoubleDownRegular.svg?react';
 import ChevronLeft from './icons/chevronLeft.svg?react';
 import ClipboardPaste from './icons/clipboardPaste.svg?react';
-import Common from './icons/common.svg?react';
 import CompassNorthWest from './icons/compassNorthWest.svg?react';
 import Copied from './icons/copied.svg?react';
 import Copy from './icons/copy.svg?react';
@@ -76,6 +76,7 @@ import WarningRegular from './icons/warningRegular.svg?react';
 import XSM from './icons/xSM.svg?react';
 
 export const icons = {
+  Blanksquare,
   Add,
   AddCircle,
   AddSquare,
@@ -99,7 +100,6 @@ export const icons = {
   ChevronDoubleDownRegular,
   ChevronLeft,
   ClipboardPaste,
-  Common,
   CompassNorthWest,
   Copied,
   Copy,