feat(refactor): Simplify ui-core structure (#2414)t

polkadot-cloud · Jan 6, 2025 · b9f42d2 · b9f42d2
1 parent 01fbcd8
commit b9f42d2
Show file tree

Hide file tree

Showing 93 changed files with 437 additions and 461 deletions.
diff --git a/packages/app/src/Offline.tsx b/packages/app/src/Offline.tsx
@@ -7,7 +7,7 @@ import { OnlineStatus } from 'controllers/OnlineStatus'
 import { isCustomEvent } from 'controllers/utils'
 import { useEffect, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import { OfflineLabel } from 'ui-core/base'
+import { Offline as Wrapper } from 'ui-core/base'
 import { useEventListener } from 'usehooks-ts'
 
 export const Offline = () => {
@@ -35,9 +35,9 @@ export const Offline = () => {
     return null
   }
   return (
-    <OfflineLabel>
+    <Wrapper>
       <FontAwesomeIcon icon={faWarning} transform="grow-4" />
       <h3>{t('offline')}</h3>
-    </OfflineLabel>
+    </Wrapper>
   )
 }
diff --git a/packages/app/src/library/Help/index.tsx b/packages/app/src/library/Help/index.tsx
@@ -16,7 +16,8 @@ import { DefaultLocale } from 'locales'
 import { useCallback, useEffect } from 'react'
 import { useTranslation } from 'react-i18next'
 import { ButtonPrimaryInvert } from 'ui-buttons'
-import { CanvasContainer, CanvasScroll, ModalContent } from 'ui-core/overlay'
+import { Container, Scroll } from 'ui-core/canvas'
+import { Content } from 'ui-core/modal'
 import { ActiveDefinition } from './Items/ActiveDefinition'
 import { Definition } from './Items/Definition'
 import { External } from './Items/External'
@@ -134,7 +135,7 @@ export const Help = () => {
   })
 
   return (
-    <CanvasContainer
+    <Container
       initial={{
         opacity: 0,
         scale: 1.05,
@@ -157,8 +158,8 @@ export const Help = () => {
         zIndex: 20,
       }}
     >
-      <CanvasScroll>
-        <ModalContent>
+      <Scroll>
+        <Content>
           <div className="buttons">
             <ButtonPrimaryInvert
               lg
@@ -207,11 +208,11 @@ export const Help = () => {
               ))}
             </>
           )}
-        </ModalContent>
-      </CanvasScroll>
+        </Content>
+      </Scroll>
       <button type="button" className="close" onClick={() => closeHelp()}>
         &nbsp;
       </button>
-    </CanvasContainer>
+    </Container>
   )
 }
diff --git a/packages/app/src/library/Modal/Title.tsx b/packages/app/src/library/Modal/Title.tsx
@@ -8,7 +8,7 @@ import { useHelp } from 'contexts/Help'
 import type { FunctionComponent, SVGProps } from 'react'
 import type { CSSProperties } from 'styled-components'
 import { ButtonHelp } from 'ui-buttons'
-import { ModalTitle } from 'ui-core/overlay'
+import { Title as Wrapper } from 'ui-core/modal'
 import { Close } from 'ui-overlay'
 import { TitleWrapper } from './Wrappers'
 
