Self-hosted fonts

.parcelrc

@@ -1,4 +1,3 @@
 {
-  "extends": "@parcel/config-default",
-  "namers": [ "parcel-namer-rewrite" ]
+  "extends": "@parcel/config-default"
 }

internals/getCsp.js

@@ -1,5 +1,4 @@
 // @TODO: Future improvements:
-// - remove google exceptions by downloading fonts
 // - remove 'unsafe-inline' style by precomputing theme hash
 // - add report-uri to gather errors if anything was missed
 
@@ -11,12 +10,10 @@ const csp = `
       'report-sample';
     style-src
       'self'
-      fonts.googleapis.com
       'unsafe-inline'
       'report-sample';
     font-src
-      'self'
-      fonts.gstatic.com;
+      'self';
     connect-src
       'self'
       grpc.oasis.dev

internals/jest/mocks/image.js

@@ -0,0 +1 @@
+module.exports = 'IMAGE_MOCK'

jest.config.js

@@ -11,11 +11,12 @@ const config = {
     '!src/**/*/Loadable.{js,jsx,ts,tsx}',
     '!src/**/*/messages.ts',
     '!src/**/*/types.ts',
-    '!src/index.tsx'
+    '!src/index.tsx',
   ],
   moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
   moduleNameMapper: {
-    '.*\\.(css|scss|sass)$': '<rootDir>internals/mocks/cssModule.js'
+    '.*\\.(css|scss|sass)$': '<rootDir>internals/jest/mocks/cssModule.js',
+    '.*\\.(jpg|jpeg|png|gif|webp|svg)$': '<rootDir>internals/jest/mocks/image.js',
   },
   modulePaths: ['<rootDir>/src'],
   resetMocks: true,
@@ -24,13 +25,13 @@ const config = {
   testEnvironment: 'jsdom',
   testMatch: [
     '<rootDir>/src/**/__tests__/**/*.{js,jsx,ts,tsx}',
-    '<rootDir>/src/**/*.{spec,test}.{js,jsx,ts,tsx}'
+    '<rootDir>/src/**/*.{spec,test}.{js,jsx,ts,tsx}',
   ],
   transform: {
-    '^.+\\.(js|jsx|mjs|cjs|ts|tsx)$': '<rootDir>/internals/jest/babelTransform.js'
+    '^.+\\.(js|jsx|mjs|cjs|ts|tsx)$': '<rootDir>/internals/jest/babelTransform.js',
   },
   transformIgnorePatterns: ['[/\\\\]node_modules[/\\\\].+\\.(js|jsx|mjs|cjs|ts|tsx)$'],
-  watchPlugins: ['jest-watch-typeahead/filename', 'jest-watch-typeahead/testname']
+  watchPlugins: ['jest-watch-typeahead/filename', 'jest-watch-typeahead/testname'],
 }
 
 module.exports = config

package.json

@@ -83,7 +83,6 @@
     "connected-react-router": "6.9.2",
     "copy-to-clipboard": "3.3.1",
     "cross-env": "7.0.3",
-    "fontfaceobserver": "2.1.0",
     "grommet": "2.21.0",
     "grommet-icons": "4.7.0",
     "husky": "7.0.4",
@@ -124,7 +123,6 @@
     "@testing-library/react": "12.1.4",
     "@testing-library/user-event": "13.5.0",
     "@types/body-scroll-lock": "3.1.0",
-    "@types/fontfaceobserver": "2.1.0",
     "@types/jest": "27.4.1",
     "@types/jest-when": "3.5.0",
     "@types/node": "16.11.26",
@@ -160,7 +158,6 @@
     "node-plop": "0.26.3",
     "nodemon": "2.0.15",
     "parcel": "2.3.2",
-    "parcel-namer-rewrite": "2.0.0-rc.2",
     "plop": "2.7.6",
     "posthtml-expressions": "1.9.0",
     "redux-saga-test-plan": "4.0.4",
@@ -200,12 +197,5 @@
       "distDir": "./build",
       "scopeHoist": false
     }
-  },
-  "parcel-namer-rewrite": {
-    "developmentHashing": true,
-    "rules": {
-      "(.*).png": "$1.png"
-    },
-    "silent": true
   }
 }

src/app/components/Sidebar/__tests__/__snapshots__/index.test.tsx.snap

@@ -109,7 +109,7 @@ exports[`<Navigation /> should match snapshot 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  background: url(/logo192.png) no-repeat center center;
+  background: url(IMAGE_MOCK) no-repeat center center;
   background-size: cover;
   min-width: 0;
   min-height: 0;

src/app/components/Sidebar/index.tsx

