feat(refactor): Add assets package, move svgs to package (#2361)

packages/app/package.json

@@ -33,6 +33,7 @@
     "@w3ux/react-polkicon": "^2.0.1-alpha.0",
     "@w3ux/validator-assets": "^0.2.0",
     "@zondax/ledger-substrate": "^1.0.0",
+    "assets": "workspace:*",
     "bn.js": "^5.2.1",
     "buffer": "^6.0.3",
     "chart.js": "^4.4.7",

packages/app/src/config/ledger.ts

@@ -1,9 +1,9 @@
 // Copyright 2024 @polkadot-cloud/polkadot-staking-dashboard authors & contributors
 // SPDX-License-Identifier: GPL-3.0-only
 
+import KusamaSVG from 'assets/svg/ledger/kusama.svg?react'
+import PolkadotSVG from 'assets/svg/ledger/polkadot.svg?react'
 import type { LedgerChain } from 'contexts/LedgerHardware/types'
-import KusamaSVG from 'img/appIcons/kusama.svg?react'
-import PolkadotSVG from 'img/appIcons/polkadot.svg?react'
 
 export const LedgerChains: LedgerChain[] = [
   {

packages/app/src/config/networks.ts

@@ -1,17 +1,17 @@
 // Copyright 2024 @polkadot-cloud/polkadot-staking-dashboard authors & contributors
 // SPDX-License-Identifier: GPL-3.0-only
 
+import KusamaIconSVG from 'assets/svg/kusamaIcon.svg?react'
+import KusamaInlineSVG from 'assets/svg/kusamaInline.svg?react'
+import PolkadotIconSVG from 'assets/svg/polkadotIcon.svg?react'
+import PolkadotInlineSVG from 'assets/svg/polkadotInline.svg?react'
+import WestendIconSVG from 'assets/svg/westendIcon.svg?react'
+import WestendInlineSVG from 'assets/svg/westendInline.svg?react'
 import BigNumber from 'bignumber.js'
 import type { Networks, SystemChain } from 'common-types'
 import PolkadotTokenSVG from 'config/tokens/svg/DOT.svg?react'
 import KusamaTokenSVG from 'config/tokens/svg/KSM.svg?react'
 import WestendTokenSVG from 'config/tokens/svg/WND.svg?react'
-import KusamaIconSVG from 'img/kusama_icon.svg?react'
-import KusamaInlineSVG from 'img/kusama_inline.svg?react'
-import PolkadotIconSVG from 'img/polkadot_icon.svg?react'
-import PolkadotInlineSVG from 'img/polkadot_inline.svg?react'
-import WestendIconSVG from 'img/westend_icon.svg?react'
-import WestendInlineSVG from 'img/westend_inline.svg?react'
 
 export const NetworkList: Networks = {
   polkadot: {

packages/app/src/library/Modal/Close.tsx

@@ -1,7 +1,7 @@
 // Copyright 2024 @polkadot-cloud/polkadot-staking-dashboard authors & contributors
 // SPDX-License-Identifier: GPL-3.0-only
 
-import CrossSVG from 'img/cross.svg?react'
+import CrossSVG from 'assets/svg/cross.svg?react'
 import { useOverlay } from 'kits/Overlay/Provider'
 import { CloseWrapper } from './Wrappers'
 

packages/app/src/library/Modal/Title.tsx

@@ -4,8 +4,8 @@
 import type { IconProp } from '@fortawesome/fontawesome-svg-core'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import type { AnyJson } from '@w3ux/types'
+import CrossSVG from 'assets/svg/cross.svg?react'
 import { useHelp } from 'contexts/Help'
-import CrossSVG from 'img/cross.svg?react'
 import { useOverlay } from 'kits/Overlay/Provider'
 import type { FunctionComponent, SVGProps } from 'react'
 import type { CSSProperties } from 'styled-components'

packages/app/src/library/SideMenu/index.tsx

@@ -5,22 +5,22 @@ import { faCompressAlt, faExpandAlt } from '@fortawesome/free-solid-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { useOnResize, useOutsideAlerter } from '@w3ux/hooks'
 import { capitalizeFirstLetter } from '@w3ux/utils'
+import BookSVG from 'assets/svg/book.svg?react'
+import CogOutlineSVG from 'assets/svg/cogOutline.svg?react'
+import DiscordSVG from 'assets/svg/discord.svg?react'
+import EnvelopeSVG from 'assets/svg/envelope.svg?react'
+import LanguageSVG from 'assets/svg/language.svg?react'
+import LogoSVG from 'assets/svg/logo.svg?react'
+import LogoGithubSVG from 'assets/svg/logoGithub.svg?react'
+import MoonOutlineSVG from 'assets/svg/moonOutline.svg?react'
+import SunnyOutlineSVG from 'assets/svg/sunnyOutline.svg?react'
 import { PageWidthMediumThreshold, SideMenuMaximisedWidth } from 'consts'
 import { useApi } from 'contexts/Api'
 import { useHelp } from 'contexts/Help'
 import { useNetwork } from 'contexts/Network'
 import { useTheme } from 'contexts/Themes'
 import { useUi } from 'contexts/UI'
 import type { UIContextInterface } from 'contexts/UI/types'
-import BookSVG from 'img/book.svg?react'
-import CogOutlineSVG from 'img/cog-outline.svg?react'
-import DiscordSVG from 'img/discord.svg?react'
-import EnvelopeSVG from 'img/envelope.svg?react'
-import LanguageSVG from 'img/language.svg?react'
-import LogoGithubSVG from 'img/logo-github.svg?react'
-import LogoSVG from 'img/logo.svg?react'
-import MoonOutlineSVG from 'img/moon-outline.svg?react'
-import SunnyOutlineSVG from 'img/sunny-outline.svg?react'
 import { useOverlay } from 'kits/Overlay/Provider'
 import { useRef } from 'react'
 import { useTranslation } from 'react-i18next'

packages/app/src/modals/ChooseLanguage/index.tsx

@@ -1,7 +1,7 @@
 // Copyright 2024 @polkadot-cloud/polkadot-staking-dashboard authors & contributors
 // SPDX-License-Identifier: GPL-3.0-only
 
-import LanguageSVG from 'img/language.svg?react'
+import LanguageSVG from 'assets/svg/language.svg?react'
 import { useOverlay } from 'kits/Overlay/Provider'
 import { ModalPadding } from 'kits/Overlay/structure/ModalPadding'
 import { Title } from 'library/Modal/Title'

packages/app/src/modals/DiscordSupport/index.tsx

@@ -3,8 +3,8 @@
 
 import { faExternalLinkAlt } from '@fortawesome/free-solid-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import DiscordOutlineSvg from 'assets/svg/discordOutline.svg?react'
 import { DiscordSupportUrl } from 'consts'
-import DiscordOutlineSvg from 'img/discord_outline.svg?react'
 import { ModalPadding } from 'kits/Overlay/structure/ModalPadding'
 import { Title } from 'library/Modal/Title'
 import { useTranslation } from 'react-i18next'

packages/app/src/modals/MailSupport/index.tsx

@@ -1,8 +1,8 @@
 // Copyright 2024 @polkadot-cloud/polkadot-staking-dashboard authors & contributors
 // SPDX-License-Identifier: GPL-3.0-only
 
+import MailSVG from 'assets/svg/mail.svg?react'
 import { MailSupportAddress } from 'consts'
-import MailSVG from 'img/mail.svg?react'
 import { ModalPadding } from 'kits/Overlay/structure/ModalPadding'
 import { Title } from 'library/Modal/Title'
 import { useTranslation } from 'react-i18next'

packages/app/src/modals/Networks/index.tsx

@@ -4,6 +4,7 @@
 import { faChevronRight, faGlobe } from '@fortawesome/free-solid-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { capitalizeFirstLetter } from '@w3ux/utils'
+import BraveIconSVG from 'assets/svg/braveLogo.svg?react'
 import type { NetworkId } from 'common-types'
 import { NetworkList } from 'config/networks'
 import { useApi } from 'contexts/Api'
@@ -16,7 +17,6 @@ import { Title } from 'library/Modal/Title'
 import { useEffect } from 'react'
 import { Trans, useTranslation } from 'react-i18next'
 import { ButtonTertiary } from 'ui-buttons'
-import BraveIconSVG from '../../img/brave-logo.svg?react'
 import { ProvidersPrompt } from './ProvidersPrompt'
 import {
   BraveWarning,

packages/assets/package.json

@@ -0,0 +1,13 @@
+{
+  "name": "assets",
+  "version": "1.0.0",
+  "license": "GPL-3.0-only",
+  "type": "module",
+  "scripts": {
+    "clear": "rm -rf build dist",
+    "reset": "yarn run clear &&  rm -rf node_modules yarn.lock && yarn"
+  },
+  "exports": {
+    "./svg/*": "./src/svg/*"
+  }
+}

packages/styles/package.json

@@ -5,7 +5,7 @@
   "type": "module",
   "main": "src/",
   "scripts": {
-    "clear": "rm -rf build tsconfig.tsbuildinfo dist",
+    "clear": "rm -rf build dist",
     "reset": "yarn run clear &&  rm -rf node_modules yarn.lock && yarn"
   }
 }

release-please-config.json

@@ -3,6 +3,7 @@
   "include-component-in-tag": true,
   "packages": {
     "packages/app": {},
+    "packages/assets": {},
     "packages/consts": {},
     "packages/locales": {},
     "packages/styles": {},

yarn.lock

@@ -4744,6 +4744,7 @@ __metadata:
     "@w3ux/react-polkicon": "npm:^2.0.1-alpha.0"
     "@w3ux/validator-assets": "npm:^0.2.0"
     "@zondax/ledger-substrate": "npm:^1.0.0"
+    assets: "workspace:*"
     bn.js: "npm:^5.2.1"
     buffer: "npm:^6.0.3"
     chart.js: "npm:^4.4.7"
@@ -4905,6 +4906,12 @@ __metadata:
   languageName: node
   linkType: hard
 
+"assets@workspace:*, assets@workspace:packages/assets":
+  version: 0.0.0-use.local
+  resolution: "assets@workspace:packages/assets"
+  languageName: unknown
+  linkType: soft
+
 "async-mutex@npm:^0.2.6":
   version: 0.2.6
   resolution: "async-mutex@npm:0.2.6"