Create a design library that contains all necessary components:

• Fonts (size, weight, height, tracking)
• Color palette
• Elements
• Components

Figma file

As a user using the MetaMask browser extension as my wallet, I want the browser extension version inside of HyperPlay to update when the MetaMask extension itself is updated within Chrome, so that I can benefit from all the latest features and security updates.

description

We need to determine if this is possible/desirable. Alternatively, we could just ship the latest version from Github inside of HyperPlay manually each time we cut a HyperPlay release, but this might result in our users receiving security updates later than mainline browser users.

As a person just onboarding into HyperPlay, I'd like to be able to postpone setting up my wallet, so that I can go straight into a game that I want to place.

Description

For players who may not already have a web3 wallet, onboarding at the time of installing HyperPlay may be perceived as a hassle, and too much friction. We need to allow users to select a postpone option when setting up their wallet.

AC

• "Do this later" button in the onboarding journey
• Re-prompt to set up the wallet each time HyperPlay is launched

As a HyperPlay player or developer, I'd like to see that MetaMask Extension support is coming soon, so that I'll know that HyperPlay is still building the overlay / extension related features.

**Description**

This is for the wallet connection flow. Needs designs.

Example design pattern: https://www.figma.com/file/GKPELZxk551oVC3EDLgEDA/HyperPlay-Game-Launcher?node-id=614%3A8057&t=Who8TRWHgdSZVTIz-0

As a HyperPlay user, I'd like to be prompted to re-connect my wallet before launching a web3 game if my wallet is not currently connected, so that my wallet will work in the game.

Description

Because the current iteration of the MetaMask SDK cannot persist sessions (yet), we need to ask the user to log back in with their wallet on application launch. The welcome screen could also have other login options in the future when more wallets are supported.

acceptance criteria

• include the "do this later" button
• fire at web3 game launch

as a player onboarding into HyperPlay, I'd like to connect my wallet with Wallet Connect via a QR code, so that transactions from the desktop game I'm playing can be passed over to my Wallet Connect supported Mobile Wallet app.

description

In our MVP iteration, we're passing all transactions to either MetaMask Mobile or Wallet Connect. Either wallet should pass transactions from desktop applications to Mobile app as a signer after the user first scans a QR code. Subsequent releases will help us with overlaying/injecting the browser extension on top of the game client, but for now, our goal is to create an interoperable solution for passing all transactions to mobile.

acceptance criteria

• any solution we implement must allow the connected wallet to be carried into any game installed through HyperPlay, and should not be a per-game solution.

As a gamer, I want to see a hyperplay-hosted game page that lets me see the details of a game that hyper play is hosting directly so that I can decide if I want to install/play the game.

Description

This would be a page hosted by hyperplay that is viewable in the client via the in-client browser.

Acceptance Criteria

• infrastructure to create and host pages for games
• one-click link on the featured game to view page in the client

Create a layout for store that includes:

• Web3 Gallery (promoted games)
• Games (Image, title)
• Filters

Figma Link

as a player onboarding into HyperPlay, I'd like to be prompted to connect my MetaMask wallet, so that so that my hyperplay client will be configured to allow me to engage in web3 interactions within the games I play.

description

this story covers the journey of the user being prompted to set up their wallet the first time they launch the HyperPlay app. Possible pattern: launch as a modal on top of the client.

acceptance criteria

• trigger prompt during launch

As a HyperPlay server, I'd like to only have transaction requests to the proxy server to be able to be submitted by a PID that was launched from within HyperPlay, so that other applications on my device cannot spam me with transactions that I didn't mean to approve.

description

this is a security related card. it originally was conceived of as a performance issue with leaving the server running, but on further discussion, we've refined this card to focus on the security issue of third party applications sending transaction requests in a way that confuses the player and causes them to approve txs from other applications on their device.

the release has been moved out of the developer alpha to the public beta release.

As a web3 wallet user, I'd like to see an indication in the HyperPlay UI that indicates whether my wallet is connected, so that I will know whether I need to re-scan the QR code and re-connect my wallet (or connect it for the first time).

Description

We need an indicator of wallet connection state on the homescreen, or potentially nested under a wallet tab. Either way, this information will be important to the user.

As a HyperPlay user viewing the HyperPlay store, I'd like to see a game's listing page, so that I can learn more about the game.

Description

This is the game's listing detail page.

AC

