From 69862e57e9c0d07e3763c8e292323a9505922afc Mon Sep 17 00:00:00 2001 From: GODrums Date: Sat, 21 Dec 2024 03:06:04 +0100 Subject: [PATCH] Improve User Profile Page --- package.json | 3 +- src/background/index.ts | 3 + src/lib/util/steam.ts | 7 +- src/lib/util/storage.ts | 7 +- src/popup/index.tsx | 2 +- src/popup/layout/header.tsx | 6 + src/popup/tabs/UserProfile.tsx | 138 ------------------- src/popup/tabs/user/UserProfile.tsx | 21 +++ src/popup/tabs/user/UserProfileLoggedIn.tsx | 59 ++++++++ src/popup/tabs/user/UserProfileLoggedOut.tsx | 108 +++++++++++++++ src/popup/ui/toast.tsx | 8 -- 11 files changed, 212 insertions(+), 150 deletions(-) delete mode 100644 src/popup/tabs/UserProfile.tsx create mode 100644 src/popup/tabs/user/UserProfile.tsx create mode 100644 src/popup/tabs/user/UserProfileLoggedIn.tsx create mode 100644 src/popup/tabs/user/UserProfileLoggedOut.tsx diff --git a/package.json b/package.json index 70c22c9..e986d75 100644 --- a/package.json +++ b/package.json @@ -93,7 +93,8 @@ "https://*.skinbid.com/*" ], "optional_host_permissions": [ - "*://*.steamcommunity.com/*" + "*://*.steamcommunity.com/*", + "*://*.steampowered.com/*" ], "externally_connectable": { "matches": [ diff --git a/src/background/index.ts b/src/background/index.ts index df1b4d4..6ccdcdb 100644 --- a/src/background/index.ts +++ b/src/background/index.ts @@ -22,6 +22,9 @@ chrome.runtime.onInstalled.addListener(async (details) => { const thisVersion = chrome.runtime.getManifest().version; console.log('[BetterFloat] Updated from version ' + details.previousVersion + ' to ' + thisVersion + '!'); + // delete user setting + // ExtensionStorage.sync.removeItem('user'); + // set default settings await initializeSettings(); diff --git a/src/lib/util/steam.ts b/src/lib/util/steam.ts index 8b4811f..fda5148 100644 --- a/src/lib/util/steam.ts +++ b/src/lib/util/steam.ts @@ -4,7 +4,12 @@ import type { SettingsUser } from './storage'; export async function getSteamLogin(): Promise { const settingsUser = {} as SettingsUser; - const steamPage = await fetch('https://steamcommunity.com/'); + const steamPage = await fetch('https://steamcommunity.com/', { + credentials: 'include', + headers: { + Accept: 'text/html,application/xhtml+xml,application/xml;q=0.9;q=0.8,application/signed-exchange;v=b3;q=0.7', + }, + }); const steamPageText = await steamPage.text(); // get steam user info diff --git a/src/lib/util/storage.ts b/src/lib/util/storage.ts index 0721c0c..c130baa 100644 --- a/src/lib/util/storage.ts +++ b/src/lib/util/storage.ts @@ -159,7 +159,7 @@ export const DEFAULT_SETTINGS = { 'baron-color-loss': '#ce0000', 'baron-color-neutral': '#708090', 'display-updatepopup': true, - user: { steam: { isLoggedIn: false } } as SettingsUser, + user: { steam: { isLoggedIn: false }, plan: { type: 'free' } } as SettingsUser, }; export const DEFAULT_FILTER = { @@ -186,6 +186,11 @@ export type SettingsUser = { avatar_url?: string; display_name?: string; }; + plan: { + type: 'free' | 'pro'; + expiry?: number; + jwt?: string; + } }; export type IStorage = typeof DEFAULT_SETTINGS; diff --git a/src/popup/index.tsx b/src/popup/index.tsx index b7fedc9..e94348a 100644 --- a/src/popup/index.tsx +++ b/src/popup/index.tsx @@ -20,7 +20,7 @@ import { SkinbaronSettings } from '~popup/tabs/Skinbaron'; import { SkinbidSettings } from '~popup/tabs/Skinbid'; import { SkinportSettings } from '~popup/tabs/Skinport'; import Header from './layout/header'; -import { UserProfile } from './tabs/UserProfile'; +import { UserProfile } from './tabs/user/UserProfile'; import { Tabs, TabsList, TabsTrigger } from './ui/tabs'; export default function IndexPopup() { diff --git a/src/popup/layout/header.tsx b/src/popup/layout/header.tsx index ef537fd..0d93f7e 100644 --- a/src/popup/layout/header.tsx +++ b/src/popup/layout/header.tsx @@ -5,8 +5,11 @@ import { DISCORD_URL, GITHUB_URL, WEBSITE_URL } from '~lib/util/globals'; import { IcRoundWarning, MdiGithub, SkillIconsDiscord } from '~popup/components/Icons'; import { Badge } from '~popup/ui/badge'; import { Button } from '~popup/ui/button'; +import { useStorage } from '@plasmohq/storage/hook'; +import { DEFAULT_SETTINGS, type IStorage } from '~lib/util/storage'; export default function Header() { + const [user] = useStorage('user', DEFAULT_SETTINGS.user); const hostpermissions = chrome.runtime.getManifest().host_permissions as string[]; const requestPermissions = () => { @@ -44,6 +47,9 @@ export default function Header() {
window.open(WEBSITE_URL)} /> + + {user.plan.type === 'free' ? 'Free' : 'Pro'} + v. 2.0.0 diff --git a/src/popup/tabs/UserProfile.tsx b/src/popup/tabs/UserProfile.tsx deleted file mode 100644 index c01d960..0000000 --- a/src/popup/tabs/UserProfile.tsx +++ /dev/null @@ -1,138 +0,0 @@ -import { useStorage } from '@plasmohq/storage/hook'; -import { Bell, Globe, Sparkles, Star, Zap } from 'lucide-react'; -import { useState } from 'react'; -import { getSteamLogin } from '~lib/util/steam'; -import type { IStorage } from '~lib/util/storage'; -import { MdiSteamColored } from '~popup/components/Icons'; -import { Avatar, AvatarFallback, AvatarImage } from '~popup/ui/avatar'; -import { Badge } from '~popup/ui/badge'; -import { Button } from '~popup/ui/button'; -import { Card, CardContent } from '~popup/ui/card'; -import { TabTemplate } from './TabTemplate'; - -export const UserProfile = () => { - const [user, setUser] = useStorage('user'); - const [permissionDenied, setPermissionDenied] = useState(false); - const [isLoading, setIsLoading] = useState(false); - - const steamSignin = async () => { - setPermissionDenied(false); - setIsLoading(true); - - try { - const granted = await chrome.permissions.request({ origins: ['*://*.steamcommunity.com/*'] }); - if (!granted) { - setPermissionDenied(true); - console.warn('Permission denied'); - return; - } - - const steamUser = await getSteamLogin(); - if (steamUser) { - setUser({ ...user, steam: steamUser }); - } - } finally { - setIsLoading(false); - } - }; - - const steamLogout = () => { - setUser({ ...user, steam: { logged_in: false } }); - }; - - return ( - -
-
-
-

BetterFloat Pro

- - BETA - -
- {user?.steam?.logged_in ? ( - <> -
-
-
-
- - - {user.steam.display_name?.slice(0, 2)} - -
-
- {user.steam.display_name} - {user.steam.steamid} -
- - - - {/* Display details about current plan / payment details */} - Soon™ - - - -
- -
- - ) : ( - <> - - {permissionDenied && ( -
- Please allow access to Steam to login -
- )} -
- - Free during the Beta! - -
- - -

Features

-
- - Access to More Markets -
-
- - Enhanced Price Refresh Rate (1 hour) -
-
- - Exclusive Instant Notifications for New Listings -
-
- - Early Access to New Features -
- - - - )} -
-
- - ); -}; diff --git a/src/popup/tabs/user/UserProfile.tsx b/src/popup/tabs/user/UserProfile.tsx new file mode 100644 index 0000000..6a82f43 --- /dev/null +++ b/src/popup/tabs/user/UserProfile.tsx @@ -0,0 +1,21 @@ +import { useStorage } from '@plasmohq/storage/hook'; +import { DEFAULT_SETTINGS, type IStorage } from '~lib/util/storage'; +import { TabTemplate } from '../TabTemplate'; +import { LoggedInView } from './UserProfileLoggedIn'; +import { LoggedOutView } from './UserProfileLoggedOut'; + +export const UserProfile = () => { + const [user, setUser] = useStorage('user', DEFAULT_SETTINGS.user); + + return ( + +
+ {user.steam.logged_in ? ( + + ) : ( + + )} +
+ + ); +}; diff --git a/src/popup/tabs/user/UserProfileLoggedIn.tsx b/src/popup/tabs/user/UserProfileLoggedIn.tsx new file mode 100644 index 0000000..4e433ab --- /dev/null +++ b/src/popup/tabs/user/UserProfileLoggedIn.tsx @@ -0,0 +1,59 @@ +import type { IStorage } from '~lib/util/storage'; +import { Avatar, AvatarFallback, AvatarImage } from '~popup/ui/avatar'; +import { Button } from '~popup/ui/button'; +import { Card, CardContent } from '~popup/ui/card'; + +interface LoggedInViewProps { + user: IStorage['user']; + setUser: (user: IStorage['user']) => void; +} + +export function LoggedInView({ user, setUser }: LoggedInViewProps) { + const steamLogout = () => { + setUser({ ...user, steam: { logged_in: false } }); + }; + + return ( + <> +
+
+
+
+ + + {user.steam.display_name?.slice(0, 2)} + +
+
+ {user.steam.display_name} + {user.steam.steamid} +
+ + + + {/* Display details about current plan / payment details */} +

Current plan

+ +
+ {user.plan.type === 'free' ? ( + Free + ) : ( + Pro + )} + +
+ + + +
+ +
+ + ); +} diff --git a/src/popup/tabs/user/UserProfileLoggedOut.tsx b/src/popup/tabs/user/UserProfileLoggedOut.tsx new file mode 100644 index 0000000..b86a595 --- /dev/null +++ b/src/popup/tabs/user/UserProfileLoggedOut.tsx @@ -0,0 +1,108 @@ +import { Bell, Globe, Sparkles, Star, Zap } from 'lucide-react'; +import { useState } from 'react'; +import { getSteamLogin } from '~lib/util/steam'; +import type { IStorage } from '~lib/util/storage'; +import { MdiSteamColored } from '~popup/components/Icons'; +import { Badge } from '~popup/ui/badge'; +import { Button } from '~popup/ui/button'; +import { Card, CardContent } from '~popup/ui/card'; + +interface LoggedOutViewProps { + user: IStorage['user']; + setUser: (user: IStorage['user']) => void; +} + +export function LoggedOutView({ user, setUser }: LoggedOutViewProps) { + const [permissionDenied, setPermissionDenied] = useState(false); + const [noSteamLogon, setNoSteamLogon] = useState(false); + const [isLoading, setIsLoading] = useState(false); + + const steamSignin = async () => { + setPermissionDenied(false); + setIsLoading(true); + + try { + const granted = await chrome.permissions.request({ origins: ['*://*.steamcommunity.com/*', '*://*.steampowered.com/*'] }); + if (!granted) { + setPermissionDenied(true); + console.warn('Permission denied'); + return; + } + + const steamUser = await getSteamLogin(); + if (!steamUser) { + console.warn('Failed to get Steam login'); + setNoSteamLogon(true); + return; + } + + setUser({ ...user, steam: steamUser }); + } finally { + setIsLoading(false); + } + }; + + return ( + <> +
+

BetterFloat Pro

+ + BETA + +
+ + {noSteamLogon && ( +
+ Login to Steam to continue +
+ )} + {permissionDenied && ( +
+ Please allow access to Steam to login +
+ )} +
+ + Free during the Beta! + +
+ + +

Features

+
+ + Access to More Markets +
+
+ + Enhanced Price Refresh Rate (1 hour) +
+
+ + Exclusive Instant Notifications for New Listings +
+
+ + Early Access to New Features +
+ + + + ); +} diff --git a/src/popup/ui/toast.tsx b/src/popup/ui/toast.tsx index a0e1774..e1c968e 100644 --- a/src/popup/ui/toast.tsx +++ b/src/popup/ui/toast.tsx @@ -1,10 +1,6 @@ 'use client'; -import * as AccordionPrimitive from '@radix-ui/react-accordion'; import { Cross2Icon } from '@radix-ui/react-icons'; -import { ChevronDownIcon } from '@radix-ui/react-icons'; -import * as PopoverPrimitive from '@radix-ui/react-popover'; -import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area'; import * as ToastPrimitives from '@radix-ui/react-toast'; import { type VariantProps, cva } from 'class-variance-authority'; import * as React from 'react'; @@ -77,8 +73,4 @@ const ToastDescription = React.forwardRef; - -type ToastActionElement = React.ReactElement; - export { ToastProvider, ToastViewport, Toast, ToastAction, ToastClose, ToastTitle, ToastDescription };