From d51161d424921ee002812cf69d40f5ee27a464ad Mon Sep 17 00:00:00 2001 From: Francisco Ramos Date: Mon, 10 Jul 2023 08:20:38 +0200 Subject: [PATCH] feat(bridge-ui-v2): switch chain (#14117) Co-authored-by: David Co-authored-by: dave | d1onys1us <13951458+d1onys1us@users.noreply.github.com> --- packages/bridge-ui-v2/package.json | 1 + .../AccountConnectionToast.svelte | 23 +++++ .../AccountConnectionToast/index.ts | 1 + .../components/Activities/Activities.svelte | 3 +- .../components/AmountInput/AmountInput.svelte | 6 +- .../src/components/Bridge/Bridge.svelte | 31 +++++-- .../ChainSelector/ChainSelector.svelte | 37 +++++--- .../ConnectButton/ConnectButton.svelte | 51 +++++++++++ .../src/components/ConnectButton/index.ts | 1 + .../src/components/Faucet/Faucet.svelte | 3 +- .../src/components/Header/Header.svelte | 50 +---------- .../src/components/Icon/Icon.svelte | 9 +- .../NotificationToast/ItemToast.svelte | 69 +++++++++++++++ .../NotificationToast.svelte | 88 +++++++++++++++++++ .../src/components/NotificationToast/index.ts | 2 + .../src/components/NotificationToast/types.ts | 1 + .../ProcessingFee/ProcessingFee.svelte | 5 +- .../SideNavigation/SideNavigation.svelte | 10 ++- .../TokenDropdown/TokenDropdown.svelte | 2 +- packages/bridge-ui-v2/src/i18n/en.json | 8 ++ .../src/libs/connect/web3modal.ts | 3 + .../bridge-ui-v2/src/libs/emitter/emitter.ts | 3 + .../bridge-ui-v2/src/libs/emitter/index.ts | 1 + .../bridge-ui-v2/src/libs/wagmi/watcher.ts | 8 +- .../bridge-ui-v2/src/routes/+layout.svelte | 11 ++- packages/bridge-ui-v2/src/stores/network.ts | 4 +- packages/bridge-ui-v2/src/styles/base.css | 9 ++ packages/bridge-ui-v2/tailwind.config.js | 24 ++++- pnpm-lock.yaml | 54 ++++++++---- 29 files changed, 416 insertions(+), 102 deletions(-) create mode 100644 packages/bridge-ui-v2/src/components/AccountConnectionToast/AccountConnectionToast.svelte create mode 100644 packages/bridge-ui-v2/src/components/AccountConnectionToast/index.ts create mode 100644 packages/bridge-ui-v2/src/components/ConnectButton/ConnectButton.svelte create mode 100644 packages/bridge-ui-v2/src/components/ConnectButton/index.ts create mode 100644 packages/bridge-ui-v2/src/components/NotificationToast/ItemToast.svelte create mode 100644 packages/bridge-ui-v2/src/components/NotificationToast/NotificationToast.svelte create mode 100644 packages/bridge-ui-v2/src/components/NotificationToast/index.ts create mode 100644 packages/bridge-ui-v2/src/components/NotificationToast/types.ts create mode 100644 packages/bridge-ui-v2/src/libs/emitter/emitter.ts create mode 100644 packages/bridge-ui-v2/src/libs/emitter/index.ts diff --git a/packages/bridge-ui-v2/package.json b/packages/bridge-ui-v2/package.json index cc98a80b971..f15afd23151 100644 --- a/packages/bridge-ui-v2/package.json +++ b/packages/bridge-ui-v2/package.json @@ -49,6 +49,7 @@ "@wagmi/core": "^1.3.6", "@web3modal/ethereum": "^2.6.2", "@web3modal/html": "^2.6.2", + "@zerodevx/svelte-toast": "^0.9.5", "abitype": "^0.8.2", "debug": "^4.3.4", "svelte-i18n": "^3.6.0", diff --git a/packages/bridge-ui-v2/src/components/AccountConnectionToast/AccountConnectionToast.svelte b/packages/bridge-ui-v2/src/components/AccountConnectionToast/AccountConnectionToast.svelte new file mode 100644 index 00000000000..4dfec03c35d --- /dev/null +++ b/packages/bridge-ui-v2/src/components/AccountConnectionToast/AccountConnectionToast.svelte @@ -0,0 +1,23 @@ + diff --git a/packages/bridge-ui-v2/src/components/AccountConnectionToast/index.ts b/packages/bridge-ui-v2/src/components/AccountConnectionToast/index.ts new file mode 100644 index 00000000000..6a773136263 --- /dev/null +++ b/packages/bridge-ui-v2/src/components/AccountConnectionToast/index.ts @@ -0,0 +1 @@ +export { default as AccountConnectionToast } from './AccountConnectionToast.svelte'; diff --git a/packages/bridge-ui-v2/src/components/Activities/Activities.svelte b/packages/bridge-ui-v2/src/components/Activities/Activities.svelte index fb51e91a2ac..4582e168672 100644 --- a/packages/bridge-ui-v2/src/components/Activities/Activities.svelte +++ b/packages/bridge-ui-v2/src/components/Activities/Activities.svelte @@ -3,6 +3,7 @@ import { Card } from '$components/Card'; import { ChainSelector } from '$components/ChainSelector'; + import { srcChain } from '$stores/network'; import ListWithDetailsView from './ListWithDetailsView.svelte'; import TableView from './TableView.svelte'; @@ -10,7 +11,7 @@
- +
diff --git a/packages/bridge-ui-v2/src/components/AmountInput/AmountInput.svelte b/packages/bridge-ui-v2/src/components/AmountInput/AmountInput.svelte index 2ee55238db9..7f92fdf456f 100644 --- a/packages/bridge-ui-v2/src/components/AmountInput/AmountInput.svelte +++ b/packages/bridge-ui-v2/src/components/AmountInput/AmountInput.svelte @@ -8,9 +8,9 @@
-
- -
+
+ +
{$t('amount_input.balance')}: 399.92 ETH
diff --git a/packages/bridge-ui-v2/src/components/Bridge/Bridge.svelte b/packages/bridge-ui-v2/src/components/Bridge/Bridge.svelte index 163b9e11b03..0907877d42d 100644 --- a/packages/bridge-ui-v2/src/components/Bridge/Bridge.svelte +++ b/packages/bridge-ui-v2/src/components/Bridge/Bridge.svelte @@ -1,4 +1,5 @@ -
- +
-
- +
diff --git a/packages/bridge-ui-v2/src/components/ChainSelector/ChainSelector.svelte b/packages/bridge-ui-v2/src/components/ChainSelector/ChainSelector.svelte index 2a1e91ea097..ec192b9a57f 100644 --- a/packages/bridge-ui-v2/src/components/ChainSelector/ChainSelector.svelte +++ b/packages/bridge-ui-v2/src/components/ChainSelector/ChainSelector.svelte @@ -1,15 +1,20 @@ + + +{#if connected} + +{:else} + + +{/if} diff --git a/packages/bridge-ui-v2/src/components/ConnectButton/index.ts b/packages/bridge-ui-v2/src/components/ConnectButton/index.ts new file mode 100644 index 00000000000..8689eb3417a --- /dev/null +++ b/packages/bridge-ui-v2/src/components/ConnectButton/index.ts @@ -0,0 +1 @@ +export { default as ConnectButton } from './ConnectButton.svelte'; diff --git a/packages/bridge-ui-v2/src/components/Faucet/Faucet.svelte b/packages/bridge-ui-v2/src/components/Faucet/Faucet.svelte index ffbb8b9e3a9..d338844357b 100644 --- a/packages/bridge-ui-v2/src/components/Faucet/Faucet.svelte +++ b/packages/bridge-ui-v2/src/components/Faucet/Faucet.svelte @@ -7,12 +7,13 @@ import { ChainSelector } from '$components/ChainSelector'; import { TokenDropdown } from '$components/TokenDropdown'; import { testERC20Tokens } from '$libs/token'; + import { srcChain } from '$stores/network';
- +
diff --git a/packages/bridge-ui-v2/src/components/Header/Header.svelte b/packages/bridge-ui-v2/src/components/Header/Header.svelte index 283b148df20..843a80c5e8c 100644 --- a/packages/bridge-ui-v2/src/components/Header/Header.svelte +++ b/packages/bridge-ui-v2/src/components/Header/Header.svelte @@ -1,33 +1,9 @@
- - {#if connected} - - {:else} - - - {/if} +
-
+ +
diff --git a/packages/bridge-ui-v2/src/components/SideNavigation/SideNavigation.svelte b/packages/bridge-ui-v2/src/components/SideNavigation/SideNavigation.svelte index 5ef36f806d2..bfbcbb6b78b 100644 --- a/packages/bridge-ui-v2/src/components/SideNavigation/SideNavigation.svelte +++ b/packages/bridge-ui-v2/src/components/SideNavigation/SideNavigation.svelte @@ -26,6 +26,10 @@ closeDrawer(); } } + + function getIconFillClass(active: boolean) { + return active ? 'fill-white' : 'fill-primary-icon'; + }
@@ -67,19 +71,19 @@
  • - + {$t('nav.bridge')}
  • - + {$t('nav.faucet')}
  • - + {$t('nav.activities')}
    • diff --git a/packages/bridge-ui-v2/src/components/TokenDropdown/TokenDropdown.svelte b/packages/bridge-ui-v2/src/components/TokenDropdown/TokenDropdown.svelte index d531c7f3cee..fd7c88dc19d 100644 --- a/packages/bridge-ui-v2/src/components/TokenDropdown/TokenDropdown.svelte +++ b/packages/bridge-ui-v2/src/components/TokenDropdown/TokenDropdown.svelte @@ -70,7 +70,7 @@ on:focus={openMenu}>
    {#if !selectedToken} - {$t('token_dropdown.placeholder')}… + {$t('token_dropdown.placeholder')} {/if} {#if selectedToken}
    diff --git a/packages/bridge-ui-v2/src/i18n/en.json b/packages/bridge-ui-v2/src/i18n/en.json index adcd3937c29..73968653920 100644 --- a/packages/bridge-ui-v2/src/i18n/en.json +++ b/packages/bridge-ui-v2/src/i18n/en.json @@ -78,6 +78,14 @@ "currently_on": "You are currently on" }, + "messages": { + "account": { + "required": "Please connect your wallet", + "connected": "Account connected", + "disconnected": "Account disconnected" + } + }, + "chain": { "to": "To", "from": "From" diff --git a/packages/bridge-ui-v2/src/libs/connect/web3modal.ts b/packages/bridge-ui-v2/src/libs/connect/web3modal.ts index 786e52b96c3..84ce1d50f68 100644 --- a/packages/bridge-ui-v2/src/libs/connect/web3modal.ts +++ b/packages/bridge-ui-v2/src/libs/connect/web3modal.ts @@ -12,6 +12,9 @@ const ethereumClient = new EthereumClient(wagmiConfig, chains); export const web3modal = new Web3Modal( { projectId, + enableNetworkViews: true, + enableAccountView: true, + enableExplorer: true, chainImages: { [PUBLIC_L1_CHAIN_ID]: '/ethereum-chain.png', [PUBLIC_L2_CHAIN_ID]: '/taiko-chain.png', diff --git a/packages/bridge-ui-v2/src/libs/emitter/emitter.ts b/packages/bridge-ui-v2/src/libs/emitter/emitter.ts new file mode 100644 index 00000000000..1f0a6c95b3f --- /dev/null +++ b/packages/bridge-ui-v2/src/libs/emitter/emitter.ts @@ -0,0 +1,3 @@ +import { EventEmitter } from 'events'; + +export const emitter = new EventEmitter(); diff --git a/packages/bridge-ui-v2/src/libs/emitter/index.ts b/packages/bridge-ui-v2/src/libs/emitter/index.ts new file mode 100644 index 00000000000..193c4a5ab69 --- /dev/null +++ b/packages/bridge-ui-v2/src/libs/emitter/index.ts @@ -0,0 +1 @@ +export { emitter } from './emitter'; diff --git a/packages/bridge-ui-v2/src/libs/wagmi/watcher.ts b/packages/bridge-ui-v2/src/libs/wagmi/watcher.ts index 59b44c906da..a52725551ae 100644 --- a/packages/bridge-ui-v2/src/libs/wagmi/watcher.ts +++ b/packages/bridge-ui-v2/src/libs/wagmi/watcher.ts @@ -2,7 +2,7 @@ import { watchAccount, watchNetwork /*, watchPublicClient, watchWalletClient*/ } import { getLogger } from '$libs/util/logger'; import { account } from '$stores/account'; -import { network } from '$stores/network'; +import { srcChain } from '$stores/network'; const log = getLogger('wagmi:watcher'); @@ -16,13 +16,17 @@ export function startWatching() { // See https://wagmi.sh/core/actions/watchNetwork unWatchNetwork = watchNetwork((data) => { log('Network changed', data); - network.set(data); + + // When we switch networks, we are actually selecting + // the source chain. + srcChain.set(data.chain); }); // Action for subscribing to account changes. // See https://wagmi.sh/core/actions/watchAccount unWatchAccount = watchAccount((data) => { log('Account changed', data); + account.set(data); }); diff --git a/packages/bridge-ui-v2/src/routes/+layout.svelte b/packages/bridge-ui-v2/src/routes/+layout.svelte index d8bcc5efc5b..ebc2cf78fa9 100644 --- a/packages/bridge-ui-v2/src/routes/+layout.svelte +++ b/packages/bridge-ui-v2/src/routes/+layout.svelte @@ -4,20 +4,23 @@ import { onDestroy, onMount } from 'svelte'; + import { AccountConnectionToast } from '$components/AccountConnectionToast'; import { Header } from '$components/Header'; + import { NotificationToast } from '$components/NotificationToast'; import { SideNavigation } from '$components/SideNavigation'; import { startWatching, stopWatching } from '$libs/wagmi'; - import { account } from '$stores/account'; - - $: connected = Boolean($account?.isConnected); onMount(startWatching); onDestroy(stopWatching); -
    +
    + + + + diff --git a/packages/bridge-ui-v2/src/stores/network.ts b/packages/bridge-ui-v2/src/stores/network.ts index aebabb1a899..a4e6a81ed62 100644 --- a/packages/bridge-ui-v2/src/stores/network.ts +++ b/packages/bridge-ui-v2/src/stores/network.ts @@ -1,4 +1,6 @@ import type { GetNetworkResult } from '@wagmi/core'; import { writable } from 'svelte/store'; -export const network = writable(); +export const srcChain = writable(); + +export const destChain = writable(); diff --git a/packages/bridge-ui-v2/src/styles/base.css b/packages/bridge-ui-v2/src/styles/base.css index fc354f0b5b0..326e28d9e74 100644 --- a/packages/bridge-ui-v2/src/styles/base.css +++ b/packages/bridge-ui-v2/src/styles/base.css @@ -1,6 +1,15 @@ @tailwind base; @layer base { + *, + ::after, + ::before { + text-rendering: optimizespeed; + -webkit-font-smoothing: antialiased; + -webkit-tap-highlight-color: transparent; + backface-visibility: hidden; + } + html { font-family: 'Public Sans', sans-serif; } diff --git a/packages/bridge-ui-v2/tailwind.config.js b/packages/bridge-ui-v2/tailwind.config.js index 444e3a2dfea..106fc54a1d5 100644 --- a/packages/bridge-ui-v2/tailwind.config.js +++ b/packages/bridge-ui-v2/tailwind.config.js @@ -143,9 +143,20 @@ export default { }, }, - 'positive-sentiment': 'var(--positive-sentiment)', - 'negative-sentiment': 'var(--negative-sentiment)', - 'warning-sentiment': 'var(--warning-sentiment)', + positive: { + sentiment: 'var(--positive-sentiment)', + background: 'var(--positive-background)', + }, + + negative: { + sentiment: 'var(--negative-sentiment)', + background: 'var(--negative-background)', + }, + + warning: { + sentiment: 'var(--warning-sentiment)', + background: 'var(--warning-background)', + }, 'elevated-background': 'var(--elevated-background)', 'neutral-background': 'var(--neutral-background)', @@ -190,7 +201,7 @@ export default { '--secondary-brand': '#E81899', // pink-400 '--secondary-content': '#ADB1B8', // grey-200 - '--secondary-icon': '#444A55', // grey-600 + '--secondary-icon': '#2B303B', // grey-700 '--secondary-interactive-hover': '#2B303B', // grey-700 '--tertiary-content': '#5D636F', // grey-500 @@ -198,8 +209,13 @@ export default { '--tertiary-interactive-accent': '#5D636F', // grey-500 '--positive-sentiment': '#47E0A0', // green-300 + '--positive-background': '#00321D', // green-800 + '--negative-sentiment': '#F15C5D', // red-300 + '--negative-background': '#440000', // red-800 + '--warning-sentiment': '#EBB222', // yellow-400 + '--warning-background': '#382800', // yellow-800 '--elevated-background': '#191E28', // grey-800 '--neutral-background': '#2B303B', // grey-700 diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index c727660c3a0..afc94881f6b 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -212,12 +212,15 @@ importers: '@web3modal/html': specifier: ^2.6.2 version: 2.6.2(react@18.2.0) + '@zerodevx/svelte-toast': + specifier: ^0.9.5 + version: 0.9.5(svelte@3.54.0) abitype: specifier: ^0.8.2 version: 0.8.11(typescript@5.1.6) debug: specifier: ^4.3.4 - version: 4.3.4(supports-color@8.1.1) + version: 4.3.4 svelte-i18n: specifier: ^3.6.0 version: 3.6.0(svelte@3.54.0) @@ -2438,7 +2441,7 @@ packages: engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} dependencies: ajv: 6.12.6 - debug: 4.3.4(supports-color@8.1.1) + debug: 4.3.4 espree: 9.6.0 globals: 13.20.0 ignore: 5.2.4 @@ -2954,7 +2957,7 @@ packages: engines: {node: '>=10.10.0'} dependencies: '@humanwhocodes/object-schema': 1.2.1 - debug: 4.3.4(supports-color@8.1.1) + debug: 4.3.4 minimatch: 3.1.2 transitivePeerDependencies: - supports-color @@ -3330,7 +3333,7 @@ packages: engines: {node: '>=14.0.0'} dependencies: '@types/debug': 4.1.8 - debug: 4.3.4(supports-color@8.1.1) + debug: 4.3.4 semver: 7.5.3 superstruct: 1.0.3 transitivePeerDependencies: @@ -4798,7 +4801,7 @@ packages: vite: ^4.0.0 dependencies: '@sveltejs/vite-plugin-svelte': 2.4.2(svelte@3.54.0)(vite@4.3.0) - debug: 4.3.4(supports-color@8.1.1) + debug: 4.3.4 svelte: 3.54.0 vite: 4.3.0(@types/node@20.4.0) transitivePeerDependencies: @@ -4836,7 +4839,7 @@ packages: vite: ^4.0.0 dependencies: '@sveltejs/vite-plugin-svelte-inspector': 1.0.3(@sveltejs/vite-plugin-svelte@2.4.2)(svelte@3.54.0)(vite@4.3.0) - debug: 4.3.4(supports-color@8.1.1) + debug: 4.3.4 deepmerge: 4.3.1 kleur: 4.1.5 magic-string: 0.30.1 @@ -5506,7 +5509,7 @@ packages: '@typescript-eslint/scope-manager': 5.45.0 '@typescript-eslint/type-utils': 5.45.0(eslint@8.28.0)(typescript@5.1.6) '@typescript-eslint/utils': 5.45.0(eslint@8.28.0)(typescript@5.1.6) - debug: 4.3.4(supports-color@8.1.1) + debug: 4.3.4 eslint: 8.28.0 ignore: 5.2.4 natural-compare-lite: 1.4.0 @@ -5616,7 +5619,7 @@ packages: '@typescript-eslint/scope-manager': 5.45.0 '@typescript-eslint/types': 5.45.0 '@typescript-eslint/typescript-estree': 5.45.0(typescript@5.1.6) - debug: 4.3.4(supports-color@8.1.1) + debug: 4.3.4 eslint: 8.28.0 typescript: 5.1.6 transitivePeerDependencies: @@ -5699,7 +5702,7 @@ packages: dependencies: '@typescript-eslint/typescript-estree': 5.45.0(typescript@5.1.6) '@typescript-eslint/utils': 5.45.0(eslint@8.28.0)(typescript@5.1.6) - debug: 4.3.4(supports-color@8.1.1) + debug: 4.3.4 eslint: 8.28.0 tsutils: 3.21.0(typescript@5.1.6) typescript: 5.1.6 @@ -5795,7 +5798,7 @@ packages: dependencies: '@typescript-eslint/types': 5.45.0 '@typescript-eslint/visitor-keys': 5.45.0 - debug: 4.3.4(supports-color@8.1.1) + debug: 4.3.4 globby: 11.1.0 is-glob: 4.0.3 semver: 7.5.3 @@ -7144,6 +7147,14 @@ packages: resolution: {integrity: sha512-k0W1JFoqHIcIQaP9ij99+Rv0ugaQSSNwOuNwwmTGRjWtIqrQr+ExLDE8LQGXLlJIprqDyMWB4lJkUql/r0RAtA==} dev: true + /@zerodevx/svelte-toast@0.9.5(svelte@3.54.0): + resolution: {integrity: sha512-JLeB/oRdJfT+dz9A5bgd3Z7TuQnBQbeUtXrGIrNWMGqWbabpepBF2KxtWVhL2qtxpRqhae2f6NAOzH7xs4jUSw==} + peerDependencies: + svelte: ^3.57.0 || ^4.0.0 + dependencies: + svelte: 3.54.0 + dev: false + /JSONStream@1.3.5: resolution: {integrity: sha512-E+iruNOY8VV9s4JEbe1aNEm6MiszPRr/UfcHMz0TQh1BXSxHK+ASV1R6W4HpjBhSeS+54PIsAMCBmwD06LLsqQ==} hasBin: true @@ -7415,7 +7426,7 @@ packages: resolution: {integrity: sha512-7Epl1Blf4Sy37j4v9f9FjICCh4+KAQOyXgHEwlyBiAQLbhKdq/i2QQU3amQalS/wPhdPzDXPL5DMR5bkn+YeWg==} engines: {node: '>= 8.0.0'} dependencies: - debug: 4.3.4(supports-color@8.1.1) + debug: 4.3.4 depd: 2.0.0 humanize-ms: 1.2.1 transitivePeerDependencies: @@ -10483,6 +10494,17 @@ packages: ms: 2.1.3 dev: true + /debug@4.3.4: + resolution: {integrity: sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==} + engines: {node: '>=6.0'} + peerDependencies: + supports-color: '*' + peerDependenciesMeta: + supports-color: + optional: true + dependencies: + ms: 2.1.2 + /debug@4.3.4(supports-color@8.1.1): resolution: {integrity: sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==} engines: {node: '>=6.0'} @@ -11886,7 +11908,7 @@ packages: dependencies: '@eslint-community/eslint-utils': 4.4.0(eslint@8.28.0) '@jridgewell/sourcemap-codec': 1.4.15 - debug: 4.3.4(supports-color@8.1.1) + debug: 4.3.4 eslint: 8.28.0 esutils: 2.0.3 known-css-properties: 0.27.0 @@ -12029,7 +12051,7 @@ packages: ajv: 6.12.6 chalk: 4.1.2 cross-spawn: 7.0.3 - debug: 4.3.4(supports-color@8.1.1) + debug: 4.3.4 doctrine: 3.0.0 escape-string-regexp: 4.0.0 eslint-scope: 7.2.0 @@ -23081,7 +23103,7 @@ packages: hasBin: true dependencies: cac: 6.7.14 - debug: 4.3.4(supports-color@8.1.1) + debug: 4.3.4 mlly: 1.4.0 pathe: 1.1.1 picocolors: 1.0.0 @@ -23117,7 +23139,7 @@ packages: vite: optional: true dependencies: - debug: 4.3.4(supports-color@8.1.1) + debug: 4.3.4 globrex: 0.1.2 tsconfck: 2.1.1(typescript@5.1.6) vite: 4.3.0(@types/node@20.4.0) @@ -23241,7 +23263,7 @@ packages: cac: 6.7.14 chai: 4.3.7 concordance: 5.0.4 - debug: 4.3.4(supports-color@8.1.1) + debug: 4.3.4 local-pkg: 0.4.3 magic-string: 0.30.1 pathe: 1.1.1