PWA

dev-dist/registerSW.js

@@ -0,0 +1 @@
+if('serviceWorker' in navigator) navigator.serviceWorker.register('/dev-sw.js?dev-sw', { scope: '/', type: 'classic' })

package.json

@@ -153,6 +153,7 @@
     "url-polyfill": "^1.1.12",
     "util": "^0.12.5",
     "vite": "^4.3.9",
+    "vite-plugin-pwa": "^0.17.4",
     "vite-plugin-svgr": "^3.2.0",
     "vitest": "^0.32.2",
     "w3name": "^1.0.8",

src/views/dialogs/OnboardingDialog/ChooseWallet.tsx

@@ -1,6 +1,4 @@
-import { useState } from 'react';
 import styled, { AnyStyledComponent } from 'styled-components';
-import { useDispatch } from 'react-redux';
 
 import { AlertType } from '@/constants/alerts';
 import { STRING_KEYS } from '@/constants/localization';
@@ -13,12 +11,11 @@ import { Button } from '@/components/Button';
 import { Icon } from '@/components/Icon';
 import { Link } from '@/components/Link';
 
-import { useAccounts, useStringGetter, useURLConfigs } from '@/hooks';
+import { useAccounts, useBreakpoints, useStringGetter, useURLConfigs } from '@/hooks';
 import { useDisplayedWallets } from '@/hooks/useDisplayedWallets';
 
 import { breakpoints } from '@/styles';
 import { layoutMixins } from '@/styles/layoutMixins';
-import { usePrivy } from '@privy-io/react-auth';
 
 export const ChooseWallet = () => {
   const stringGetter = useStringGetter();
@@ -27,8 +24,8 @@ export const ChooseWallet = () => {
   const displayedWallets = useDisplayedWallets();
 
   const { selectWalletType, selectedWalletType, selectedWalletError } = useAccounts();
-  
-  const { ready, authenticated } = usePrivy();
+
+  const { isMobile } = useBreakpoints();
 
   return (
     <>
@@ -62,7 +59,7 @@ export const ChooseWallet = () => {
             <div>
               {walletType !== WalletType.Privy && import.meta.env.VITE_PRIVY_APP_ID
                 ? stringGetter({ key: wallets[walletType].stringKey })
-                : 'Socials (Email, SMS, etc.)'}
+                : `Socials ${isMobile ? '' : '(Email, SMS, etc.)'}`}
             </div>
           </Styled.WalletButton>
         ))}

vite.config.ts

@@ -2,6 +2,7 @@ import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react';
 import path from 'path';
 import svgr from 'vite-plugin-svgr';
+import { VitePWA } from 'vite-plugin-pwa';
 
 // https://vitejs.dev/config/
 export default defineConfig(({ mode }) => ({
@@ -50,6 +51,12 @@ export default defineConfig(({ mode }) => ({
     svgr({
       exportAsDefault: true,
     }),
+    VitePWA({
+      registerType: 'autoUpdate',
+      devOptions: {
+        enabled: true,
+      },
+    }),
   ],
   publicDir: 'public',
 }));