chore: update all login images, use srcset

package.json

@@ -41,7 +41,6 @@
     "react-intersection-observer": "^9.5.1",
     "react-intl": "^6.4.4",
     "react-markdown": "^8.0.7",
-    "react-progressive-graceful-image": "^0.7.0",
     "react-router-dom": "^6.13.0",
     "react-tag-input-component": "^2.0.2",
     "semantic-sdp": "^3.26.3",

src/element/login-signup.tsx

@@ -1,10 +1,14 @@
 import "./login-signup.css";
 import LoginHeader from "../login-start.jpg";
-import LoginHeaderSmall from "../login-start-sm.jpg";
-import LoginVault from "../login-vault.png";
-import LoginProfile from "../login-profile.png";
-import LoginKey from "../login-key.png";
-import LoginWallet from "../login-wallet.png";
+import LoginHeader2x from "../login-start@2x.jpg";
+import LoginVault from "../login-vault.jpg";
+import LoginVault2x from "../login-vault@2x.jpg";
+import LoginProfile from "../login-profile.jpg";
+import LoginProfile2x from "../login-profile@2x.jpg";
+import LoginKey from "../login-key.jpg";
+import LoginKey2x from "../login-key@2x.jpg";
+import LoginWallet from "../login-wallet.jpg";
+import LoginWallet2x from "../login-wallet@2x.jpg";
 
 import { CSSProperties, useState } from "react";
 import { FormattedMessage, FormattedNumber, useIntl } from "react-intl";
@@ -22,7 +26,6 @@ import { hexToBech32, openFile } from "utils";
 import { LoginType } from "login";
 import { DefaultProvider, StreamProviderInfo } from "providers";
 import { Nip103StreamProvider } from "providers/zsz";
-import ProgressiveImage from "react-progressive-graceful-image";
 
 enum Stage {
   Login = 0,
@@ -149,9 +152,7 @@ export function LoginSignup({ close }: { close: () => void }) {
     case Stage.Login: {
       return (
         <>
-          <ProgressiveImage src={LoginHeader as string} placeholder={LoginHeaderSmall}>
-            {(src) => <img src={src} className="header-image" />}
-          </ProgressiveImage>
+          <img src={LoginHeader as string} srcSet={`${LoginHeader2x} 2x`} className="header-image" />
           <div className="content-inner">
             <h2>
               <FormattedMessage defaultMessage="Create an Account" />
@@ -186,7 +187,7 @@ export function LoginSignup({ close }: { close: () => void }) {
     case Stage.LoginInput: {
       return (
         <>
-          <img src={LoginVault} className="header-image" />
+          <img src={LoginVault as string} srcSet={`${LoginVault2x} 2x`} className="header-image" />
           <div className="content-inner">
             <h2>
               <FormattedMessage defaultMessage="Login with private key" />
@@ -236,7 +237,7 @@ export function LoginSignup({ close }: { close: () => void }) {
     case Stage.Details: {
       return (
         <>
-          <img src={LoginProfile} className="header-image" />
+          <img src={LoginProfile as string} srcSet={`${LoginProfile2x} 2x`} className="header-image" />
           <div className="content-inner">
             <h2>
               <FormattedMessage defaultMessage="Setup Profile" />
@@ -276,7 +277,7 @@ export function LoginSignup({ close }: { close: () => void }) {
     case Stage.LnAddress: {
       return (
         <>
-          <img src={LoginWallet} className="header-image" />
+          <img src={LoginWallet as string} srcSet={`${LoginWallet2x} 2x`} className="header-image" />
           <div className="content-inner">
             <h2>
               <FormattedMessage defaultMessage="Get paid by viewers" />
@@ -318,7 +319,7 @@ export function LoginSignup({ close }: { close: () => void }) {
     case Stage.SaveKey: {
       return (
         <>
-          <img src={LoginKey} className="header-image" />
+          <img src={LoginKey as string} srcSet={`${LoginKey2x} 2x`} className="header-image" />
           <div className="content-inner">
             <h2>
               <FormattedMessage defaultMessage="Save Key" />

yarn.lock

@@ -2379,16 +2379,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@researchgate/react-intersection-observer@npm:^1.3.5":
-  version: 1.3.5
-  resolution: "@researchgate/react-intersection-observer@npm:1.3.5"
-  peerDependencies:
-    react: ^16.3.2
-    react-dom: ^16.3.2
-  checksum: b773ad4de12c58ffcb25ae2e5487dd0e2f5e0d944148695b9f90726cf9f847b757a1c7624586470ddb8eca2a9580fe9fd63edc2a9ee2cf0e4d6dad0c04eb81cd
-  languageName: node
-  linkType: hard
-
 "@rollup/plugin-babel@npm:^5.2.0":
   version: 5.3.1
   resolution: "@rollup/plugin-babel@npm:5.3.1"
@@ -9005,18 +8995,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-progressive-graceful-image@npm:^0.7.0":
-  version: 0.7.0
-  resolution: "react-progressive-graceful-image@npm:0.7.0"
-  dependencies:
-    "@researchgate/react-intersection-observer": ^1.3.5
-  peerDependencies:
-    react: ^15.0.0-0 || ^16.0.0-0 || ^17.0.0-0 || ^18.0.0-0
-    react-dom: ^15.0.0-0 || ^16.0.0-0 || ^17.0.0-0 || ^18.0.0-0
-  checksum: fdec390b19c0d2d07129a89bb954936b7200a02bc7f6a2031db75d6a1805a1022d5425db13135d77f8d6ce53f7d64390a7b8cfa5be443bc9e027066572fe47af
-  languageName: node
-  linkType: hard
-
 "react-remove-scroll-bar@npm:^2.3.3":
   version: 2.3.4
   resolution: "react-remove-scroll-bar@npm:2.3.4"
@@ -10003,7 +9981,6 @@ __metadata:
     react-intersection-observer: ^9.5.1
     react-intl: ^6.4.4
     react-markdown: ^8.0.7
-    react-progressive-graceful-image: ^0.7.0
     react-router-dom: ^6.13.0
     react-tag-input-component: ^2.0.2
     semantic-sdp: ^3.26.3