@@ -44,12 +44,12 @@ export const Title = ({
         <div>
           {graphic}
           {title && (
-            <ModalTitle>
+            <Wrapper>
               {title}
               {helpKey ? (
                 <ButtonHelp marginLeft onClick={() => openHelp(helpKey)} />
               ) : null}
-            </ModalTitle>
+            </Wrapper>
           )}
         </div>
       </TitleWrapper>

diff --git a/packages/app/src/overlay/canvas/PoolMembers/Prompts/UnbondMember.tsx b/packages/app/src/overlay/canvas/PoolMembers/Prompts/UnbondMember.tsx
@@ -20,7 +20,7 @@ import { SubmitTx } from 'library/SubmitTx'
 import { StaticNote } from 'overlay/modals/Utils/StaticNote'
 import { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import { ModalNotes, ModalPadding, ModalWarnings } from 'ui-core/overlay'
+import { Notes, Padding, Warnings } from 'ui-core/modal'
 import { planckToUnitBn, timeleftAsString } from 'utils'
 
 export const UnbondMember = ({
@@ -84,19 +84,19 @@ export const UnbondMember = ({
   return (
     <>
       <Title title={t('unbondPoolMember')} />
-      <ModalPadding>
+      <Padding>
         {warnings.length > 0 ? (
-          <ModalWarnings>
+          <Warnings>
             {warnings.map((text, i) => (
               <Warning key={`warning${i}`} text={text} />
             ))}
-          </ModalWarnings>
+          </Warnings>
         ) : null}
         <h3 style={{ display: 'flex', alignItems: 'center' }}>
           <Polkicon address={who} transform="grow-3" />
           &nbsp; {ellipsisFn(who, 7)}
         </h3>
-        <ModalNotes>
+        <Notes>
           <p>
             {t('amountWillBeUnbonded', { bond: freeToUnbond.toString(), unit })}
           </p>
@@ -106,8 +106,8 @@ export const UnbondMember = ({
             valueKey="bondDurationFormatted"
             deps={[bondDuration]}
           />
-        </ModalNotes>
-      </ModalPadding>
+        </Notes>
+      </Padding>
       <SubmitTx noMargin valid={paramsValid} {...submitExtrinsic} />
     </>
   )

diff --git a/packages/app/src/overlay/canvas/PoolMembers/Prompts/WithdrawMember.tsx b/packages/app/src/overlay/canvas/PoolMembers/Prompts/WithdrawMember.tsx
@@ -19,7 +19,7 @@ import { SubmitTx } from 'library/SubmitTx'
 import type { RefObject } from 'react'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import { ModalNotes, ModalPadding, ModalWarnings } from 'ui-core/overlay'
+import { Notes, Padding, Warnings } from 'ui-core/modal'
 import { planckToUnitBn } from 'utils'
 
 export const WithdrawMember = ({
@@ -95,29 +95,29 @@ export const WithdrawMember = ({
   return (
     <>
       <Title title={t('withdrawPoolMember')} />
-      <ModalPadding>
+      <Padding>
         {warnings.length > 0 ? (
-          <ModalWarnings>
+          <Warnings>
             {warnings.map((text, i) => (
               <Warning key={`warning${i}`} text={text} />
             ))}
-          </ModalWarnings>
+          </Warnings>
         ) : null}
 
         <h3 style={{ display: 'flex', alignItems: 'center' }}>
           <Polkicon address={who} transform="grow-3" />
           &nbsp; {ellipsisFn(who, 7)}
         </h3>
 
-        <ModalNotes>
+        <Notes>
           <p>
             <p>
               {t('amountWillBeWithdrawn', { bond: bonded.toString(), unit })}
             </p>{' '}
           </p>
           <p>{t('withdrawRemoveNote')}</p>
-        </ModalNotes>
-      </ModalPadding>
+        </Notes>
+      </Padding>
       <SubmitTx valid={valid} {...submitExtrinsic} />
     </>
   )

diff --git a/packages/app/src/overlay/modals/Accounts/index.tsx b/packages/app/src/overlay/modals/Accounts/index.tsx
@@ -14,7 +14,7 @@ import { Fragment, useEffect } from 'react'
 import { useTranslation } from 'react-i18next'
 import type { MaybeAddress } from 'types'
 import { ButtonPrimaryInvert, ButtonText } from 'ui-buttons'
-import { ModalCustomHeader, ModalPadding } from 'ui-core/overlay'
+import { CustomHeader, Padding } from 'ui-core/modal'
 import { useOverlay } from 'ui-overlay'
 import { AccountButton } from './Account'
 import { Delegates } from './Delegates'
@@ -164,8 +164,8 @@ export const Accounts = () => {
   ])
 
   return (
-    <ModalPadding>
-      <ModalCustomHeader>
+    <Padding>
+      <CustomHeader>
         <div>
           <h1>{t('accounts')}</h1>
           <ButtonPrimaryInvert
@@ -193,7 +193,7 @@ export const Accounts = () => {
             />
           )}
         </div>
-      </ModalCustomHeader>
+      </CustomHeader>
       {!activeAccount && !accounts.length && (
         <AccountWrapper style={{ marginTop: '1.5rem' }}>
           <div>
@@ -278,6 +278,6 @@ export const Accounts = () => {
           ))}
         </>
       ) : null}
-    </ModalPadding>
+    </Padding>
   )
 }
diff --git a/packages/app/src/overlay/modals/BalanceTest/index.tsx b/packages/app/src/overlay/modals/BalanceTest/index.tsx
@@ -8,7 +8,7 @@ import { useNetwork } from 'contexts/Network'
 import { useBatchCall } from 'hooks/useBatchCall'
 import { useSubmitExtrinsic } from 'hooks/useSubmitExtrinsic'
 import { SubmitTx } from 'library/SubmitTx'
-import { ModalPadding, ModalTitle } from 'ui-core/overlay'
+import { Padding, Title } from 'ui-core/modal'
 import { Close, useOverlay } from 'ui-overlay'
 
 export const BalanceTest = () => {
@@ -54,9 +54,9 @@ export const BalanceTest = () => {
   return (
     <>
       <Close />
-      <ModalPadding>
-        <ModalTitle>Balance Test</ModalTitle>
-      </ModalPadding>
+      <Padding>
+        <Title>Balance Test</Title>
+      </Padding>
       <SubmitTx valid {...submitExtrinsic} />
     </>
   )

diff --git a/packages/app/src/overlay/modals/Bio/index.tsx b/packages/app/src/overlay/modals/Bio/index.tsx
@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: GPL-3.0-only
 
 import { Title } from 'library/Modal/Title'
-import { ModalPadding } from 'ui-core/overlay'
+import { Padding } from 'ui-core/modal'
 import { useOverlay } from 'ui-overlay'
 import { Wrapper } from './Wrapper'
 
@@ -12,9 +12,9 @@ export const Bio = () => {
   return (
     <>
       <Title title={name} />
-      <ModalPadding>
+      <Padding>
         <Wrapper>{bio !== undefined && <h4>{bio}</h4>}</Wrapper>
-      </ModalPadding>
+      </Padding>
     </>
   )
 }
diff --git a/packages/app/src/overlay/modals/Bond/index.tsx b/packages/app/src/overlay/modals/Bond/index.tsx
@@ -17,7 +17,7 @@ import { Warning } from 'library/Form/Warning'
 import { SubmitTx } from 'library/SubmitTx'
 import { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import { ModalPadding, ModalTitle, ModalWarnings } from 'ui-core/overlay'
+import { Padding, Title, Warnings } from 'ui-core/modal'
 import { Close, useOverlay } from 'ui-overlay'
 import { planckToUnitBn } from 'utils'
 
@@ -145,14 +145,14 @@ export const Bond = () => {
   return (
     <>
       <Close />
-      <ModalPadding>
-        <ModalTitle>{t('addToBond')}</ModalTitle>
+      <Padding>
+        <Title>{t('addToBond')}</Title>
         {pendingRewards > 0n && bondFor === 'pool' ? (
-          <ModalWarnings>
+          <Warnings>
             <Warning
               text={`${t('bondingWithdraw')} ${pendingRewardsUnit} ${unit}.`}
             />
-          </ModalWarnings>
+          </Warnings>
         ) : null}
         <BondFeedback
           syncing={largestTxFee.isZero()}
@@ -167,7 +167,7 @@ export const Bond = () => {
           txFees={BigInt(largestTxFee.toString())}
         />
         <p>{t('newlyBondedFunds')}</p>
-      </ModalPadding>
+      </Padding>
       <SubmitTx valid={bondValid} {...submitExtrinsic} />
     </>
   )

diff --git a/packages/app/src/overlay/modals/ChangePoolRoles/index.tsx b/packages/app/src/overlay/modals/ChangePoolRoles/index.tsx
@@ -8,7 +8,7 @@ import { useBondedPools } from 'contexts/Pools/BondedPools'
 import { useSubmitExtrinsic } from 'hooks/useSubmitExtrinsic'
 import { SubmitTx } from 'library/SubmitTx'
 import { useTranslation } from 'react-i18next'
-import { ModalPadding, ModalTitle } from 'ui-core/overlay'
+import { Padding, Title } from 'ui-core/modal'
 import { Close, useOverlay } from 'ui-overlay'
 import { RoleChange } from './RoleChange'
 import { Wrapper } from './Wrapper'
@@ -47,8 +47,8 @@ export const ChangePoolRoles = () => {
   return (
     <>
       <Close />
-      <ModalPadding>
-        <ModalTitle>{t('changePoolRoles')}</ModalTitle>
+      <Padding>
+        <Title>{t('changePoolRoles')}</Title>
         <Wrapper>
           <RoleChange
             roleName={t('root')}
@@ -66,7 +66,7 @@ export const ChangePoolRoles = () => {
             newAddress={roleEdits?.bouncer?.newAddress}
           />
         </Wrapper>
-      </ModalPadding>
+      </Padding>
       <SubmitTx {...submitExtrinsic} valid />
     </>
   )

diff --git a/packages/app/src/overlay/modals/ChooseLanguage/index.tsx b/packages/app/src/overlay/modals/ChooseLanguage/index.tsx
@@ -5,7 +5,7 @@ import LanguageSVG from 'assets/svg/icons/language.svg?react'
 import { Title } from 'library/Modal/Title'
 import { changeLanguage, locales } from 'locales'
 import { useTranslation } from 'react-i18next'
-import { ModalPadding } from 'ui-core/overlay'
+import { Padding } from 'ui-core/modal'
 import { useOverlay } from 'ui-overlay'
 import { ContentWrapper, LocaleButton } from './Wrapper'
 
@@ -16,7 +16,7 @@ export const ChooseLanguage = () => {
   return (
     <>
       <Title title={t('chooseLanguage')} Svg={LanguageSVG} />
-      <ModalPadding>
+      <Padding>
         <ContentWrapper>
           <div className="item">
             {Object.entries(locales).map(([code, { label }], i) => (
@@ -38,7 +38,7 @@ export const ChooseLanguage = () => {
             ))}
           </div>
         </ContentWrapper>
-      </ModalPadding>
+      </Padding>
     </>
   )
 }
diff --git a/packages/app/src/overlay/modals/ClaimPayouts/Forms.tsx b/packages/app/src/overlay/modals/ClaimPayouts/Forms.tsx
@@ -19,7 +19,7 @@ import type { ForwardedRef } from 'react'
 import { forwardRef, useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { ButtonSubmitInvert } from 'ui-buttons'
-import { ModalPadding, ModalWarnings } from 'ui-core/overlay'
+import { Padding, Warnings } from 'ui-core/modal'
 import { useOverlay } from 'ui-overlay'
 import type { ActivePayout, FormProps } from './types'
 import { ContentWrapper } from './Wrappers'
@@ -136,13 +136,13 @@ export const Forms = forwardRef(
     return (
       <ContentWrapper>
         <div ref={ref}>
-          <ModalPadding horizontalOnly>
+          <Padding horizontalOnly>
             {warnings.length > 0 ? (
-              <ModalWarnings>
+              <Warnings>
                 {warnings.map((text, i) => (
                   <Warning key={`warning${i}`} text={text} />
                 ))}
-              </ModalWarnings>
+              </Warnings>
             ) : null}
             <div style={{ marginBottom: '2rem' }}>
               <ActionItem
@@ -153,7 +153,7 @@ export const Forms = forwardRef(
               />
               <p>{t('afterClaiming')}</p>
             </div>
-          </ModalPadding>
+          </Padding>
           <SubmitTx
             onResize={onResize}
             fromController={false}