@@ -29,6 +29,7 @@ import { useTranslation } from 'react-i18next'
 import { useDispatch, useSelector } from 'react-redux'
 import { Link, NavLink, useHistory, useLocation } from 'react-router-dom'
 import { ThemeSwitcher } from '../ThemeSwitcher'
+import logotype from '../../../logo192.png'
 
 interface SidebarButtonProps extends ButtonExtendedProps {
   secure?: boolean
@@ -113,7 +114,7 @@ const SidebarHeader = (props: SidebarHeaderProps) => {
     >
       <Link to="/">
         <Box align="center" direction="row" gap="small">
-          <Avatar src="/logo192.png" size={sizeLogo[size]} />
+          <Avatar src={logotype} size={sizeLogo[size]} />
           {size !== 'medium' && <Text>Oasis Wallet</Text>}
         </Box>
       </Link>

src/index.html

@@ -19,9 +19,5 @@
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
     <script type="module" src="./index.tsx"></script>
-    <link
-      href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;700&display=swap"
-      rel="stylesheet"
-    />
   </body>
 </html>

src/index.tsx

@@ -11,7 +11,6 @@ import 'react-app-polyfill/stable'
 import * as React from 'react'
 import * as ReactDOM from 'react-dom'
 import { Provider } from 'react-redux'
-import FontFaceObserver from 'fontfaceobserver'
 
 // Use consistent styling
 import 'sanitize.css/sanitize.css'
@@ -32,15 +31,6 @@ import './locales/i18n'
 // Fonts
 import './styles/main.css'
 
-// Observe loading of Inter (to remove 'Inter', remove the <link> tag in
-// the index.html file and this observer)
-const openSansObserver = new FontFaceObserver('Inter', {})
-
-// When Inter is loaded, add a font-family using Inter to the body
-openSansObserver.load().then(() => {
-  document.body.classList.add('fontLoaded')
-})
-
 const store = configureAppStore()
 const MOUNT_NODE = document.getElementById('root') as HTMLElement
 

src/styles/global-styles.ts

@@ -15,10 +15,6 @@ export const GlobalStyle = createGlobalStyle`
     background-color: ${p => p.theme.background};
   }
 
-  body.fontLoaded {
-    font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
-  }
-
   p,
   label {
     line-height: 1.5em;

src/styles/main.css

@@ -1,4 +1,20 @@
-@import url("https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@300&family=Rubik:wght@300&display=swap");
+/* rubik-300 - latin */
+@font-face {
+  font-family: 'Rubik';
+  font-style: normal;
+  font-weight: 300;
+  src: url('./../fonts/rubik-v19-latin-300.woff2') format('woff2'),
+    url('./../fonts/rubik-v19-latin-300.woff') format('woff');
+}
+
+/* roboto-mono-300 - latin */
+@font-face {
+  font-family: 'Roboto Mono';
+  font-style: normal;
+  font-weight: 300;
+  src: url('./../fonts/roboto-mono-v13-latin-300.woff2') format('woff2'),
+    url('./../fonts/roboto-mono-v13-latin-300.woff') format('woff');
+}
 
 a {
   color: inherit; /* blue colors for links too */

src/types/images.d.ts

@@ -0,0 +1,4 @@
+declare module '*.png' {
+  const content: string
+  export default content
+}

yarn.lock

@@ -2927,7 +2927,7 @@
     detect-libc "^1.0.3"
     xxhash-wasm "^0.4.2"
 
-"@parcel/logger@2.3.2", "@parcel/logger@^2.0.0-rc.0":
+"@parcel/logger@2.3.2":
   version "2.3.2"
   resolved "https://registry.yarnpkg.com/@parcel/logger/-/logger-2.3.2.tgz#b5fc7a9c1664ee0286d0f67641c7c81c8fec1561"
   integrity sha512-jIWd8TXDQf+EnNWSa7Q10lSQ6C1LSH8OZkTlaINrfVIw7s+3tVxO3I4pjp7/ARw7RX2gdNPlw6fH4Gn/HvvYbw==
@@ -2942,7 +2942,7 @@
   dependencies:
     chalk "^4.1.0"
 
-"@parcel/namer-default@2.3.2", "@parcel/namer-default@^2.0.0-rc.0":
+"@parcel/namer-default@2.3.2":
   version "2.3.2"
   resolved "https://registry.yarnpkg.com/@parcel/namer-default/-/namer-default-2.3.2.tgz#84e17abfc84fd293b23b3f405280ed2e279c75d8"
   integrity sha512-3QUMC0+5+3KMKfoAxYAbpZtuRqTgyZKsGDWzOpuqwemqp6P8ahAvNPwSCi6QSkGcTmvtYwBu9/NHPSONxIFOfg==
@@ -3014,7 +3014,7 @@
     nullthrows "^1.1.1"
     terser "^5.2.0"
 
-"@parcel/package-manager@2.3.2", "@parcel/package-manager@^2.0.0-rc.0":
+"@parcel/package-manager@2.3.2":
   version "2.3.2"
   resolved "https://registry.yarnpkg.com/@parcel/package-manager/-/package-manager-2.3.2.tgz#380f0741c9d0c79c170c437efae02506484df315"
   integrity sha512-pAQfywKVORY8Ee+NHAyKzzQrKbnz8otWRejps7urwhDaTVLfAd5C/1ZV64ATZ9ALYP9jyoQ8bTaxVd4opcSuwg==
@@ -3086,7 +3086,7 @@
     "@parcel/utils" "2.3.2"
     posthtml "^0.16.4"
 
-"@parcel/plugin@2.3.2", "@parcel/plugin@^2.0.0-rc.0":
+"@parcel/plugin@2.3.2":
   version "2.3.2"
   resolved "https://registry.yarnpkg.com/@parcel/plugin/-/plugin-2.3.2.tgz#7701c40567d2eddd5d5b2b6298949cd03a2a22fa"
   integrity sha512-SaLZAJX4KH+mrAmqmcy9KJN+V7L+6YNTlgyqYmfKlNiHu7aIjLL+3prX8QRcgGtjAYziCxvPj0cl1CCJssaiGg==
@@ -3303,7 +3303,7 @@
     "@parcel/utils" "2.3.2"
     json-source-map "^0.6.1"
 
-"@parcel/types@2.3.2", "@parcel/types@^2.0.0-rc.0":
+"@parcel/types@2.3.2":
   version "2.3.2"
   resolved "https://registry.yarnpkg.com/@parcel/types/-/types-2.3.2.tgz#7eb6925bc852a518dd75b742419e51292418769f"
   integrity sha512-C77Ct1xNM7LWjPTfe/dQ/9rq1efdsX5VJu2o8/TVi6qoFh64Wp/c5/vCHwKInOTBZUTchVO6z4PGJNIZoUVJuA==
@@ -3746,11 +3746,6 @@
   resolved "https://registry.npmjs.org/@types/fined/-/fined-1.1.2.tgz"
   integrity sha512-hzzTS+X9EqDhx4vwdch/DOZci/bfh5J6Nyz8lqvyfBg2ROx2fPafX+LpDfpVgSvQKj0EYkwTYpBO3z2etwbkOw==
 
-"@types/fontfaceobserver@2.1.0":
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/@types/fontfaceobserver/-/fontfaceobserver-2.1.0.tgz#9ec2eabadfcaaf8c68c5e1254d19f5a293d132b4"
-  integrity sha512-Vqf183RAiFdIjUi4asKqogf2HIfLDnxn+dQo9GCpnsU5QrrsLMA2bkJU1dHRudQlizLybWD61Csd1zAgUQ3JKQ==
-
 "@types/glob@*", "@types/glob@^7.1.1":
   version "7.1.3"
   resolved "https://registry.npmjs.org/@types/glob/-/glob-7.1.3.tgz"
@@ -4650,16 +4645,6 @@ assert@^1.4.0:
     object-assign "^4.1.1"
     util "0.10.3"
 
-assert@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/assert/-/assert-2.0.0.tgz#95fc1c616d48713510680f2eaf2d10dd22e02d32"
-  integrity sha512-se5Cd+js9dXJnu6Ag2JFc00t+HmHOen+8Q+L7O9zI0PqQXr20uk2J0XQqMxZEeo5U50o8Nvmmx7dZrl+Ufr35A==
-  dependencies:
-    es6-object-assign "^1.1.0"
-    is-nan "^1.2.1"
-    object-is "^1.0.1"
-    util "^0.12.0"
-
 assign-symbols@^1.0.0:
   version "1.0.0"
   resolved "https://registry.npmjs.org/assign-symbols/-/assign-symbols-1.0.0.tgz"
@@ -7109,11 +7094,6 @@ es6-error@^4.0.1:
   resolved "https://registry.npmjs.org/es6-error/-/es6-error-4.1.1.tgz"
   integrity sha512-Um/+FxMr9CISWh0bi5Zv0iOD+4cFh5qLeks1qhAopKVAJw3drgKbKySikp7wGhDL0HPeaja0P5ULZrxLkniUVg==
 
-es6-object-assign@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/es6-object-assign/-/es6-object-assign-1.1.0.tgz#c2c3582656247c39ea107cb1e6652b6f9f24523c"
-  integrity sha1-wsNYJlYkfDnqEHyx5mUrb58kUjw=
-
 escalade@^3.1.1:
   version "3.1.1"
   resolved "https://registry.npmjs.org/escalade/-/escalade-3.1.1.tgz"
@@ -7812,11 +7792,6 @@ flush-write-stream@^1.0.2:
     inherits "^2.0.3"
     readable-stream "^2.3.6"
 
-fontfaceobserver@2.1.0:
-  version "2.1.0"
-  resolved "https://registry.npmjs.org/fontfaceobserver/-/fontfaceobserver-2.1.0.tgz"
-  integrity sha512-ReOsO2F66jUa0jmv2nlM/s1MiutJx/srhAe2+TE8dJCMi02ZZOcCTxTCQFr3Yet+uODUtnr4Mewg+tNQ+4V1Ng==
-
 for-in@^1.0.1, for-in@^1.0.2:
   version "1.0.2"
   resolved "https://registry.npmjs.org/for-in/-/for-in-1.0.2.tgz"
@@ -9176,14 +9151,6 @@ is-lower-case@^1.1.0:
   dependencies:
     lower-case "^1.1.0"
 
-is-nan@^1.2.1:
-  version "1.3.2"
-  resolved "https://registry.yarnpkg.com/is-nan/-/is-nan-1.3.2.tgz#043a54adea31748b55b6cd4e09aadafa69bd9e1d"
-  integrity sha512-E+zBKpQ2t6MEo1VsonYmluk9NxGrbzpeeLC2xIViuO2EjU2xsXsBPwTr3Ykv9l08UYEVEdWeRZNouaZqF6RN0w==
-  dependencies:
-    call-bind "^1.0.0"
-    define-properties "^1.1.3"
-
 is-negated-glob@^1.0.0:
   version "1.0.0"
   resolved "https://registry.npmjs.org/is-negated-glob/-/is-negated-glob-1.0.0.tgz"
@@ -11616,14 +11583,6 @@ object-inspect@^1.9.0:
   resolved "https://registry.npmjs.org/object-inspect/-/object-inspect-1.10.2.tgz"
   integrity sha512-gz58rdPpadwztRrPjZE9DZLOABUpTGdcANUgOwBFO1C+HZZhePoP83M65WGDmbpwFYJSWqavbl4SgDn4k8RYTA==
 
-object-is@^1.0.1:
-  version "1.1.5"
-  resolved "https://registry.npmjs.org/object-is/-/object-is-1.1.5.tgz"
-  integrity sha512-3cyDsyHgtmi7I7DfSSI2LDp6SK2lwvtbg0p0R1e0RvTqF5ceGx+K2dfSjm1bKDMVCFEDAQvy+o8c6a7VujOddw==
-  dependencies:
-    call-bind "^1.0.2"
-    define-properties "^1.1.3"
-
 object-keys@^1.0.12, object-keys@^1.1.1:
   version "1.1.1"
   resolved "https://registry.npmjs.org/object-keys/-/object-keys-1.1.1.tgz"
@@ -11976,18 +11935,6 @@ param-case@^2.1.0:
   dependencies:
     no-case "^2.2.0"
 
-parcel-namer-rewrite@2.0.0-rc.2:
-  version "2.0.0-rc.2"
-  resolved "https://registry.yarnpkg.com/parcel-namer-rewrite/-/parcel-namer-rewrite-2.0.0-rc.2.tgz#d6d0738ee5f8cc6a675ce99ca8bf1f62f948250e"
-  integrity sha512-yGLCrZOoR26zPidaXEv+q+mqy5sMKPCA5nPTxqBKdeoF8CntRUwPgK261Gc9a0TzfJWsfeiGgiogL7HTZUa2Gg==
-  dependencies:
-    "@parcel/logger" "^2.0.0-rc.0"
-    "@parcel/namer-default" "^2.0.0-rc.0"
-    "@parcel/package-manager" "^2.0.0-rc.0"
-    "@parcel/plugin" "^2.0.0-rc.0"
-    "@parcel/types" "^2.0.0-rc.0"
-    assert "^2.0.0"
-
 parcel@2.3.2:
   version "2.3.2"
   resolved "https://registry.yarnpkg.com/parcel/-/parcel-2.3.2.tgz#d1cb475f27edae981edea7a7104e04d3a35a87ca"
@@ -15301,7 +15248,7 @@ util@^0.10.3, util@~0.10.1:
   dependencies:
     inherits "2.0.3"
 
-util@^0.12.0, util@~0.12.0:
+util@~0.12.0:
   version "0.12.4"
   resolved "https://registry.yarnpkg.com/util/-/util-0.12.4.tgz#66121a31420df8f01ca0c464be15dfa1d1850253"
   integrity sha512-bxZ9qtSlGUWSOy9Qa9Xgk11kSslpuZwaxCg4sNIDj6FLucDab2JxnHwyNTCpHMtK1MjoQiWQ6DiUMZYbSrO+Sw==