Provide more specific payout method names on frontend (#4977)

* Provide more specific payout method names on frontend

Been getting a lot of confused tickets recently of people withdrawing to PayPal but then not recognizing what "Tremendous" means. This should clarify things.

* feat: improve icons + names for withdrawals

* Update apps/frontend/src/components/ui/dashboard/RevenueTransaction.vue

Co-authored-by: Emma Alexia <emma@modrinth.com>
Signed-off-by: Calum H. <hendersoncal117@gmail.com>

* fix: icons

* fix: object cover

* feat: icons for crypto + bank

* fix: remove empty null

* fix: qa

---------

Signed-off-by: Calum H. <hendersoncal117@gmail.com>
Co-authored-by: Calum H. <contact@cal.engineer>

packages/api-client/src/modules/labrinth/state/index.ts

@@ -40,6 +40,7 @@ export class LabrinthStateModule extends AbstractModule {
 			products,
 			muralBankDetails,
 			iso3166Data,
+			payoutMethods,
 		] = await Promise.all([
 			// Tag endpoints
 			this.client
@@ -114,8 +115,23 @@ export class LabrinthStateModule extends AbstractModule {
 			this.client.iso3166.data
 				.build()
 				.catch((err) => handleError(err, { countries: [], subdivisions: {} })),
+
+			// Payout methods for tremendous ID mapping
+			this.client
+				.request<Labrinth.State.PayoutMethodInfo[]>('/payout/methods', {
+					api: 'labrinth',
+					version: 3,
+					method: 'GET',
+				})
+				.catch((err) => handleError(err, [])),
 		])
 
+		const tremendousIdMap = Object.fromEntries(
+			(payoutMethods as Labrinth.State.PayoutMethodInfo[])
+				.filter((m) => m.type === 'tremendous')
+				.map((m) => [m.id, { name: m.name, image_url: m.image_logo_url }]),
+		)
+
 		return {
 			categories,
 			loaders,
@@ -127,6 +143,7 @@ export class LabrinthStateModule extends AbstractModule {
 			homePageNotifs,
 			products,
 			muralBankDetails: muralBankDetails?.bankDetails,
+			tremendousIdMap,
 			countries: iso3166Data.countries,
 			subdivisions: iso3166Data.subdivisions,
 			errors,

packages/api-client/src/modules/labrinth/types.ts

@@ -699,6 +699,13 @@ export namespace Labrinth {
 	}
 
 	export namespace State {
+		export interface PayoutMethodInfo {
+			id: string
+			type: string
+			name: string
+			image_logo_url: string | null
+		}
+
 		export interface GeneratedState {
 			categories: Tags.v2.Category[]
 			loaders: Tags.v2.Loader[]
@@ -711,6 +718,13 @@ export namespace Labrinth {
 					bankNames: string[]
 				}
 			>
+			tremendousIdMap?: Record<
+				string,
+				{
+					name: string
+					image_url: string | null
+				}
+			>
 
 			homePageProjects?: Projects.v2.Project[]
 			homePageSearch?: Search.v2.SearchResults