• Display metadata from Valist
• Screenshots
• Video (supporting Valists' YouTube embed)
• System requirements
• Type
  • Browser, Desktop
  • For desktop: OS (how should we represent the difference between native builds versus those that work through Proton?)
• Game version
• Chain (alphabetical: Ethereum, Polygon, Avalanche, Mantle, Arbitrum, Optimism, Custom EVM Game Chain)

As a HyperPlay user with multiple wallet connections (ie. extension and mobile), I'd like to select which method to use when launching a game, so that I'll be using the wallet I prefer and any platform specific features will be available.

Description
Users may have multiple wallets connections (i.e. extension and mobile) and may want to use a specific wallet for specific games for various reasons like separating reputation / assets by wallet. Users should be able to select their preferred, connected wallet for any game they launch as part of launching that game.

AC

• Pop up before launching game with:
  • current wallet address
  • ability to click on current wallet address and choose an alternative connected wallet from a drop down list of connected wallets
  • confirm button that then proceeds to launch the game with the selected wallet address connected

As a web3 gamer, I want to be able to quickly find and download featured games when I load the library, so that I can find games that are fully compatible with HyperPlay.

description

Given that a gamer loads the library and the featured games are at the top in their own section that highlights them.
Then the user selects a game and can easily be launched or installed through HyperPlay.

Acceptance Criteria

• infrastructure that covers hosting games
• UI for downloading/launching games

As a MetaMask Mobile user connecting to the SDK via HyperPlay, I'd like to see an animation of how to connect my wallet with a QR code, so that I will know that I need to scan the QR code from within the MM Mobile app.

description

Currently, MetaMask Mobile's SDK isn't working if the user scans the QR code from the default android camera app. This story is meant to make sure users don't make this mistake before the MetaMask team resolves the issue.

As a gamer I want to download HyperPlay and not have to adjust settings on Mac or Windows to allow applications from "untrusted/unverified developers".

This will require us to get certification from Apple/Microsoft.

As a player, I want to be able to quickly see where to download HyperPlay, so that I can start playing.

Acceptance Criteria

• Download links for all supported OSes including SteamDeck
• Prominently featured on the site
• Design simple download page equivalent to Heroic download page or MetaMask download page

https://heroicgameslauncher.com/downloads

Need to be able to limit access and permission based on participants who are accepted into the alpha.

• Have Google Drive only available to certain email addresses, add the relevant email addresses on the intro calls. If they have signed up for access then they get the download
• Prevent non-participants from access
• Use Google Drive

As a game dev I want to be able to see a full example from beginning to end of a project using the developer docs so that I can orient and even build quickly.

Acceptance Criteria

• Full build example with full code
• Links and supporting doc references where they can find more information on key topics.

As a user, I want the settings pages to be easy to understand and navigate, so that I can adjust those setting to optimize my experience as a HyperPlay user.

Description
Using the new UI library, make updates to Settings screens:

• General
• Advanced
• Accessibility
• Wine Manager
• Other
• Advanced
• Log

AC

• Settings pages UI matches the attached figma pages

When starting the application, a white screen is shown instead of actual content or a loading screen.

ac

• The white screen at the beginning shouldn't be shown

as a player onboarding into HyperPlay, I'd like to connect my MetaMask wallet via a QR code, so that transactions from the desktop game I'm playing can be passed over to my MetaMask Mobile app.

description

In our MVP iteration, we're passing all transactions to MetaMask Mobile using the MetaMask SDK beta release (or subsequent release if it comes out during our development cycle). The MetaMask SDK beta will pass transactions from desktop applications to MetaMask Mobile as a signer after the user first scans a QR code. Subsequent releases will help us with overlaying/injecting the browser extension on top of the game client, but for now, our goal is to create an interoperable solution for passing all transactions to the MM mobile app.

acceptance criteria

• any solution we implement must allow the connected wallet to be carried into any game installed through HyperPlay, and should not be a per-game solution.

As a gamer I want to see information on when HyperPlay is launching so that I know when to check back or receive an email regarding the Beta.

description

This could be as simple as "Coming Soon" or "Beta coming Summer 2023" or whatever

acceptance criteria

this should be displayed prominently and before you get to the "sign up to stay in touch".

As a HyperPlay user, I'd like the HyperPlay application to move to the system tray and not be killed when I close out the application, so that I can more quickly get the application going again when I'm ready to play.

This setting already exists in HyperPlay.

ac

• Enable the minimize to system tray setting by default
• Enable minimize on game launch by default

As a player, I would like to see feedback or visual acknowledgement of transactions sent to my mobile device, so that I know I need to approve a transaction on my mobile device.

description

In addition to the overlay view for the browser extension wallet, we also need to implement an overlay solution for when people are using an external signer (mobile wallet). This view is used to notify the user they have a pending transaction on the external signer, and should be triggered automatically upon transation/signature request. The mobile itself doesn't need to have the details of the transaction, it just needs to tell the user that a confirmation is pending on their mobile device.

Sample text:

"Confirmation Request Pending on Mobile"

(Logo of connect method user chose)

A wallet confirmation is pending on your mobile wallet.

(loading spinner)

Acceptance criteria

• Trigger on any type of wallet confirmation (transaction, signature, custom network approval, custom token approval, etc).

Transaction request:

"Transaction request pending"
"Transaction submitted"
"Transaction confirmed"

Signature request:

"Signature request pending"
"Signature submitted"
"Signature confirmed"
Jacob Cantele15:44
Add custom network request:

"Add custom network request pending"
"Add custom network confirmed

Add custom token:

"Add custom token request pending"
"Add custom token confirmed"
HyperPlay Sprint Planning

As a gamer, I want to be able to side-load games onto HyperPlay that are not available in the connected game stores, so that I can launch and wallet connect to games all from one place.

Many web3 games may not be available on connected game stores. Side-loading games will be an important entry point for web3 games to be played using HyperPlay.

Acceptance Criteria

• It needs to have a way of opening the form to sideload a game
• This form needs to contain the following fields:
  • Name of App/Game
  • Platform (on Linux and mac this could be native or Windows)
  • Artwork
  • Brief Description
  • Checkbox to mark if it supports web3 transactions
  • Input to select the binary
  • If a Windows app/game on Linux should have Wine and Wineprefix selection options/inputs
  • If a Windows game on macOS, should show the option to select the Crossover Version and Bottle Name.
• This should be a Modal like the current Install Dialog we have and follow same design guidelines
• When clicking ok the game should show under the HyperPlay runner filter
• Commit this as a contribution to Heroic

As a player trying out HyperPlay, I'd like to see a hyperplay branded fork of the Heroic Games Launch, so that I can feel sexy web3 vibes when opening up the client.

description

Currently, the Heroic Games Launcher has a brand and aesthetic of its own. With this story, we hope to implement a new brand aesthetic and system for the HyperPlay application, and to develop a distinct brand voice that can be used to reskin the existing HGL application.

In terms of goals for the brand: the branding and aesthetics should be dark themed with vibrant colors and transitions, appealing to web3 communities and gamer communities. brands that can be used as inspiration:
https://aesthetics.fandom.com/wiki/Neo-Tokyo
mesh.xyz
wonderverse.xyz
https://www.pinterest.com/pin/vaporwave-aesthetic-otaku-japanese-paradise-sunset-tshirt--861383866231778852/

acceptance criteria

• apply brand to full HGL client

As a HyperPlay user, I want a Library page that shows my games in a grid view (or prompts me to go to the store if my Library is empty), so that I can manage my games.

Description
Using new UI library, make updates to:

• Empty states
• Card states in general (hover, settings, play, etc)
• Prompt to go to Store when the Library is empty

AC

• Update Library page designs per figma
• Add new responsive states like hover for cards
• Display game states / settings per figma
• Create modal prompting a redirect to the HyperPlay store whenever a user's Library is empty.

As a game developer, I'd like to download an example Unreal Project so that I can learn more about how to build a project for HyperPlay.

Description

This is building / distributing a the Unity test project Brett has been working on.

AC

• Discoverable through developer docs
• Hosting of files

As a game developer, I'd like to see a list of HyperPlay's partners, so that I know it is a reputable projects.

description

This is a content block on the HyperPlay website listing projects that have signed up to be partners of HyperPlay. Current partners include:

Game7, Yeeha Games, MetaMask

Other possible partners (need confirmation): Animoca, Sandbox, Infinity Skies, Phantom Galaxies, Mythic Games, Citizen

acceptance criteria

*****Game7 must be most prominent, and include some language that HyperPlay is a product of game7

As a MetaMask wallet holder, I'd like to be prompted to sign back in using my QR code when launching a web3 enabled game, so that my wallet will be reconnected.

Description

This story covers the reconnection implementation on the welcome back modal. This story is specific to if the connection is broken or the session is no longer active on MetaMask Mobile or WalletConnect.

This can use the existing connection modal design.

AC

• Only fire if wallet is disconnected.
• Only fire if game is web3-enabled.

Issue first raised here and discussed with HGL team on 9/2: Heroic-Games-Launcher/HeroicGamesLauncher#1772
PR refactoring ~800 lines of code submitted on 9/6 (9/5 holiday): Heroic-Games-Launcher/HeroicGamesLauncher#1783

This is the first (and largest) step towards enabling sandboxing in the entire renderer process. As security should be a top priority for HP, I think this is important. It will also improve developer productivity with api calls being type checked.

In doing this, I've also learned a lot about Vite and the frontend code architecture, which will help when implementing full stack features like the onboarding flow.

As an admin of the HyperPlay platform I want to capture critical usage data so that I can use it to track and measure key metrics from the beginning of the launch of the platform.

Proposal for this story here:

https://docs.google.com/document/d/1UjATGwld7mpi9TtbeuSOedoazPEV5PNpR0pria0jWhY/edit#heading=h.szy3la75wt2c

As a web3 wallet user who is attempting to connect their MM mobile or Wallet Connect wallet to HyperPlay, I want to be notified in the HP application that I rejected the connection request, so that I can be prompted to retry connecting or skip connecting for now.

Acceptance Criteria

• options to retry or skip for now

As a user with the MetaMask browser extension selected as my wallet method, I'd like to see the full screen wallet view within HyperPlay so that I'll be able to fully manage my wallet.

description

For these extension users, they'll need a way to access the MetaMask full screen view (navigate to: chrome-extension://nkbihfbeogaeaoehlefnkodbefgpgknn/home.html ).

This should most likely be a new menu item on the sidebar so as to avoid replacing the onboarding / connect wallet menu.

ac

• Only show new menu items if relevant wallet connection has been selected
• Open in browser view on top of HyperPlay
• 80% of total screensize with blur in background
• add menu item

As a game developer, I want to have clear, instructive documentation for making use of the HyperPlay REST APIs, so that I can build in a straightforward and easy way

description

This story covers the develop docs site, hosted on gitbook.

Acceptance Criteria

• Use Gitbook
• Readme-level general information
• Examples of key functions/uses/syntax

As a game developer, I want to be able to request early access to be on the waitlist so that I can get access to start building

This is to adjust the settings of the Extension install to have dark mode enabled by default so that there is not a jarring difference between hyperplay and MetaMask.

As a gamer I want to have wallet interactions appear in context while I am playing a game and not require me to switch screens, applications, or devices to complete the interaction.

Acceptance criteria

• depending on design, this should be an overlay on-top of the game.
• should handle all types of wallet interactions available via the proxy-library

As a MetaMask Extension user using HyperPlay, I'd like to import my existing install, so that I won't have to re-enter my secret recovery phrase.

description

This feature allows the player to detect a MetaMask Extension installation in a browser install.

Unfortunately, we probably have to make a copy of the Chrome or Brave (Firefox unsupported) install rather than writing to the other install an keeping them in sync, as modifying an Extension installation will throw serious security warnings.

Once imported, the user will decrypt their MetaMask vault file with their password (again, not need for them to enter the secret recovery phrase).

Documentation on MetaMask vault files: https://metamask.zendesk.com/hc/en-us/articles/360018766351-How-to-recover-your-Secret-Recovery-Phrase

AC

• Need to get explicit consent from user before importing the vault file
• Support Chrome
• Support Brave
• Support all relevant OSes (including their path to the browser extension folder)
• Message explaining this is a one-time settings import (copy TBD)

As a player, I would like to see feedback or visual acknowledgement of transactions sent to my mobile device, so that I know I need to approve a transaction on my mobile device.

description

In addition to the overlay view for the browser extension wallet, we also need to implement an overlay solution for when people are using an external signer (mobile wallet). This view is used to notify the user they have a pending transaction on the external signer, and should be triggered automatically upon transaction/signature request. The mobile itself doesn't need to have the details of the transaction, it just needs to tell the user that a confirmation is pending on their mobile device.

Sample text:

(Title of the confirmation type, see below for titles)

(Logo of connect method user chose)

"A wallet confirmation is pending on your mobile wallet."(This generic copy can be used on all confirmation pending screens, but hide it once the user has submitted)

(loading spinner)

Acceptance criteria

• Trigger on any type of wallet confirmation (transaction, signature, custom network approval, custom token approval, etc).

Connection requestion titles (we can reuse this for reconnection requests too):
"Wallet connection requested"
"Wallet connection approved"

Transaction request titles:

"Transaction request pending"
"Transaction submitted"
"Transaction confirmed"

Signature request:

"Signature request pending"
"Signature submitted"
"Signature confirmed"

Add custom network request:

"Add custom network request pending"
"Add custom network confirmed

Add custom token:

"Add custom token request pending"
"Add custom token confirmed"

As someone with a wallet other than MetaMask, I'd like to see an indication in the UI that WalletConnect support is coming soon, so that I will know HyperPlay will eventually be able to support whatever wallet I'm relying on.

Description

For both players and gamedevs, its important that HyperPlay not be perceived as a MetaMask-only product. In the early days, we won't have those features, so we need an indication in the UI that they are coming soon so that we are not losing traction among the audiences that rely on these features.

As a game developer, I'd like to download an example Unity Project so that I can learn more about how to build a project for HyperPlay.

Description

This is building / distributing a the Unity test project Brett has been working on.

AC

• Discoverable through developer docs
• Hosting of files

As a player, I'd like to press a hotkey to toggle HyperPlay's overlay, so that I can see the status of my wallet.

Description

This is implementing the hotkey to show or hide our overlay.

AC

• use CTRL + TAB
• Disable the Epic overlay for web3 games to allow us to use the same hotkey as Epic