diff --git a/src/components/about-ipfs/AboutIpfs.js b/src/components/about-ipfs/AboutIpfs.tsx
similarity index 90%
rename from src/components/about-ipfs/AboutIpfs.js
rename to src/components/about-ipfs/AboutIpfs.tsx
index db7e8b9c8..3a7842854 100644
--- a/src/components/about-ipfs/AboutIpfs.js
+++ b/src/components/about-ipfs/AboutIpfs.tsx
@@ -1,8 +1,10 @@
 import React from 'react'
-import { withTranslation, Trans } from 'react-i18next'
-import Box from '../box/Box.js'
+import { Trans, useTranslation } from 'react-i18next'
+import Box from '../box/Box.tsx'
+
+const AboutIpfs = () => {
+  const { t } = useTranslation('welcome')
 
-export const AboutIpfs = ({ t }) => {
   return (
     <Box>
       <h2 className='mt0 mb3 montserrat fw2 f3 charcoal'>{t('aboutIpfs.header')}</h2>
@@ -27,4 +29,4 @@ export const AboutIpfs = ({ t }) => {
   )
 }
 
-export default withTranslation('welcome')(AboutIpfs)
+export default AboutIpfs
diff --git a/src/components/about-webui/AboutWebUI.js b/src/components/about-webui/AboutWebUI.tsx
similarity index 91%
rename from src/components/about-webui/AboutWebUI.js
rename to src/components/about-webui/AboutWebUI.tsx
index 8bcb81a01..dddb2948a 100644
--- a/src/components/about-webui/AboutWebUI.js
+++ b/src/components/about-webui/AboutWebUI.tsx
@@ -1,8 +1,9 @@
 import React from 'react'
-import { withTranslation, Trans } from 'react-i18next'
-import Box from '../box/Box.js'
+import { Trans, useTranslation } from 'react-i18next'
+import Box from '../box/Box.tsx'
 
-export const AboutWebUI = ({ t }) => {
+const AboutWebUI = () => {
+  const { t } = useTranslation('welcome')
   return (
     <Box>
       <h2 className='mt0 mb3 montserrat fw2 f3 charcoal'>{t('welcomeInfo.header')}</h2>
@@ -30,4 +31,4 @@ export const AboutWebUI = ({ t }) => {
   )
 }
 
-export default withTranslation('welcome')(AboutWebUI)
+export default AboutWebUI
diff --git a/src/components/box/Box.js b/src/components/box/Box.tsx
similarity index 60%
rename from src/components/box/Box.js
rename to src/components/box/Box.tsx
index 2233b5fea..d7a295d60 100644
--- a/src/components/box/Box.js
+++ b/src/components/box/Box.tsx
@@ -1,12 +1,17 @@
-import React from 'react'
+import React, { CSSProperties, ReactElement } from 'react'
 import ErrorBoundary from '../error/ErrorBoundary.js'
 
+type Props = {
+  className?: string
+  style?: CSSProperties
+  children?: ReactElement | ReactElement[] | string
+}
+
 export const Box = ({
   className = 'pa4',
   style,
-  children,
-  ...props
-}) => {
+  children
+}: Props) => {
   return (
     <section className={className} style={{ background: '#fbfbfb', ...style }}>
       <ErrorBoundary>
diff --git a/src/components/cli-tutor-mode/CliTutorMode.js b/src/components/cli-tutor-mode/CliTutorMode.js
index 6c7ae41e1..c4759b65f 100644
--- a/src/components/cli-tutor-mode/CliTutorMode.js
+++ b/src/components/cli-tutor-mode/CliTutorMode.js
@@ -7,7 +7,7 @@ import { Modal, ModalBody, ModalActions } from '../modal/Modal.js'
 import StrokeCode from '../../icons/StrokeCode.js'
 import Button from '../button/button.tsx'
 import Overlay from '../overlay/Overlay.js'
-import Shell from '../shell/Shell.js'
+import Shell from '../shell/Shell.tsx'
 import StrokeDownload from '../../icons/StrokeDownload.js'
 import { cliCmdKeys, cliCommandList, cliCmdPrefixes } from '../../bundles/files/consts.js'
 
diff --git a/src/components/experiments/ExperimentsPanel.js b/src/components/experiments/ExperimentsPanel.js
index d95dd1506..f1569fd66 100644
--- a/src/components/experiments/ExperimentsPanel.js
+++ b/src/components/experiments/ExperimentsPanel.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import { connect } from 'redux-bundler-react'
 import Checkbox from '../checkbox/Checkbox.js'
-import Box from '../box/Box.js'
+import Box from '../box/Box.tsx'
 import Title from '../../settings/Title.js'
 
 const Experiments = ({ doExpToggleAction, experiments, t }) => {
diff --git a/src/components/is-connected/IsConnected.js b/src/components/is-connected/IsConnected.tsx
similarity index 73%
rename from src/components/is-connected/IsConnected.js
rename to src/components/is-connected/IsConnected.tsx
index ca47f5c84..4043fb14c 100644
--- a/src/components/is-connected/IsConnected.js
+++ b/src/components/is-connected/IsConnected.tsx
@@ -1,9 +1,10 @@
 import React from 'react'
-import { withTranslation } from 'react-i18next'
-import Box from '../box/Box.js'
+import { useTranslation } from 'react-i18next'
+import Box from '../box/Box.tsx'
 import GlyphTick from '../../icons/GlyphTick.js'
 
-export const IsConnected = ({ t }) => {
+const IsConnected = () => {
+  const { t } = useTranslation('welcome')
   return (
     <Box className='pv3 ph4'>
       <div>
@@ -17,4 +18,4 @@ export const IsConnected = ({ t }) => {
   )
 }
 
-export default withTranslation('welcome')(IsConnected)
+export default IsConnected
diff --git a/src/components/is-not-connected/IsNotConnected.js b/src/components/is-not-connected/IsNotConnected.js
index 004ed68fe..d33f1b47c 100644
--- a/src/components/is-not-connected/IsNotConnected.js
+++ b/src/components/is-not-connected/IsNotConnected.js
@@ -3,8 +3,8 @@ import { connect } from 'redux-bundler-react'
 import { withTranslation, Trans } from 'react-i18next'
 import classNames from 'classnames'
 import ApiAddressForm from '../api-address-form/ApiAddressForm.js'
-import Box from '../box/Box.js'
-import Shell from '../shell/Shell.js'
+import Box from '../box/Box.tsx'
+import Shell from '../shell/Shell.tsx'
 import GlyphAttention from '../../icons/GlyphAttention.js'
 
 const TABS = {
diff --git a/src/components/shell/Shell.js b/src/components/shell/Shell.tsx
similarity index 73%
rename from src/components/shell/Shell.js
rename to src/components/shell/Shell.tsx
index e9dca171d..95b0c572a 100644
--- a/src/components/shell/Shell.js
+++ b/src/components/shell/Shell.tsx
@@ -1,11 +1,17 @@
-import React from 'react'
+import React, { ReactElement } from 'react'
 import classNames from 'classnames'
 
+type Props = {
+  title?: string
+  children: ReactElement | ReactElement[]
+  className?: string
+}
+
 const Shell = ({
   title = 'Shell',
   children,
   className
-}) => {
+}: Props) => {
   return (
     <div className={classNames('br1 overflow-hidden', className)}>
       <div className='f7 mb0 sans-serif ttu tracked charcoal pv1 pl2 bg-black-20'>{ title }</div>
diff --git a/src/files/info-boxes/add-files-info/AddFilesInfo.js b/src/files/info-boxes/add-files-info/AddFilesInfo.js
index 4b021f7fb..405f6ab07 100644
--- a/src/files/info-boxes/add-files-info/AddFilesInfo.js
+++ b/src/files/info-boxes/add-files-info/AddFilesInfo.js
@@ -1,6 +1,6 @@
 import React from 'react'
 import { withTranslation, Trans } from 'react-i18next'
-import Box from '../../../components/box/Box.js'
+import Box from '../../../components/box/Box.tsx'
 
 const AddFilesInfo = ({ t }) => (
   <div className='mv4 tc navy f5' >
diff --git a/src/files/info-boxes/companion-info/CompanionInfo.js b/src/files/info-boxes/companion-info/CompanionInfo.js
index 63cb4f3db..0791bd503 100644
--- a/src/files/info-boxes/companion-info/CompanionInfo.js
+++ b/src/files/info-boxes/companion-info/CompanionInfo.js
@@ -1,6 +1,6 @@
 import React from 'react'
 import { withTranslation, Trans } from 'react-i18next'
-import Box from '../../../components/box/Box.js'
+import Box from '../../../components/box/Box.tsx'
 
 const CompanionInfo = ({ t }) => (
   <div className='mv4 tc navy f5' >
diff --git a/src/peers/PeersPage.js b/src/peers/PeersPage.js
index 4f2bcc266..5d382c6bb 100644
--- a/src/peers/PeersPage.js
+++ b/src/peers/PeersPage.js
@@ -8,7 +8,7 @@ import { peersTour } from '../lib/tours.js'
 import { getJoyrideLocales } from '../helpers/i8n.js'
 
 // Components
-import Box from '../components/box/Box.js'
+import Box from '../components/box/Box.tsx'
 import WorldMap from './WorldMap/WorldMap.js'
 import PeersTable from './PeersTable/PeersTable.js'
 import AddConnection from './AddConnection/AddConnection.js'
diff --git a/src/settings/AnalyticsPage.js b/src/settings/AnalyticsPage.js
index c6c191fe8..a971c8480 100644
--- a/src/settings/AnalyticsPage.js
+++ b/src/settings/AnalyticsPage.js
@@ -2,7 +2,7 @@ import React from 'react'
 import { Helmet } from 'react-helmet'
 import { withTranslation } from 'react-i18next'
 import Title from './Title.js'
-import Box from '../components/box/Box.js'
+import Box from '../components/box/Box.tsx'
 import AnalyticsToggle from '../components/analytics-toggle/AnalyticsToggle.js'
 
 export const AnalyticsPage = ({ t }) => (
diff --git a/src/settings/SettingsPage.js b/src/settings/SettingsPage.js
index 196a6db02..e088d8e62 100644
--- a/src/settings/SettingsPage.js
+++ b/src/settings/SettingsPage.js
@@ -9,7 +9,7 @@ import withTour from '../components/tour/withTour.js'
 import { getJoyrideLocales } from '../helpers/i8n.js'
 // Components
 import Tick from '../icons/GlyphSmallTick.js'
-import Box from '../components/box/Box.js'
+import Box from '../components/box/Box.tsx'
 import Button from '../components/button/button.tsx'
 import LanguageSelector from '../components/language-selector/LanguageSelector.js'
 import PinningManager from '../components/pinning-manager/PinningManager.js'
diff --git a/src/status/BandwidthStatsDisabled.js b/src/status/BandwidthStatsDisabled.js
index fee11229b..524426167 100644
--- a/src/status/BandwidthStatsDisabled.js
+++ b/src/status/BandwidthStatsDisabled.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import { withTranslation, Trans } from 'react-i18next'
-import Shell from '../components/shell/Shell.js'
-import Box from '../components/box/Box.js'
+import Shell from '../components/shell/Shell.tsx'
+import Box from '../components/box/Box.tsx'
 
 const StatusNotConnected = ({ t }) => {
   return (
diff --git a/src/status/PeerBandwidthTable.js b/src/status/PeerBandwidthTable.js
index 0a816d7c0..3f1b05d90 100644
--- a/src/status/PeerBandwidthTable.js
+++ b/src/status/PeerBandwidthTable.js
@@ -4,7 +4,7 @@ import { withTranslation } from 'react-i18next'
 import PropTypes from 'prop-types'
 import { humanSize } from '../lib/files.js'
 import CountryFlag from 'react-country-flag'
-import Box from '../components/box/Box.js'
+import Box from '../components/box/Box.tsx'
 import { Title } from './Commons.js'
 import ComponentLoader from '../loader/ComponentLoader.js'
 
diff --git a/src/status/StatusPage.js b/src/status/StatusPage.js
index ae8c969ec..1623ada21 100644
--- a/src/status/StatusPage.js
+++ b/src/status/StatusPage.js
@@ -10,7 +10,7 @@ import NodeInfo from './NodeInfo.js'
 import NodeInfoAdvanced from './NodeInfoAdvanced.js'
 import NodeBandwidthChart from './NodeBandwidthChart.js'
 import NetworkTraffic from './NetworkTraffic.js'
-import Box from '../components/box/Box.js'
+import Box from '../components/box/Box.tsx'
 import AnalyticsBanner from '../components/analytics-banner/AnalyticsBanner.js'
 import { statusTour } from '../lib/tours.js'
 import { getJoyrideLocales } from '../helpers/i8n.js'
diff --git a/src/welcome/WelcomePage.js b/src/welcome/WelcomePage.js
index 9266683b9..486770a66 100644
--- a/src/welcome/WelcomePage.js
+++ b/src/welcome/WelcomePage.js
@@ -8,26 +8,24 @@ import { welcomeTour } from '../lib/tours.js'
 import { getJoyrideLocales } from '../helpers/i8n.js'
 
 // Components
-import IsConnected from '../components/is-connected/IsConnected.js'
+import IsConnected from '../components/is-connected/IsConnected.tsx'
 import IsNotConnected from '../components/is-not-connected/IsNotConnected.js'
-import AboutIpfs from '../components/about-ipfs/AboutIpfs.js'
-import AboutWebUI from '../components/about-webui/AboutWebUI.js'
+import AboutIpfs from '../components/about-ipfs/AboutIpfs.tsx'
+import AboutWebUI from '../components/about-webui/AboutWebUI.tsx'
 import ComponentLoader from '../loader/ComponentLoader.js'
 
-const WelcomePage = ({ t, apiUrl, ipfsInitFailed, ipfsConnected, ipfsReady, toursEnabled, handleJoyrideCallback }) => {
+const WelcomePage = ({ t, ipfsInitFailed, ipfsConnected, ipfsReady, toursEnabled, handleJoyrideCallback }) => {
   if (!ipfsInitFailed && !ipfsReady) {
     return <ComponentLoader />
   }
 
-  const isSameOrigin = window.location.origin === apiUrl
-
   return (
     <div>
       <Helmet>
         <title>{t('title')}</title>
       </Helmet>
       <div className='lh-copy charcoal'>
-        <ConnectionStatus connected={ipfsConnected} sameOrigin={isSameOrigin} t={t} />
+        <ConnectionStatus connected={ipfsConnected} />
       </div>
       <ReactJoyride
         run={toursEnabled}
@@ -40,7 +38,7 @@ const WelcomePage = ({ t, apiUrl, ipfsInitFailed, ipfsConnected, ipfsReady, tour
   )
 }
 
-const ConnectionStatus = ({ t, connected, sameOrigin }) => {
+const ConnectionStatus = ({ connected }) => {
   if (connected) {
     return (
       <div>