feature/mobile (#1384)

* 💅 Cosmetic touches * update sidebar layout * update connect modal layout * adjust breakpoints for a mobile-first approach * adjust spacing * simplify flexbox layouts * remove semantic heading elements * remove spacer element * update modal component * adjust breakpoint for mobile-first approach * simplify style * rearrange class names * adjust demo color variables * fix spacing on warnings container * wallet button updates * update breakpoints to mobile-first approach * remove layout helper classes * consolidate layout styles * adjust status icon sizes and placement * remove duplicate line * remove property from demo styling * this way we can see the default styles without this particular override * add margin bottom fix for some mobile screens * fix circleci config + default min on mobile * Update packages/demo/package.json * Address PR comments * 💅 Tidying up * Add keepkey back, fix package versions Co-authored-by: Gustavo Esquinca <[email protected]> Co-authored-by: Adam Carpenter <[email protected]>
blocknative · Dec 13, 2022 · 725d751 · 725d751
1 parent 0ef5228
commit 725d751
Show file tree

Hide file tree

Showing 36 changed files with 9,554 additions and 252 deletions.
diff --git a/examples/with-vite-react/src/blocknative.ts b/examples/with-vite-react/src/blocknative.ts
@@ -0,0 +1,31 @@
+export default `<svg width="100%" height="100%" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#filter0_i_452_72)">
+<path d="M32 0H8C3.58172 0 0 3.58172 0 8V32C0 36.4183 3.58172 40 8 40H32C36.4183 40 40 36.4183 40 32V8C40 3.58172 36.4183 0 32 0Z" fill="#262A3D"/>
+<path d="M14.7267 25.7L11.4385 19.9963H18.0154L21.3041 25.7H14.7267Z" fill="#262A3D"/>
+<path d="M14.7267 25.7L11.4385 19.9963H18.0154L21.3041 25.7H14.7267Z" fill="white"/>
+<path d="M18.0154 19.9962H11.4385L14.7267 14.2925H21.3041L18.0154 19.9962Z" fill="url(#paint0_linear_452_72)"/>
+<path d="M24.5928 19.9963L21.3041 14.2926H14.7267L11.4385 8.58887H24.5928L31.1698 19.9963H24.5928Z" fill="#262A3D"/>
+<path d="M24.5928 19.9963L21.3041 14.2926H14.7267L11.4385 8.58887H24.5928L31.1698 19.9963H24.5928Z" fill="white"/>
+<path d="M24.5928 31.4037H11.4385L14.7267 25.7H21.3041L24.5928 19.9963H31.1698L24.5928 31.4037Z" fill="url(#paint1_linear_452_72)"/>
+</g>
+<defs>
+<filter id="filter0_i_452_72" x="0" y="0" width="40" height="42" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="2"/>
+<feGaussianBlur stdDeviation="4"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0"/>
+<feBlend mode="normal" in2="shape" result="effect1_innerShadow_452_72"/>
+</filter>
+<linearGradient id="paint0_linear_452_72" x1="11.4385" y1="17.1444" x2="21.3041" y2="17.1444" gradientUnits="userSpaceOnUse">
+<stop stop-color="#55CCFE"/>
+<stop offset="1" stop-color="#5E93EF"/>
+</linearGradient>
+<linearGradient id="paint1_linear_452_72" x1="54.6499" y1="3724.32" x2="7422.7" y2="3724.32" gradientUnits="userSpaceOnUse">
+<stop stop-color="#55CCFE"/>
+<stop offset="1" stop-color="#5E93EF"/>
+</linearGradient>
+</defs>
+</svg>`
diff --git a/examples/with-vite-react/src/web3-onboard.ts b/examples/with-vite-react/src/web3-onboard.ts
@@ -15,9 +15,11 @@ import mewModule from '@web3-onboard/mew'
 import sequenceModule from '@web3-onboard/sequence'
 import tallyHoWalletModule from '@web3-onboard/tallyho'
 import web3authModule from '@web3-onboard/web3auth'
-
 import { init } from '@web3-onboard/react'
 
+// Import the blocknative icon
+import icon from './blocknative'
+
 const INFURA_KEY = '2896ff3d0a1143689424a8341cb75c67'
 
 const injected = injectedModule({
@@ -128,7 +130,7 @@ export default init({
     // The name of your dApp
     name: 'Blocknative',
     // SVG icon string, with height or width (whichever is larger) set to 100% or a valid image URL
-    icon: '<svg></svg>',
+    icon,
     // Optional wide format logo (ie icon and text) to be displayed in the sidebar of connect modal. Defaults to icon if not provided
     logo: '<svg></svg>',
     // The description of your app

diff --git a/packages/core/README.md b/packages/core/README.md
@@ -115,7 +115,7 @@ Onboard is using the [ICU syntax](https://formatjs.io/docs/core-concepts/icu-syn
 An object mapping for W3O components with the key being the DOM element to mount the specified component to.
 This defines the DOM container element for svelte to attach the component.
 
-**NOTE**: containerElement must be a DOM element with a styleSheet property attached and the element must be available on the DOM at the time of component mounting. 
+**NOTE**: containerElement must be a DOM element with a styleSheet property attached and the element must be available on the DOM at the time of component mounting.
 For an example please see containerElement usage [here](https://github.com/blocknative/web3-onboard/blob/8531a73d69365f7d584320f1c4b97a5d90f1c34e/packages/demo/src/App.svelte#L227)
 
 ```typescript
@@ -882,6 +882,7 @@ The Onboard styles can customized via [CSS variables](https://developer.mozilla.
   --onboard-connect-content-width
   --onboard-connect-content-height
   --onboard-wallet-columns
+  --onboard-connect-sidebar-border-color
   --onboard-connect-sidebar-background
   --onboard-connect-sidebar-color
   --onboard-connect-sidebar-progress-background
@@ -942,6 +943,7 @@ The Onboard styles can customized via [CSS variables](https://developer.mozilla.
   --onboard-border-radius-1: 24px;
   --onboard-border-radius-2: 20px;
   --onboard-border-radius-3: 16px;
+  --onboard-border-radius-4: 12px;
 
   /* SHADOWS */
   --onboard-shadow-0: none;

diff --git a/packages/core/package.json b/packages/core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@web3-onboard/core",
-  "version": "2.11.1",
+  "version": "2.12.0-alpha.1",
   "description": "Web3-Onboard makes it simple to connect Ethereum hardware and software wallets to your dapp. Features standardized spec compliant web3 providers for all supported wallets, framework agnostic modern javascript UI with code splitting, CSS customization, multi-chain and multi-account support, reactive wallet state subscriptions and real-time transaction state change notifications.",
   "keywords": [
     "Ethereum",
@@ -46,7 +46,8 @@
     "dev": "rollup -c -w",
     "start": "sirv public --no-clear",
     "type-check": "svelte-check --tsconfig ./tsconfig.json",
-    "lint": "eslint -c './.eslintrc.cjs' './src' && prettier --check './src/**/*'"
+    "lint": "eslint -c './.eslintrc.cjs' './src' && prettier --check './src/**/*'",
+    "lint:fix": "eslint --fix -c './.eslintrc.cjs' './src' && prettier --write './src/**/*'"
   },
   "typings": "dist/index.d.ts",
   "files": [

diff --git a/packages/core/src/constants.ts b/packages/core/src/constants.ts
@@ -32,3 +32,5 @@ export const APP_INITIAL_STATE: AppState = {
 export const STORAGE_KEYS = {
   TERMS_AGREEMENT: 'onboard.js:agreement'
 }
+
+export const MOBILE_WINDOW_WIDTH = 768
diff --git a/packages/core/src/icons/index.ts b/packages/core/src/icons/index.ts
@@ -0,0 +1,21 @@
+export { default as hourglass } from './hourglass.js'
+export { default as blocknative } from './blocknative.js'
+export { default as ethereumIcon } from './ethereum.js'
+export { default as polygonIcon } from './polygon.js'
+export { default as questionIcon } from './question.js'
+export { default as binanceIcon } from './binance.js'
+export { default as fantomIcon } from './fantom.js'
+export { default as optimismIcon } from './optimism.js'
+export { default as avalancheIcon } from './avalanche.js'
+export { default as celoIcon } from './celo.js'
+export { default as gnosisIcon } from './gnosis.js'
+export { default as harmonyOneIcon } from './harmony-one.js'
+export { default as arbitrumIcon } from './arbitrum.js'
+export { default as checkmark } from './checkmark.js'
+export { default as errorIcon } from './error.js'
+export { default as infoIcon } from './info.js'
+export { default as caretIcon } from './caret.js'
+export { default as warningIcon } from './warning.js'
+export { default as successIcon } from './success.js'
+export { default as pendingIcon } from './pending.js'
+export { default as poweredByBlocknativeIcon } from './poweredByBlocknative.js'
diff --git a/packages/core/src/icons/pending.ts b/packages/core/src/icons/pending.ts
@@ -1,5 +1,5 @@
 export default `
-  <svg width="100%" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <svg width="100%" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
     <path d="M6 2L6.01 8L10 12L6.01 16.01L6 22H18V16L14 12L18 8.01V2H6ZM16 16.5V20H8V16.5L12 12.5L16 16.5Z" fill="currenColor"/>
   </svg>
 `
diff --git a/packages/core/src/icons/poweredByBlocknative.ts b/packages/core/src/icons/poweredByBlocknative.ts
@@ -0,0 +1,35 @@
+export default `
+<svg width="152" height="16" viewBox="0 0 152 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4.03641 6.252C3.23241 6.252 2.41641 6.636 2.04441 7.272V6.396H1.00041V14.724H2.04441V11.124C2.41641 11.784 3.20841 12.144 4.04841 12.144C5.58441 12.144 6.84441 10.98 6.84441 9.204C6.84441 7.44 5.57241 6.252 4.03641 6.252ZM3.94041 11.16C3.02841 11.16 2.04441 10.428 2.04441 9.216C2.04441 8.016 2.94441 7.236 3.94041 7.236C4.97241 7.236 5.78841 8.1 5.78841 9.216C5.78841 10.344 4.97241 11.16 3.94041 11.16ZM10.8452 12.144C12.4412 12.144 13.7852 10.968 13.7852 9.192C13.7852 7.416 12.4412 6.252 10.8452 6.252C9.24919 6.252 7.91719 7.416 7.91719 9.192C7.91719 10.968 9.24919 12.144 10.8452 12.144ZM10.8452 11.16C9.82519 11.16 8.97319 10.356 8.97319 9.192C8.97319 8.04 9.82519 7.236 10.8452 7.236C11.8772 7.236 12.7412 8.04 12.7412 9.192C12.7412 10.356 11.8772 11.16 10.8452 11.16ZM22.2729 6.396L20.8449 10.38L19.4049 6.396H18.3849L16.9569 10.38L15.5289 6.396H14.4009L16.5369 12H17.4009L18.8889 7.836L20.4369 12H21.3129L23.4009 6.396H22.2729ZM29.6948 9.18C29.6948 7.404 28.5068 6.252 26.9108 6.252C25.3148 6.252 24.0308 7.404 24.0308 9.18C24.0308 10.956 25.3148 12.144 26.9108 12.144C27.9908 12.144 28.9988 11.616 29.4788 10.644L28.5788 10.284C28.2548 10.848 27.6308 11.16 26.9468 11.16C25.9868 11.16 25.2668 10.644 25.1108 9.648H29.6708C29.6828 9.492 29.6948 9.336 29.6948 9.18ZM25.1228 8.748C25.2908 7.74 25.9628 7.236 26.9108 7.236C27.8348 7.236 28.5188 7.788 28.6508 8.748H25.1228ZM33.7456 6.252C33.0016 6.252 32.4616 6.684 32.1736 7.668V6.396H31.1176V12H32.1736V9.948C32.1736 8.472 32.6176 7.26 33.7336 7.26C33.9496 7.26 34.2496 7.308 34.5496 7.452L34.7176 6.468C34.5496 6.36 34.1416 6.252 33.7456 6.252ZM40.8627 9.18C40.8627 7.404 39.6747 6.252 38.0787 6.252C36.4827 6.252 35.1987 7.404 35.1987 9.18C35.1987 10.956 36.4827 12.144 38.0787 12.144C39.1587 12.144 40.1667 11.616 40.6467 10.644L39.7467 10.284C39.4227 10.848 38.7987 11.16 38.1147 11.16C37.1547 11.16 36.4347 10.644 36.2787 9.648H40.8387C40.8507 9.492 40.8627 9.336 40.8627 9.18ZM36.2907 8.748C36.4587 7.74 37.1307 7.236 38.0787 7.236C39.0027 7.236 39.6867 7.788 39.8187 8.748H36.2907ZM46.7136 3.348V7.272C46.3416 6.612 45.5496 6.252 44.7096 6.252C43.1736 6.252 41.9136 7.416 41.9136 9.192C41.9136 10.956 43.1856 12.144 44.7216 12.144C45.5256 12.144 46.3416 11.76 46.7136 11.124V12H47.7576V3.348H46.7136ZM44.8056 11.16C43.7856 11.16 42.9696 10.296 42.9696 9.18C42.9696 8.052 43.7856 7.236 44.8056 7.236C45.7296 7.236 46.7136 7.968 46.7136 9.18C46.7136 10.38 45.8136 11.16 44.8056 11.16ZM55.6695 6.252C54.8295 6.252 54.0375 6.612 53.6655 7.272V3.348H52.6215V12H53.6655V11.124C54.0375 11.76 54.8535 12.144 55.6575 12.144C57.1935 12.144 58.4655 10.956 58.4655 9.192C58.4655 7.416 57.2055 6.252 55.6695 6.252ZM55.5615 11.16C54.5655 11.16 53.6655 10.38 53.6655 9.18C53.6655 7.968 54.6495 7.236 55.5615 7.236C56.5935 7.236 57.4095 8.052 57.4095 9.18C57.4095 10.296 56.5935 11.16 55.5615 11.16ZM63.6097 6.396L61.8937 10.524L60.2017 6.396H59.0737L61.3297 11.832L60.1537 14.724H61.2577L64.7377 6.396H63.6097Z" fill="#707481"/>
+<g clip-path="url(#clip0_13558_103869)">
+<path d="M143.502 11.0888L141.863 8.24889H145.142L146.782 11.0888H143.502Z" fill="#262A3D"/>
+<path d="M145.142 8.24887H141.863L143.502 5.40895H146.782L145.142 8.24887Z" fill="url(#paint0_linear_13558_103869)"/>
+<path d="M148.421 8.24888L146.782 5.40896H143.502L141.863 2.56903H148.421L151.701 8.24888H148.421Z" fill="#262A3D"/>
+<path d="M148.421 13.9287H141.863L143.502 11.0888H146.782L148.421 8.24889H151.701L148.421 13.9287Z" fill="url(#paint1_linear_13558_103869)"/>
+<path d="M76.4774 8.89232C76.4774 10.9327 74.9716 12.5077 73.1366 12.5077C72.1369 12.5077 71.4106 12.1378 70.9181 11.508V12.316H69.1513V2.71994L70.9181 2.17606V6.27771C71.4106 5.64894 72.1369 5.27797 73.1366 5.27797C74.9716 5.27797 76.4774 6.85198 76.4774 8.89232ZM74.7106 8.89232C74.7106 7.73959 73.9037 6.96201 72.8076 6.96201C71.7114 6.96201 70.9213 7.74273 70.9213 8.89232C70.9213 10.0419 71.7292 10.8237 72.8076 10.8237C73.8859 10.8237 74.7106 10.043 74.7106 8.89232Z" fill="#262A3D"/>
+<path d="M77.2718 2.71994L79.0376 2.17606V12.316H77.2718V2.71994Z" fill="#262A3D"/>
+<path d="M79.8183 8.89232C79.8171 8.17544 80.0286 7.47431 80.4261 6.87774C80.8236 6.28117 81.3893 5.816 82.0514 5.54113C82.7135 5.26627 83.4422 5.19408 84.1454 5.33371C84.8485 5.47333 85.4944 5.8185 86.0013 6.32549C86.5081 6.83247 86.8531 7.47847 86.9925 8.18166C87.1319 8.88486 87.0595 9.61361 86.7845 10.2756C86.5094 10.9376 86.0441 11.5031 85.4474 11.9005C84.8507 12.2978 84.1495 12.5092 83.4326 12.5077C82.9565 12.5128 82.4842 12.4227 82.0433 12.2428C81.6024 12.0629 81.2019 11.7967 80.8653 11.46C80.5286 11.1232 80.2626 10.7227 80.0828 10.2817C79.903 9.84083 79.8131 9.36845 79.8183 8.89232ZM85.2948 8.89232C85.2948 7.78359 84.4869 7.00602 83.4326 7.00602C82.3784 7.00602 81.5841 7.78674 81.5841 8.89232C81.5841 9.9979 82.392 10.7786 83.4326 10.7786C84.4733 10.7786 85.2948 10.0021 85.2948 8.89232Z" fill="#262A3D"/>
+<path d="M87.7313 8.89233C87.7313 6.85198 89.2645 5.27797 91.3457 5.27797C92.6881 5.27797 93.8513 5.98952 94.413 7.04375L92.8935 7.93451C92.6189 7.37281 92.03 7.01651 91.3321 7.01651C90.2778 7.01651 89.4971 7.79723 89.4971 8.89233C89.4971 9.98743 90.2778 10.7545 91.3321 10.7545C92.0447 10.7545 92.6326 10.4129 92.904 9.8512L94.4371 10.7273C94.1281 11.2741 93.6779 11.7279 93.1335 12.0413C92.5891 12.3547 91.9706 12.5161 91.3425 12.5088C89.2645 12.5077 87.7313 10.9327 87.7313 8.89233Z" fill="#262A3D"/>
+<path d="M99.5123 12.316L97.0203 9.20776V12.316H95.2534V2.71994L97.0203 2.17606V8.48153L99.374 5.46974H101.482L98.7316 8.85145L101.566 12.316H99.5123Z" fill="#262A3D"/>
+<path d="M108.623 8.11161V12.316H106.856V8.33377C106.856 7.40215 106.296 6.92324 105.501 6.92324C104.639 6.92324 103.994 7.4294 103.994 8.62091V12.316H102.229V5.46974H103.994V6.23579C104.405 5.6196 105.118 5.27797 106.035 5.27797C107.486 5.27797 108.623 6.29657 108.623 8.11161Z" fill="#262A3D"/>
+<path d="M116.74 5.46974V12.316H114.975V11.508C114.481 12.1242 113.742 12.5077 112.743 12.5077C110.921 12.5077 109.415 10.9358 109.415 8.89233C109.415 6.84884 110.921 5.27797 112.743 5.27797C113.742 5.27797 114.481 5.66152 114.975 6.27771V5.46974H116.74ZM114.975 8.89233C114.975 7.73959 114.167 6.96201 113.071 6.96201C111.974 6.96201 111.184 7.74273 111.184 8.89233C111.184 10.0419 111.992 10.8237 113.071 10.8237C114.149 10.8237 114.975 10.043 114.975 8.89233Z" fill="#262A3D"/>
+<path d="M121.344 7.16742V5.46975H119.796V3.45665L118.027 4.00053V10.0157C118.027 11.8643 118.866 12.5895 121.342 12.3212V10.7137C120.329 10.7692 119.794 10.7545 119.794 10.0157V7.16742H121.344Z" fill="#262A3D"/>
+<path d="M122.582 5.46974H124.347V12.316H122.582V5.46974Z" fill="#262A3D"/>
+<path d="M132.293 5.46974L129.691 12.316H127.678L125.077 5.46974H127.021L128.678 10.262L130.348 5.46974H132.293Z" fill="#262A3D"/>
+<path d="M136.073 10.9075C136.757 10.9075 137.305 10.6204 137.607 10.2232L139.03 11.0448C138.387 11.9754 137.36 12.5119 136.046 12.5119C133.74 12.5119 132.294 10.94 132.294 8.89652C132.294 6.85303 133.761 5.28217 135.908 5.28217C137.935 5.28217 139.373 6.88447 139.373 8.89652C139.37 9.13886 139.346 9.38049 139.301 9.61856H134.143C134.389 10.5219 135.142 10.9075 136.073 10.9075ZM137.607 8.25099C137.387 7.26487 136.648 6.8677 135.908 6.8677C134.965 6.8677 134.321 7.37491 134.114 8.25099H137.607Z" fill="#262A3D"/>
+</g>
+<defs>
+<linearGradient id="paint0_linear_13558_103869" x1="141.863" y1="6.82891" x2="146.782" y2="6.82891" gradientUnits="userSpaceOnUse">
+<stop stop-color="#55CCFE"/>
+<stop offset="1" stop-color="#5E93EF"/>
+</linearGradient>
+<linearGradient id="paint1_linear_13558_103869" x1="6973.93" y1="500.862" x2="7897.53" y2="500.862" gradientUnits="userSpaceOnUse">
+<stop stop-color="#55CCFE"/>
+<stop offset="1" stop-color="#5E93EF"/>
+</linearGradient>
+<clipPath id="clip0_13558_103869">
+<rect width="82.8232" height="12" fill="white" transform="translate(69.0884 2)"/>
+</clipPath>
+</defs>
+</svg>
+`
diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts
@@ -117,10 +117,10 @@ function init(options: InitOptions): OnboardAPI {
   if (typeof accountCenter !== 'undefined') {
     let accountCenterUpdate
 
-    if (device.type === 'mobile' && accountCenter.mobile) {
+    if (device.type === 'mobile') {
       accountCenterUpdate = {
         ...APP_INITIAL_STATE.accountCenter,
-        ...accountCenter.mobile
+        ...(accountCenter.mobile ? accountCenter.mobile : {})
       }
     } else if (accountCenter.desktop) {
       accountCenterUpdate = {

diff --git a/packages/core/src/utils.ts b/packages/core/src/utils.ts
@@ -12,22 +12,23 @@ import type {
   ChainWithDecimalId
 } from '@web3-onboard/common'
 
-import ethereumIcon from './icons/ethereum.js'
-import polygonIcon from './icons/polygon.js'
-import questionIcon from './icons/question.js'
-import binanceIcon from './icons/binance.js'
-import fantomIcon from './icons/fantom.js'
-import optimismIcon from './icons/optimism.js'
-import avalancheIcon from './icons/avalanche.js'
-import celoIcon from './icons/celo.js'
-import gnosisIcon from './icons/gnosis.js'
-import harmonyOneIcon from './icons/harmony-one.js'
-import arbitrumIcon from './icons/arbitrum.js'
-
-import hourglass from './icons/hourglass.js'
-import checkmark from './icons/checkmark.js'
-import error from './icons/error.js'
-import info from './icons/info.js'
+import {
+  hourglass,
+  gnosisIcon,
+  checkmark,
+  errorIcon,
+  infoIcon,
+  ethereumIcon,
+  polygonIcon,
+  binanceIcon,
+  questionIcon,
+  fantomIcon,
+  optimismIcon,
+  celoIcon,
+  avalancheIcon,
+  harmonyOneIcon,
+  arbitrumIcon
+} from './icons'
 
 import type {
   ChainStyle,
@@ -248,13 +249,13 @@ export const defaultNotifyEventStyles: Record<string, NotifyEventStyles> = {
   error: {
     backgroundColor: '#FDB1B11A',
     borderColor: 'var(--onboard-danger-300, var(--danger-300))',
-    eventIcon: error
+    eventIcon: errorIcon
   },
   hint: {
     backgroundColor: 'var(--onboard-gray-500, var(--gray-500))',
     borderColor: 'var(--onboard-gray-500, var(--gray-500))',
     iconColor: 'var(--onboard-gray-100, var(--gray-100))',
-    eventIcon: info
+    eventIcon: infoIcon
   }
 }
 

diff --git a/packages/core/src/views/account-center/DisconnectAllConfirm.svelte b/packages/core/src/views/account-center/DisconnectAllConfirm.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
   import { _ } from 'svelte-i18n'
-  import Modal from '../shared/Modal.svelte'
+  import { Modal } from '../shared'
   import en from '../../i18n/en.json'
   import warningIcon from '../../icons/warning.js'
 

diff --git a/packages/core/src/views/account-center/Index.svelte b/packages/core/src/views/account-center/Index.svelte
@@ -7,8 +7,8 @@
   import Maximized from './Maximized.svelte'
   import Minimized from './Minimized.svelte'
   import Micro from './Micro.svelte'
-  
-  export let mountInContainer: boolean = false
+
+  export let mountInContainer = false
 
   const accountCenter$ = state
     .select('accountCenter')

diff --git a/packages/core/src/views/account-center/Maximized.svelte b/packages/core/src/views/account-center/Maximized.svelte
@@ -10,10 +10,8 @@
   import connect from '../../connect.js'
   import disconnect from '../../disconnect.js'
   import { state } from '../../store/index.js'
-  import WalletAppBadge from '../shared/WalletAppBadge.svelte'
   import { getDefaultChainStyles, unrecognizedChainStyle } from '../../utils.js'
-  import SuccessStatusIcon from '../shared/SuccessStatusIcon.svelte'
-  import NetworkSelector from '../shared/NetworkSelector.svelte'
+  import { NetworkSelector, SuccessStatusIcon, WalletAppBadge } from '../shared'
   import caretLightIcon from '../../icons/caret-light.js'
   import warningIcon from '../../icons/warning.js'
   import questionIcon from '../../icons/question.js'

diff --git a/packages/core/src/views/account-center/Micro.svelte b/packages/core/src/views/account-center/Micro.svelte
@@ -1,9 +1,8 @@
 <script lang="ts">
   import { wallets$ } from '../../streams.js'
   import { updateAccountCenter } from '../../store/actions.js'
-  import questionIcon from '../../icons/question.js'
-  import SuccessStatusIcon from '../shared/SuccessStatusIcon.svelte'
-  import WalletAppBadge from '../shared/WalletAppBadge.svelte'
+  import { questionIcon } from '../../icons'
+  import { WalletAppBadge, SuccessStatusIcon } from '../shared'
   import { configuration } from '../../configuration.js'
 
   const { appMetadata } = configuration

diff --git a/packages/core/src/views/account-center/Minimized.svelte b/packages/core/src/views/account-center/Minimized.svelte
@@ -8,12 +8,8 @@
     unrecognizedChainStyle
   } from '../../utils.js'
   import { updateAccountCenter } from '../../store/actions.js'
-  import questionIcon from '../../icons/question.js'
-  import caretIcon from '../../icons/caret.js'
-  import SuccessStatusIcon from '../shared/SuccessStatusIcon.svelte'
-  import warningIcon from '../../icons/warning.js'
-  import WalletAppBadge from '../shared/WalletAppBadge.svelte'
-  import NetworkSelector from '../shared/NetworkSelector.svelte'
+  import { questionIcon, caretIcon, warningIcon } from '../../icons'
+  import { NetworkSelector, WalletAppBadge, SuccessStatusIcon } from '../shared'
   import { state } from '../../store/index.js'
   import { configuration } from '../../configuration.js'
 

diff --git a/packages/core/src/views/connect/Agreement.svelte b/packages/core/src/views/connect/Agreement.svelte
@@ -50,10 +50,6 @@
     width: 1rem;
     margin-right: 0.5rem;
   }
-
-  .spacer {
-    padding-top: var(--onboard-spacing-4, var(--spacing-4));
-  }
 </style>
 
 {#if showTermsOfService}
@@ -75,6 +71,4 @@
       </span>
     </label>
   </div>
-{:else}
-  <div class="spacer" />
 {/if}