[SDK] Feature: Steam Auth (#5415)

CNCT-2198

<!-- start pr-codex -->

---

## PR-Codex overview
This PR introduces `Steam` as a new authentication option across various components and files, enhancing the authentication capabilities of the application.

### Detailed summary
- Added `Steam` as an authentication option in multiple files.
- Updated `types.ts` and `oauthSignIn.ts` to include `Steam`.
- Added `STEAM_ICON` in `svgs.ts` for UI representation.
- Updated connection options in `ConnectWalletMiniPlayground.tsx`.
- Modified documentation to include `Steam` in social logins.

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->

Author: gregfromstl

.changeset/dirty-cups-tickle.md

@@ -0,0 +1,5 @@
+---
+"thirdweb": minor
+---
+
+Adds steam auth

.changeset/small-eagles-cry.md

@@ -0,0 +1,5 @@
+---
+"thirdweb": minor
+---
+
+Adds Steam as an authentication option

apps/dashboard/src/app/team/[team_slug]/(team)/~/ecosystem/types.ts

@@ -12,6 +12,7 @@ export const authOptions = [
   "telegram",
   "github",
   "twitch",
+  "steam",
   "apple",
   "coinbase",
   "line",

apps/dashboard/src/components/wallets/ConnectWalletMiniPlayground/MiniPlayground.tsx

@@ -74,6 +74,7 @@ function usePlaygroundWallets() {
     passkey: true,
     phone: true,
     twitch: false,
+    steam: false,
     facebook: false,
     apple: false,
     github: false,

apps/playground-web/src/app/connect/sign-in/components/InAppWalletFormGroup.tsx

@@ -12,6 +12,7 @@ const allInAppWalletLoginMethods: InAppWalletAuth[] = [
   "telegram",
   "github",
   "twitch",
+  "steam",
   "farcaster",
   "email",
   "passkey",

apps/portal/src/app/dotnet/wallets/providers/ecosystem-wallet/page.mdx

@@ -15,7 +15,7 @@ Create an instance of `EcosystemWallet` using a user's email, phone number or OA
 Ecosystem Wallets support a variety of login methods:
 - Email (OTP Login)
 - Phone (OTP Login)
-- Socials (Google, Apple, Facebook, Telegram, Farcaster, Line, Github, Twitch etc.)
+- Socials (Google, Apple, Facebook, Telegram, Farcaster, Line, Github, Twitch, Steam, etc.)
 - SIWE (Sign-In with Ethereum)
 - Custom Auth (OIDC Compatible)
 - Custom Auth (Generic Auth Endpoint)

apps/portal/src/app/unity/v5/wallets/ecosystem-wallet/page.mdx

@@ -20,7 +20,7 @@ Ecosystem Wallets have a very similar API to the [In-App Wallet](/unity/v5/walle
 Ecosystem Wallets support a variety of login methods:
 - Email (OTP Login)
 - Phone (OTP Login)
-- Socials (Google, Apple, Facebook, Telegram, Farcaster, Line, Github, Twitch etc.)
+- Socials (Google, Apple, Facebook, Telegram, Farcaster, Line, Github, Twitch, Steam, etc.)
 - SIWE (Sign-In with Ethereum)
 - Custom Auth (OIDC Compatible)
 - Custom Auth (Generic Auth Endpoint)
@@ -167,4 +167,4 @@ List<LinkedAccount> linkedAccounts = await mainEcosystemWallet.GetLinkedAccounts
 	href="/dotnet/wallets/providers/ecosystem-wallet"
 	icon={GraduationCap}
 	title="Learn more about EcosystemWallet"
-/>
+/>

apps/portal/src/app/unity/v5/wallets/in-app-wallet/page.mdx

@@ -18,7 +18,7 @@ It makes for a fantastic [SmartWallet](/unity/v5/wallets/account-abstraction) ad
 In-App Wallets support a variety of login methods:
 - Email (OTP Login)
 - Phone (OTP Login)
-- Socials (Google, Apple, Facebook, Telegram, Farcaster, Line, Github, Twitch etc.)
+- Socials (Google, Apple, Facebook, Telegram, Farcaster, Line, Github, Twitch, Steam, etc.)
 - SIWE (Sign-In with Ethereum)
 - Custom Auth (OIDC Compatible)
 - Custom Auth (Generic Auth Endpoint)
@@ -147,4 +147,4 @@ List<LinkedAccount> linkedAccounts = await mainInAppWallet.GetLinkedAccounts();
 	href="/dotnet/wallets/providers/in-app-wallet"
 	icon={GraduationCap}
 	title="Learn more about InAppWallet"
-/>
+/>

packages/thirdweb/src/react/core/utils/walletIcon.ts

@@ -19,6 +19,8 @@ const telegramIconUri =
   "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMTAwMHB4IiBoZWlnaHQ9IjEwMDBweCIgdmlld0JveD0iMCAwIDEwMDAgMTAwMCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4KICAgIDwhLS0gR2VuZXJhdG9yOiBTa2V0Y2ggNTMuMiAoNzI2NDMpIC0gaHR0cHM6Ly9za2V0Y2hhcHAuY29tIC0tPgogICAgPHRpdGxlPkFydGJvYXJkPC90aXRsZT4KICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPgogICAgPGRlZnM+CiAgICAgICAgPGxpbmVhckdyYWRpZW50IHgxPSI1MCUiIHkxPSIwJSIgeDI9IjUwJSIgeTI9Ijk5LjI1ODM0MDQlIiBpZD0ibGluZWFyR3JhZGllbnQtMSI+CiAgICAgICAgICAgIDxzdG9wIHN0b3AtY29sb3I9IiMyQUFCRUUiIG9mZnNldD0iMCUiPjwvc3RvcD4KICAgICAgICAgICAgPHN0b3Agc3RvcC1jb2xvcj0iIzIyOUVEOSIgb2Zmc2V0PSIxMDAlIj48L3N0b3A+CiAgICAgICAgPC9saW5lYXJHcmFkaWVudD4KICAgIDwvZGVmcz4KICAgIDxnIGlkPSJBcnRib2FyZCIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICAgICAgPGNpcmNsZSBpZD0iT3ZhbCIgZmlsbD0idXJsKCNsaW5lYXJHcmFkaWVudC0xKSIgY3g9IjUwMCIgY3k9IjUwMCIgcj0iNTAwIj48L2NpcmNsZT4KICAgICAgICA8cGF0aCBkPSJNMjI2LjMyODQxOSw0OTQuNzIyMDY5IEMzNzIuMDg4NTczLDQzMS4yMTY2ODUgNDY5LjI4NDgzOSwzODkuMzUwMDQ5IDUxNy45MTcyMTYsMzY5LjEyMjE2MSBDNjU2Ljc3MjUzNSwzMTEuMzY3NDMgNjg1LjYyNTQ4MSwzMDEuMzM0ODE1IDcwNC40MzE0MjcsMzAxLjAwMzUzMiBDNzA4LjU2NzYyMSwzMDAuOTMwNjcgNzE3LjgxNTgzOSwzMDEuOTU1NzQzIDcyMy44MDY0NDYsMzA2LjgxNjcwNyBDNzI4Ljg2NDc5NywzMTAuOTIxMjEgNzMwLjI1NjU1MiwzMTYuNDY1ODEgNzMwLjkyMjU1MSwzMjAuMzU3MzI5IEM3MzEuNTg4NTUxLDMyNC4yNDg4NDggNzMyLjQxNzg3OSwzMzMuMTEzODI4IDczMS43NTg2MjYsMzQwLjA0MDY2NiBDNzI0LjIzNDAwNyw0MTkuMTAyNDg2IDY5MS42NzUxMDQsNjEwLjk2NDY3NCA2NzUuMTEwOTgyLDY5OS41MTUyNjcgQzY2OC4xMDIwOCw3MzYuOTg0MzQyIDY1NC4zMDEzMzYsNzQ5LjU0NzUzMiA2NDAuOTQwNjE4LDc1MC43NzcwMDYgQzYxMS45MDQ2ODQsNzUzLjQ0ODkzOCA1ODkuODU2MTE1LDczMS41ODgwMzUgNTYxLjczMzM5Myw3MTMuMTUzMjM3IEM1MTcuNzI2ODg2LDY4NC4zMDY0MTYgNDkyLjg2NjAwOSw2NjYuMzQ5MTgxIDQ1MC4xNTAwNzQsNjM4LjIwMDAxMyBDNDAwLjc4NDQyLDYwNS42Njg3OCA0MzIuNzg2MTE5LDU4Ny43ODkwNDggNDYwLjkxOTQ2Miw1NTguNTY4NTYzIEM0NjguMjgyMDkxLDU1MC45MjE0MjMgNTk2LjIxNTA4LDQzNC41NTY0NzkgNTk4LjY5MTIyNyw0MjQuMDAwMzU1IEM1OTkuMDAwOTEsNDIyLjY4MDEzNSA1OTkuMjg4MzEyLDQxNy43NTg5ODEgNTk2LjM2NDc0LDQxNS4xNjA0MzEgQzU5My40NDExNjgsNDEyLjU2MTg4MSA1ODkuMTI2MjI5LDQxMy40NTA0ODQgNTg2LjAxMjQ0OCw0MTQuMTU3MTk4IEM1ODEuNTk4NzU4LDQxNS4xNTg5NDMgNTExLjI5Nzc5Myw0NjEuNjI1Mjc0IDM3NS4xMDk1NTMsNTUzLjU1NjE4OSBDMzU1LjE1NDg1OCw1NjcuMjU4NjIzIDMzNy4wODA1MTUsNTczLjkzNDkwOCAzMjAuODg2NTI0LDU3My41ODUwNDYgQzMwMy4wMzM5NDgsNTczLjE5OTM1MSAyNjguNjkyNzU0LDU2My40OTA5MjggMjQzLjE2MzYwNiw1NTUuMTkyNDA4IEMyMTEuODUxMDY3LDU0NS4wMTM5MzYgMTg2Ljk2NDQ4NCw1MzkuNjMyNTA0IDE4OS4xMzE1NDcsNTIyLjM0NjMwOSBDMTkwLjI2MDI4Nyw1MTMuMzQyNTg5IDIwMi42NTkyNDQsNTA0LjEzNDUwOSAyMjYuMzI4NDE5LDQ5NC43MjIwNjkgWiIgaWQ9IlBhdGgtMyIgZmlsbD0iI0ZGRkZGRiI+PC9wYXRoPgogICAgPC9nPgo8L3N2Zz4=";
 const twitchIconUri =
   "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIKCSB2aWV3Qm94PSIwIDAgMjQwMCAyODAwIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAyNDAwIDI4MDA7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPHN0eWxlIHR5cGU9InRleHQvY3NzIj4KCS5zdDB7ZmlsbDojRkZGRkZGO30KCS5zdDF7ZmlsbDojOTE0NkZGO30KPC9zdHlsZT4KPHRpdGxlPkFzc2V0IDI8L3RpdGxlPgo8Zz4KCTxwb2x5Z29uIGNsYXNzPSJzdDAiIHBvaW50cz0iMjIwMCwxMzAwIDE4MDAsMTcwMCAxNDAwLDE3MDAgMTA1MCwyMDUwIDEwNTAsMTcwMCA2MDAsMTcwMCA2MDAsMjAwIDIyMDAsMjAwIAkiLz4KCTxnPgoJCTxnIGlkPSJMYXllcl8xLTIiPgoJCQk8cGF0aCBjbGFzcz0ic3QxIiBkPSJNNTAwLDBMMCw1MDB2MTgwMGg2MDB2NTAwbDUwMC01MDBoNDAwbDkwMC05MDBWMEg1MDB6IE0yMjAwLDEzMDBsLTQwMCw0MDBoLTQwMGwtMzUwLDM1MHYtMzUwSDYwMFYyMDBoMTYwMAoJCQkJVjEzMDB6Ii8+CgkJCTxyZWN0IHg9IjE3MDAiIHk9IjU1MCIgY2xhc3M9InN0MSIgd2lkdGg9IjIwMCIgaGVpZ2h0PSI2MDAiLz4KCQkJPHJlY3QgeD0iMTE1MCIgeT0iNTUwIiBjbGFzcz0ic3QxIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjYwMCIvPgoJCTwvZz4KCTwvZz4KPC9nPgo8L3N2Zz4K";
+const steamIconUri =
+  "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgNjUgNjUiIGZpbGw9IiNmZmYiPjx1c2UgeGxpbms6aHJlZj0iI0IiIHg9Ii41IiB5PSIuNSIvPjxkZWZzPjxsaW5lYXJHcmFkaWVudCBpZD0iQSIgeDI9IjUwJSIgeDE9IjUwJSIgeTI9IjEwMCUiIHkxPSIwJSI+PHN0b3Agc3RvcC1jb2xvcj0iIzExMWQyZSIgb2Zmc2V0PSIwJSIvPjxzdG9wIHN0b3AtY29sb3I9IiMwNTE4MzkiIG9mZnNldD0iMjEuMiUiLz48c3RvcCBzdG9wLWNvbG9yPSIjMGExYjQ4IiBvZmZzZXQ9IjQwLjclIi8+PHN0b3Agc3RvcC1jb2xvcj0iIzEzMmU2MiIgb2Zmc2V0PSI1OC4xJSIvPjxzdG9wIHN0b3AtY29sb3I9IiMxNDRiN2UiIG9mZnNldD0iNzMuOCUiLz48c3RvcCBzdG9wLWNvbG9yPSIjMTM2NDk3IiBvZmZzZXQ9Ijg3LjMlIi8+PHN0b3Agc3RvcC1jb2xvcj0iIzEzODdiOCIgb2Zmc2V0PSIxMDAlIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHN5bWJvbCBpZD0iQiI+PGc+PHBhdGggZD0iTTEuMzA1IDQxLjIwMkM1LjI1OSA1NC4zODYgMTcuNDg4IDY0IDMxLjk1OSA2NGMxNy42NzMgMCAzMi0xNC4zMjcgMzItMzJzLTE0LjMyNy0zMi0zMi0zMkMxNS4wMDEgMCAxLjEyNCAxMy4xOTMuMDI4IDI5Ljg3NGMyLjA3NCAzLjQ3NyAyLjg3OSA1LjYyOCAxLjI3NSAxMS4zMjh6IiBmaWxsPSJ1cmwoI0EpIi8+PHBhdGggZD0iTTMwLjMxIDIzLjk4NWwuMDAzLjE1OC03LjgzIDExLjM3NWMtMS4yNjgtLjA1OC0yLjU0LjE2NS0zLjc0OC42NjJhOC4xNCA4LjE0IDAgMCAwLTEuNDk4LjhMLjA0MiAyOS44OTNzLS4zOTggNi41NDYgMS4yNiAxMS40MjRsMTIuMTU2IDUuMDE2Yy42IDIuNzI4IDIuNDggNS4xMiA1LjI0MiA2LjI3YTguODggOC44OCAwIDAgMCAxMS42MDMtNC43ODIgOC44OSA4Ljg5IDAgMCAwIC42ODQtMy42NTZMNDIuMTggMzYuMTZsLjI3NS4wMDVjNi43MDUgMCAxMi4xNTUtNS40NjYgMTIuMTU1LTEyLjE4cy01LjQ0LTEyLjE2LTEyLjE1NS0xMi4xNzRjLTYuNzAyIDAtMTIuMTU1IDUuNDYtMTIuMTU1IDEyLjE3NHptLTEuODggMjMuMDVjLTEuNDU0IDMuNS01LjQ2NiA1LjE0Ny04Ljk1MyAzLjY5NGE2Ljg0IDYuODQgMCAwIDEtMy41MjQtMy4zNjJsMy45NTcgMS42NGE1LjA0IDUuMDQgMCAwIDAgNi41OTEtMi43MTkgNS4wNSA1LjA1IDAgMCAwLTIuNzE1LTYuNjAxbC00LjEtMS42OTVjMS41NzgtLjYgMy4zNzItLjYyIDUuMDUuMDc3IDEuNy43MDMgMyAyLjAyNyAzLjY5NiAzLjcycy42OTIgMy41Ni0uMDEgNS4yNDZNNDIuNDY2IDMyLjFhOC4xMiA4LjEyIDAgMCAxLTguMDk4LTguMTEzIDguMTIgOC4xMiAwIDAgMSA4LjA5OC04LjExMSA4LjEyIDguMTIgMCAwIDEgOC4xIDguMTExIDguMTIgOC4xMiAwIDAgMS04LjEgOC4xMTNtLTYuMDY4LTguMTI2YTYuMDkgNi4wOSAwIDAgMSA2LjA4LTYuMDk1YzMuMzU1IDAgNi4wODQgMi43MyA2LjA4NCA2LjA5NWE2LjA5IDYuMDkgMCAwIDEtNi4wODQgNi4wOTMgNi4wOSA2LjA5IDAgMCAxLTYuMDgxLTYuMDkzeiIvPjwvZz48L3N5bWJvbD48L3N2Zz4=";
 const githubIconUri =
   "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTA2IiBoZWlnaHQ9IjEwNiIgdmlld0JveD0iMCAwIDEwNiAxMDYiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxjaXJjbGUgY3g9IjUzIiBjeT0iNTMiIHI9IjUzIiBmaWxsPSJ3aGl0ZSIvPgo8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTUyLjg1NCA0QzI1LjgzOSA0IDQgMjYgNCA1My4yMTdDNCA3NC45NzMgMTcuOTkzIDkzLjM4OSAzNy40MDUgOTkuOTA3QzM5LjgzMiAxMDAuMzk3IDQwLjcyMSA5OC44NDggNDAuNzIxIDk3LjU0NUM0MC43MjEgOTYuNDA0IDQwLjY0MSA5Mi40OTMgNDAuNjQxIDg4LjQxOEMyNy4wNTEgOTEuMzUyIDI0LjIyMSA4Mi41NTEgMjQuMjIxIDgyLjU1MUMyMi4wMzcgNzYuODQ3IDE4LjgwMSA3NS4zODEgMTguODAxIDc1LjM4MUMxNC4zNTMgNzIuMzY2IDE5LjEyNSA3Mi4zNjYgMTkuMTI1IDcyLjM2NkMyNC4wNTkgNzIuNjkyIDI2LjY0OCA3Ny40MTggMjYuNjQ4IDc3LjQxOEMzMS4wMTUgODQuOTE0IDM4LjA1MiA4Mi43OTYgNDAuODgzIDgxLjQ5MkM0MS4yODcgNzguMzE0IDQyLjU4MiA3Ni4xMTQgNDMuOTU3IDc0Ljg5MkMzMy4xMTggNzMuNzUxIDIxLjcxNCA2OS41MTQgMjEuNzE0IDUwLjYwOUMyMS43MTQgNDUuMjMxIDIzLjY1NCA0MC44MzEgMjYuNzI4IDM3LjQwOUMyNi4yNDMgMzYuMTg3IDI0LjU0NCAzMS4xMzQgMjcuMjE0IDI0LjM3MUMyNy4yMTQgMjQuMzcxIDMxLjMzOSAyMy4wNjcgNDAuNjQgMjkuNDIzQzQ0LjYyMjEgMjguMzQ1NyA0OC43Mjg4IDI3Ljc5NzYgNTIuODU0IDI3Ljc5M0M1Ni45NzkgMjcuNzkzIDYxLjE4NCAyOC4zNjQgNjUuMDY3IDI5LjQyM0M3NC4zNjkgMjMuMDY3IDc4LjQ5NCAyNC4zNzEgNzguNDk0IDI0LjM3MUM4MS4xNjQgMzEuMTM0IDc5LjQ2NCAzNi4xODcgNzguOTc5IDM3LjQwOUM4Mi4xMzQgNDAuODMxIDgzLjk5NCA0NS4yMzEgODMuOTk0IDUwLjYwOUM4My45OTQgNjkuNTE0IDcyLjU5IDczLjY2OSA2MS42NyA3NC44OTJDNjMuNDUgNzYuNDQgNjQuOTg2IDc5LjM3MyA2NC45ODYgODQuMDE4QzY0Ljk4NiA5MC42MTggNjQuOTA2IDk1LjkxNSA2NC45MDYgOTcuNTQ0QzY0LjkwNiA5OC44NDggNjUuNzk2IDEwMC4zOTcgNjguMjIyIDk5LjkwOEM4Ny42MzQgOTMuMzg4IDEwMS42MjcgNzQuOTczIDEwMS42MjcgNTMuMjE3QzEwMS43MDcgMjYgNzkuNzg4IDQgNTIuODU0IDRaIiBmaWxsPSIjMjQyOTJGIi8+Cjwvc3ZnPgo=";
 const xIcon =
@@ -48,6 +50,7 @@ export const socialIcons = {
   telegram: telegramIconUri,
   twitch: twitchIconUri,
   github: githubIconUri,
+  steam: steamIconUri,
 };
 
 /**
@@ -90,6 +93,8 @@ export function getSocialIcon(provider: AuthOption | ({} & string)): string {
       return twitchIconUri;
     case "github":
       return githubIconUri;
+    case "steam":
+      return steamIconUri;
     case "guest":
       return guestIcon;
     default:

packages/thirdweb/src/react/native/ui/components/WalletImage.tsx

@@ -19,6 +19,7 @@ import {
   LINE_ICON,
   PASSKEY_ICON,
   PHONE_ICON,
+  STEAM_ICON,
   TELEGRAM_ICON,
   TWITCH_ICON,
   WALLET_ICON,
@@ -110,6 +111,8 @@ export function getAuthProviderImage(authProvider: string | null): string {
       return GITHUB_ICON;
     case "twitch":
       return TWITCH_ICON;
+    case "steam":
+      return STEAM_ICON;
     case "guest":
       return GUEST_ICON;
     default:

packages/thirdweb/src/react/native/ui/connect/InAppWalletUI.tsx

@@ -37,6 +37,7 @@ import {
   GITHUB_ICON,
   GOOGLE_ICON,
   LINE_ICON,
+  STEAM_ICON,
   TELEGRAM_ICON,
   TWITCH_ICON,
   X_ICON,
@@ -65,6 +66,7 @@ const socialIcons = {
   telegram: TELEGRAM_ICON,
   github: GITHUB_ICON,
   twitch: TWITCH_ICON,
+  steam: STEAM_ICON,
 };
 
 type InAppWalletFormUIProps = {

packages/thirdweb/src/react/native/ui/icons/svgs.ts

@@ -76,6 +76,8 @@ export const GITHUB_ICON = `<svg width="106" height="106" viewBox="0 0 106 106"
 <path fill-rule="evenodd" clip-rule="evenodd" d="M52.854 4C25.839 4 4 26 4 53.217C4 74.973 17.993 93.389 37.405 99.907C39.832 100.397 40.721 98.848 40.721 97.545C40.721 96.404 40.641 92.493 40.641 88.418C27.051 91.352 24.221 82.551 24.221 82.551C22.037 76.847 18.801 75.381 18.801 75.381C14.353 72.366 19.125 72.366 19.125 72.366C24.059 72.692 26.648 77.418 26.648 77.418C31.015 84.914 38.052 82.796 40.883 81.492C41.287 78.314 42.582 76.114 43.957 74.892C33.118 73.751 21.714 69.514 21.714 50.609C21.714 45.231 23.654 40.831 26.728 37.409C26.243 36.187 24.544 31.134 27.214 24.371C27.214 24.371 31.339 23.067 40.64 29.423C44.6221 28.3457 48.7288 27.7976 52.854 27.793C56.979 27.793 61.184 28.364 65.067 29.423C74.369 23.067 78.494 24.371 78.494 24.371C81.164 31.134 79.464 36.187 78.979 37.409C82.134 40.831 83.994 45.231 83.994 50.609C83.994 69.514 72.59 73.669 61.67 74.892C63.45 76.44 64.986 79.373 64.986 84.018C64.986 90.618 64.906 95.915 64.906 97.544C64.906 98.848 65.796 100.397 68.222 99.908C87.634 93.388 101.627 74.973 101.627 53.217C101.707 26 79.788 4 52.854 4Z" fill="#24292F"/>
 </svg>`;
 
+export const STEAM_ICON = `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 65 65" fill="#fff"><use xlink:href="#B" x=".5" y=".5"/><defs><linearGradient id="A" x2="50%" x1="50%" y2="100%" y1="0%"><stop stop-color="#111d2e" offset="0%"/><stop stop-color="#051839" offset="21.2%"/><stop stop-color="#0a1b48" offset="40.7%"/><stop stop-color="#132e62" offset="58.1%"/><stop stop-color="#144b7e" offset="73.8%"/><stop stop-color="#136497" offset="87.3%"/><stop stop-color="#1387b8" offset="100%"/></linearGradient></defs><symbol id="B"><g><path d="M1.305 41.202C5.259 54.386 17.488 64 31.959 64c17.673 0 32-14.327 32-32s-14.327-32-32-32C15.001 0 1.124 13.193.028 29.874c2.074 3.477 2.879 5.628 1.275 11.328z" fill="url(#A)"/><path d="M30.31 23.985l.003.158-7.83 11.375c-1.268-.058-2.54.165-3.748.662a8.14 8.14 0 0 0-1.498.8L.042 29.893s-.398 6.546 1.26 11.424l12.156 5.016c.6 2.728 2.48 5.12 5.242 6.27a8.88 8.88 0 0 0 11.603-4.782 8.89 8.89 0 0 0 .684-3.656L42.18 36.16l.275.005c6.705 0 12.155-5.466 12.155-12.18s-5.44-12.16-12.155-12.174c-6.702 0-12.155 5.46-12.155 12.174zm-1.88 23.05c-1.454 3.5-5.466 5.147-8.953 3.694a6.84 6.84 0 0 1-3.524-3.362l3.957 1.64a5.04 5.04 0 0 0 6.591-2.719 5.05 5.05 0 0 0-2.715-6.601l-4.1-1.695c1.578-.6 3.372-.62 5.05.077 1.7.703 3 2.027 3.696 3.72s.692 3.56-.01 5.246M42.466 32.1a8.12 8.12 0 0 1-8.098-8.113 8.12 8.12 0 0 1 8.098-8.111 8.12 8.12 0 0 1 8.1 8.111 8.12 8.12 0 0 1-8.1 8.113m-6.068-8.126a6.09 6.09 0 0 1 6.08-6.095c3.355 0 6.084 2.73 6.084 6.095a6.09 6.09 0 0 1-6.084 6.093 6.09 6.09 0 0 1-6.081-6.093z"/></g></symbol></svg>`;
+
 export const TWITCH_ICON = `<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 	 viewBox="0 0 2400 2800" style="enable-background:new 0 0 2400 2800;" xml:space="preserve">
 <style type="text/css">

packages/thirdweb/src/react/web/wallets/shared/ConnectWalletSocialOptions.tsx

@@ -117,6 +117,7 @@ export const ConnectWalletSocialOptions = (
     telegram: "Telegram",
     github: "GitHub",
     twitch: "Twitch",
+    steam: "Steam",
   };
 
   const { data: ecosystemAuthOptions, isLoading } = useQuery({

packages/thirdweb/src/react/web/wallets/shared/SocialLogin.tsx

@@ -125,7 +125,7 @@ export function SocialLogin(props: {
       ) {
         setAuthError(ewLocale.maxAccountsExceeded);
       }
-      console.error(`Error sign in with ${props.socialAuth}`, e);
+      console.error(`Error signing in with ${props.socialAuth}`, e);
     }
   };
 

packages/thirdweb/src/react/web/wallets/shared/oauthSignIn.ts

@@ -40,6 +40,7 @@ function getOauthLoginPath(
     case "telegram":
     case "github":
     case "twitch":
+    case "steam":
     case "line":
     case "x":
     case "guest":

packages/thirdweb/src/wallets/in-app/core/authentication/types.ts

@@ -101,6 +101,7 @@ export type AuthProvider =
   | "X"
   | "Line"
   | "Twitch"
+  | "Steam"
   | "GitHub"
   | "Farcaster"
   | "Telegram";

packages/thirdweb/src/wallets/in-app/web/lib/web-connector.ts

@@ -331,6 +331,7 @@ export class InAppWebConnector implements InAppConnector {
       case "farcaster":
       case "line":
       case "x":
+      case "steam":
       case "coinbase":
       case "discord": {
         return loginWithOauth({
@@ -398,6 +399,7 @@ export class InAppWebConnector implements InAppConnector {
       case "guest":
       case "coinbase":
       case "twitch":
+      case "steam":
       case "discord": {
         const authToken = await this.authenticate(args);
         return await this.auth.loginWithAuthToken(authToken);

packages/thirdweb/src/wallets/types.ts

@@ -31,6 +31,7 @@ export const socialAuthOptions = [
   "telegram",
   "github",
   "twitch",
+  "steam",
 ] as const;
 export type SocialAuthOption = (typeof socialAuthOptions)[number];
 export type OAuthOption = SocialAuthOption | "guest";