thirdweb 5.116.1 → 5.116.2-nightly-151127d66825365cb0ed949ae28b9906ee4dfc8d-20251213000343
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/react/web/ui/Bridge/swap-widget/swap-ui.js +20 -0
- package/dist/cjs/react/web/ui/Bridge/swap-widget/swap-ui.js.map +1 -1
- package/dist/cjs/react/web/ui/Bridge/swap-widget/use-bridge-chains.js +15 -2
- package/dist/cjs/react/web/ui/Bridge/swap-widget/use-bridge-chains.js.map +1 -1
- package/dist/cjs/react/web/ui/ConnectWallet/WalletEntryButton.js +16 -2
- package/dist/cjs/react/web/ui/ConnectWallet/WalletEntryButton.js.map +1 -1
- package/dist/cjs/react/web/ui/ConnectWallet/icons/EmailIcon.js +1 -4
- package/dist/cjs/react/web/ui/ConnectWallet/icons/EmailIcon.js.map +1 -1
- package/dist/cjs/react/web/ui/ConnectWallet/icons/WalletDotIcon.js +1 -1
- package/dist/cjs/react/web/ui/ConnectWallet/icons/WalletDotIcon.js.map +1 -1
- package/dist/cjs/react/web/ui/ConnectWallet/in-app-wallet-icon.js +101 -0
- package/dist/cjs/react/web/ui/ConnectWallet/in-app-wallet-icon.js.map +1 -0
- package/dist/cjs/react/web/ui/components/Spinner.js +7 -7
- package/dist/cjs/react/web/ui/components/Spinner.js.map +1 -1
- package/dist/cjs/react/web/ui/design-system/elements.js +1 -2
- package/dist/cjs/react/web/ui/design-system/elements.js.map +1 -1
- package/dist/cjs/react/web/wallets/shared/ConnectWalletSocialOptions.js +4 -4
- package/dist/cjs/react/web/wallets/shared/ConnectWalletSocialOptions.js.map +1 -1
- package/dist/cjs/react/web/wallets/shared/OTPLoginUI.js +13 -7
- package/dist/cjs/react/web/wallets/shared/OTPLoginUI.js.map +1 -1
- package/dist/cjs/stories/ConnectEmbed.stories.js +34 -0
- package/dist/cjs/stories/ConnectEmbed.stories.js.map +1 -1
- package/dist/cjs/stories/in-app-wallet-icon.stories.js +59 -0
- package/dist/cjs/stories/in-app-wallet-icon.stories.js.map +1 -0
- package/dist/cjs/version.js +1 -1
- package/dist/cjs/version.js.map +1 -1
- package/dist/cjs/wallets/in-app/web/lib/auth/otp.js +12 -1
- package/dist/cjs/wallets/in-app/web/lib/auth/otp.js.map +1 -1
- package/dist/esm/react/web/ui/Bridge/swap-widget/swap-ui.js +20 -0
- package/dist/esm/react/web/ui/Bridge/swap-widget/swap-ui.js.map +1 -1
- package/dist/esm/react/web/ui/Bridge/swap-widget/use-bridge-chains.js +15 -2
- package/dist/esm/react/web/ui/Bridge/swap-widget/use-bridge-chains.js.map +1 -1
- package/dist/esm/react/web/ui/ConnectWallet/WalletEntryButton.js +16 -2
- package/dist/esm/react/web/ui/ConnectWallet/WalletEntryButton.js.map +1 -1
- package/dist/esm/react/web/ui/ConnectWallet/icons/EmailIcon.js +1 -4
- package/dist/esm/react/web/ui/ConnectWallet/icons/EmailIcon.js.map +1 -1
- package/dist/esm/react/web/ui/ConnectWallet/icons/WalletDotIcon.js +1 -1
- package/dist/esm/react/web/ui/ConnectWallet/icons/WalletDotIcon.js.map +1 -1
- package/dist/esm/react/web/ui/ConnectWallet/in-app-wallet-icon.js +98 -0
- package/dist/esm/react/web/ui/ConnectWallet/in-app-wallet-icon.js.map +1 -0
- package/dist/esm/react/web/ui/components/Spinner.js +9 -9
- package/dist/esm/react/web/ui/components/Spinner.js.map +1 -1
- package/dist/esm/react/web/ui/design-system/elements.js +0 -1
- package/dist/esm/react/web/ui/design-system/elements.js.map +1 -1
- package/dist/esm/react/web/wallets/shared/ConnectWalletSocialOptions.js +1 -1
- package/dist/esm/react/web/wallets/shared/ConnectWalletSocialOptions.js.map +1 -1
- package/dist/esm/react/web/wallets/shared/OTPLoginUI.js +13 -7
- package/dist/esm/react/web/wallets/shared/OTPLoginUI.js.map +1 -1
- package/dist/esm/stories/ConnectEmbed.stories.js +31 -0
- package/dist/esm/stories/ConnectEmbed.stories.js.map +1 -1
- package/dist/esm/stories/in-app-wallet-icon.stories.js +55 -0
- package/dist/esm/stories/in-app-wallet-icon.stories.js.map +1 -0
- package/dist/esm/version.js +1 -1
- package/dist/esm/version.js.map +1 -1
- package/dist/esm/wallets/in-app/web/lib/auth/otp.js +12 -1
- package/dist/esm/wallets/in-app/web/lib/auth/otp.js.map +1 -1
- package/dist/scripts/bridge-widget.js +113 -112
- package/dist/types/react/web/ui/Bridge/swap-widget/swap-ui.d.ts.map +1 -1
- package/dist/types/react/web/ui/Bridge/swap-widget/use-bridge-chains.d.ts +1 -2
- package/dist/types/react/web/ui/Bridge/swap-widget/use-bridge-chains.d.ts.map +1 -1
- package/dist/types/react/web/ui/ConnectWallet/WalletEntryButton.d.ts.map +1 -1
- package/dist/types/react/web/ui/ConnectWallet/icons/EmailIcon.d.ts +0 -3
- package/dist/types/react/web/ui/ConnectWallet/icons/EmailIcon.d.ts.map +1 -1
- package/dist/types/react/web/ui/ConnectWallet/icons/WalletDotIcon.d.ts.map +1 -1
- package/dist/types/react/web/ui/ConnectWallet/in-app-wallet-icon.d.ts +7 -0
- package/dist/types/react/web/ui/ConnectWallet/in-app-wallet-icon.d.ts.map +1 -0
- package/dist/types/react/web/ui/components/Spinner.d.ts.map +1 -1
- package/dist/types/react/web/ui/design-system/elements.d.ts +0 -4
- package/dist/types/react/web/ui/design-system/elements.d.ts.map +1 -1
- package/dist/types/react/web/wallets/shared/ConnectWalletSocialOptions.d.ts +2 -1
- package/dist/types/react/web/wallets/shared/ConnectWalletSocialOptions.d.ts.map +1 -1
- package/dist/types/react/web/wallets/shared/OTPLoginUI.d.ts.map +1 -1
- package/dist/types/stories/ConnectEmbed.stories.d.ts +3 -0
- package/dist/types/stories/ConnectEmbed.stories.d.ts.map +1 -1
- package/dist/types/stories/in-app-wallet-icon.stories.d.ts +10 -0
- package/dist/types/stories/in-app-wallet-icon.stories.d.ts.map +1 -0
- package/dist/types/version.d.ts +1 -1
- package/dist/types/version.d.ts.map +1 -1
- package/dist/types/wallets/in-app/web/lib/auth/otp.d.ts.map +1 -1
- package/package.json +1 -1
- package/src/react/web/ui/Bridge/swap-widget/swap-ui.tsx +26 -0
- package/src/react/web/ui/Bridge/swap-widget/use-bridge-chains.ts +19 -2
- package/src/react/web/ui/ConnectWallet/WalletEntryButton.tsx +23 -2
- package/src/react/web/ui/ConnectWallet/icons/EmailIcon.tsx +12 -19
- package/src/react/web/ui/ConnectWallet/icons/WalletDotIcon.tsx +1 -0
- package/src/react/web/ui/ConnectWallet/in-app-wallet-icon.tsx +195 -0
- package/src/react/web/ui/components/Spinner.tsx +9 -9
- package/src/react/web/ui/design-system/elements.ts +0 -1
- package/src/react/web/wallets/shared/ConnectWalletSocialOptions.tsx +1 -1
- package/src/react/web/wallets/shared/OTPLoginUI.tsx +24 -11
- package/src/stories/ConnectEmbed.stories.tsx +55 -0
- package/src/stories/in-app-wallet-icon.stories.tsx +163 -0
- package/src/version.ts +1 -1
- package/src/wallets/in-app/web/lib/auth/otp.ts +11 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"swap-ui.d.ts","sourceRoot":"","sources":["../../../../../../../src/react/web/ui/Bridge/swap-widget/swap-ui.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,sCAAsC,CAAC;AAC5E,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iCAAiC,CAAC;
|
|
1
|
+
{"version":3,"file":"swap-ui.d.ts","sourceRoot":"","sources":["../../../../../../../src/react/web/ui/Bridge/swap-widget/swap-ui.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,sCAAsC,CAAC;AAC5E,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iCAAiC,CAAC;AAGtE,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,oCAAoC,CAAC;AAIhF,OAAO,EAKL,KAAK,KAAK,EACX,MAAM,yCAAyC,CAAC;AACjD,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,4CAA4C,CAAC;AAuBvF,OAAO,KAAK,EACV,gBAAgB,EAChB,iBAAiB,EACjB,wBAAwB,EACxB,cAAc,EACf,MAAM,YAAY,CAAC;AAGpB,KAAK,WAAW,GAAG;IACjB,gBAAgB,EAAE,gBAAgB,GAAG,SAAS,CAAC;IAC/C,MAAM,EAAE,cAAc,CAAC;IACvB,KAAK,EAAE,KAAK,GAAG,OAAO,GAAG,MAAM,CAAC;IAChC,cAAc,EAAE,wBAAwB,GAAG,SAAS,CAAC;IACrD,QAAQ,EAAE,qBAAqB,CAAC;IAChC,oBAAoB,EAAE,OAAO,CAAC;IAC9B,MAAM,EAAE,CAAC,IAAI,EAAE;QACb,MAAM,EAAE,iBAAiB,CAAC;QAC1B,OAAO,EAAE,oBAAoB,CAAC;QAC9B,QAAQ,EAAE,eAAe,CAAC;QAC1B,gBAAgB,EAAE,MAAM,CAAC;QACzB,SAAS,EAAE,eAAe,CAAC;QAC3B,IAAI,EAAE,KAAK,GAAG,MAAM,CAAC;KACtB,KAAK,IAAI,CAAC;IACX,QAAQ,EAAE,cAAc,GAAG,SAAS,CAAC;IACrC,SAAS,EAAE,cAAc,GAAG,SAAS,CAAC;IACtC,WAAW,EAAE,CAAC,KAAK,EAAE,cAAc,GAAG,SAAS,KAAK,IAAI,CAAC;IACzD,YAAY,EAAE,CAAC,KAAK,EAAE,cAAc,GAAG,SAAS,KAAK,IAAI,CAAC;IAC1D,eAAe,EAAE;QACf,IAAI,EAAE,KAAK,GAAG,MAAM,CAAC;QACrB,MAAM,EAAE,MAAM,CAAC;KAChB,CAAC;IACF,kBAAkB,EAAE,CAAC,eAAe,EAAE;QACpC,IAAI,EAAE,KAAK,GAAG,MAAM,CAAC;QACrB,MAAM,EAAE,MAAM,CAAC;KAChB,KAAK,IAAI,CAAC;IACX,YAAY,EAAE,CAAC,MAAM,IAAI,CAAC,GAAG,SAAS,CAAC;CACxC,CAAC;AAyBF;;GAEG;AACH,wBAAgB,MAAM,CAAC,KAAK,EAAE,WAAW,2CA8YxC"}
|
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
import { chains } from "../../../../../bridge/index.js";
|
|
2
1
|
import type { ThirdwebClient } from "../../../../../client/client.js";
|
|
3
|
-
export declare function useBridgeChains(client: ThirdwebClient): import("@tanstack/react-query").UseQueryResult<
|
|
2
|
+
export declare function useBridgeChains(client: ThirdwebClient): import("@tanstack/react-query").UseQueryResult<import("../../../../../bridge/index.js").Chain[], Error>;
|
|
4
3
|
//# sourceMappingURL=use-bridge-chains.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-bridge-chains.d.ts","sourceRoot":"","sources":["../../../../../../../src/react/web/ui/Bridge/swap-widget/use-bridge-chains.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"use-bridge-chains.d.ts","sourceRoot":"","sources":["../../../../../../../src/react/web/ui/Bridge/swap-widget/use-bridge-chains.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iCAAiC,CAAC;AAEtE,wBAAgB,eAAe,CAAC,MAAM,EAAE,cAAc,2GA0BrD"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"WalletEntryButton.d.ts","sourceRoot":"","sources":["../../../../../../src/react/web/ui/ConnectWallet/WalletEntryButton.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAGnE,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,0CAA0C,CAAC;
|
|
1
|
+
{"version":3,"file":"WalletEntryButton.d.ts","sourceRoot":"","sources":["../../../../../../src/react/web/ui/ConnectWallet/WalletEntryButton.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAGnE,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,0CAA0C,CAAC;AAgBvE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAEvD;;GAEG;AACH,wBAAgB,iBAAiB,CAAC,KAAK,EAAE;IACvC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,EAAE,MAAM,CAAC;IACf,YAAY,EAAE,MAAM,IAAI,CAAC;IACzB,aAAa,EAAE,aAAa,CAAC;IAC7B,kBAAkB,EAAE,MAAM,EAAE,GAAG,SAAS,CAAC;IACzC,MAAM,EAAE,cAAc,CAAC;IACvB,QAAQ,EAAE,OAAO,CAAC;IAClB,KAAK,EAAE,MAAM,GAAG,SAAS,CAAC;CAC3B,2CA6EA;AAED,eAAO,MAAM,cAAc;;;qHAwBzB,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"EmailIcon.d.ts","sourceRoot":"","sources":["../../../../../../../src/react/web/ui/ConnectWallet/icons/EmailIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,YAAY,CAAC;AAEzC
|
|
1
|
+
{"version":3,"file":"EmailIcon.d.ts","sourceRoot":"","sources":["../../../../../../../src/react/web/ui/ConnectWallet/icons/EmailIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,YAAY,CAAC;AAEzC,eAAO,MAAM,SAAS,EAAE,MAoBvB,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"WalletDotIcon.d.ts","sourceRoot":"","sources":["../../../../../../../src/react/web/ui/ConnectWallet/icons/WalletDotIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,YAAY,CAAC;AAEzC;;GAEG;AACH,eAAO,MAAM,aAAa,EAAE,
|
|
1
|
+
{"version":3,"file":"WalletDotIcon.d.ts","sourceRoot":"","sources":["../../../../../../../src/react/web/ui/ConnectWallet/icons/WalletDotIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,YAAY,CAAC;AAEzC;;GAEG;AACH,eAAO,MAAM,aAAa,EAAE,MAiB3B,CAAC"}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import type { ThirdwebClient } from "../../../../client/client.js";
|
|
2
|
+
import type { Wallet } from "../../../../wallets/interfaces/wallet.js";
|
|
3
|
+
export declare function InAppWalletIcon(props: {
|
|
4
|
+
client: ThirdwebClient;
|
|
5
|
+
wallet: Wallet<"inApp">;
|
|
6
|
+
}): import("react/jsx-runtime").JSX.Element | null;
|
|
7
|
+
//# sourceMappingURL=in-app-wallet-icon.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"in-app-wallet-icon.d.ts","sourceRoot":"","sources":["../../../../../../src/react/web/ui/ConnectWallet/in-app-wallet-icon.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,8BAA8B,CAAC;AACnE,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,0CAA0C,CAAC;AAgBvE,wBAAgB,eAAe,CAAC,KAAK,EAAE;IACrC,MAAM,EAAE,cAAc,CAAC;IACvB,MAAM,EAAE,MAAM,CAAC,OAAO,CAAC,CAAC;CACzB,kDAsIA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Spinner.d.ts","sourceRoot":"","sources":["../../../../../../src/react/web/ui/components/Spinner.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,sCAAsC,CAAC;AAClE,OAAO,EAAE,QAAQ,EAAE,MAAM,sCAAsC,CAAC;AAGhE;;GAEG;AACH,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC;IAC7B,IAAI,EAAE,MAAM,OAAO,QAAQ,CAAC;IAC5B,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,KAAK,CAAC,EAAE,MAAM,KAAK,CAAC,QAAQ,CAAC,CAAC;CAC/B,
|
|
1
|
+
{"version":3,"file":"Spinner.d.ts","sourceRoot":"","sources":["../../../../../../src/react/web/ui/components/Spinner.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,sCAAsC,CAAC;AAClE,OAAO,EAAE,QAAQ,EAAE,MAAM,sCAAsC,CAAC;AAGhE;;GAEG;AACH,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC;IAC7B,IAAI,EAAE,MAAM,OAAO,QAAQ,CAAC;IAC5B,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,KAAK,CAAC,EAAE,MAAM,KAAK,CAAC,QAAQ,CAAC,CAAC;CAC/B,CA2BA,CAAC"}
|
|
@@ -6,10 +6,6 @@ export declare const StyledSvg: import("@emotion/styled").CreateStyledComponent<
|
|
|
6
6
|
theme?: import("@emotion/react").Theme;
|
|
7
7
|
as?: React.ElementType;
|
|
8
8
|
}, import("react").SVGProps<SVGSVGElement>, {}>;
|
|
9
|
-
export declare const StyledCircle: import("@emotion/styled").CreateStyledComponent<{
|
|
10
|
-
theme?: import("@emotion/react").Theme;
|
|
11
|
-
as?: React.ElementType;
|
|
12
|
-
}, import("react").SVGProps<SVGCircleElement>, {}>;
|
|
13
9
|
export declare const StyledSpan: import("@emotion/styled").CreateStyledComponent<{
|
|
14
10
|
theme?: import("@emotion/react").Theme;
|
|
15
11
|
as?: React.ElementType;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"elements.d.ts","sourceRoot":"","sources":["../../../../../../src/react/web/ui/design-system/elements.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,SAAS;;;yGAA6B,CAAC;AACpD,eAAO,MAAM,SAAS;;;+CAA6B,CAAC;AACpD,eAAO,MAAM,
|
|
1
|
+
{"version":3,"file":"elements.d.ts","sourceRoot":"","sources":["../../../../../../src/react/web/ui/design-system/elements.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,SAAS;;;yGAA6B,CAAC;AACpD,eAAO,MAAM,SAAS;;;+CAA6B,CAAC;AACpD,eAAO,MAAM,UAAU;;;2GAA8B,CAAC;AACtD,eAAO,MAAM,YAAY;;;qHAA2B,CAAC;AACrD,eAAO,MAAM,YAAY;;;qHAAgC,CAAC;AAC1D,eAAO,MAAM,WAAW;;;kHAA+B,CAAC;AACxD,eAAO,MAAM,WAAW;;;kHAA+B,CAAC;AACxD,eAAO,MAAM,QAAQ;;;iHAA4B,CAAC;AAClD,eAAO,MAAM,OAAO;;;qHAA2B,CAAC;AAChD,eAAO,MAAM,QAAQ;;;6GAA4B,CAAC;AAClD,eAAO,MAAM,YAAY;;;qHAAgC,CAAC;AAC1D,eAAO,MAAM,YAAY;;;qHAAgC,CAAC"}
|
|
@@ -2,7 +2,7 @@ import type { Chain } from "../../../../chains/types.js";
|
|
|
2
2
|
import type { ThirdwebClient } from "../../../../client/client.js";
|
|
3
3
|
import type { Profile } from "../../../../wallets/in-app/core/authentication/types.js";
|
|
4
4
|
import type { Account, Wallet } from "../../../../wallets/interfaces/wallet.js";
|
|
5
|
-
import { type SocialAuthOption } from "../../../../wallets/types.js";
|
|
5
|
+
import { type AuthOption, type SocialAuthOption } from "../../../../wallets/types.js";
|
|
6
6
|
import type { EcosystemWalletId } from "../../../../wallets/wallet-types.js";
|
|
7
7
|
import type { InAppWalletLocale } from "./locale/types.js";
|
|
8
8
|
export type ConnectWalletSelectUIState = undefined | {
|
|
@@ -20,6 +20,7 @@ export type ConnectWalletSelectUIState = undefined | {
|
|
|
20
20
|
linking: boolean;
|
|
21
21
|
};
|
|
22
22
|
};
|
|
23
|
+
export declare const defaultAuthOptions: AuthOption[];
|
|
23
24
|
type ConnectWalletSocialOptionsProps = {
|
|
24
25
|
select: () => void;
|
|
25
26
|
done: () => void;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ConnectWalletSocialOptions.d.ts","sourceRoot":"","sources":["../../../../../../src/react/web/wallets/shared/ConnectWalletSocialOptions.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,6BAA6B,CAAC;AACzD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAInE,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,yDAAyD,CAAC;AAGvF,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,0CAA0C,CAAC;AAChF,OAAO,
|
|
1
|
+
{"version":3,"file":"ConnectWalletSocialOptions.d.ts","sourceRoot":"","sources":["../../../../../../src/react/web/wallets/shared/ConnectWalletSocialOptions.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,6BAA6B,CAAC;AACzD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAInE,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,yDAAyD,CAAC;AAGvF,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,0CAA0C,CAAC;AAChF,OAAO,EACL,KAAK,UAAU,EACf,KAAK,gBAAgB,EAEtB,MAAM,8BAA8B,CAAC;AACtC,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,qCAAqC,CAAC;AAwB7E,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAG3D,MAAM,MAAM,0BAA0B,GAClC,SAAS,GACT;IACE,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE;QACZ,IAAI,EAAE,gBAAgB,CAAC;QACvB,iBAAiB,EAAE,OAAO,CAAC,OAAO,GAAG,OAAO,EAAE,CAAC,CAAC;KACjD,CAAC;IACF,UAAU,CAAC,EAAE;QACX,iBAAiB,EAAE,OAAO,CAAC,OAAO,GAAG,OAAO,EAAE,CAAC,CAAC;KACjD,CAAC;IACF,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,WAAW,CAAC,EAAE;QACZ,OAAO,EAAE,OAAO,CAAC;KAClB,CAAC;CACH,CAAC;AAEN,eAAO,MAAM,kBAAkB,EAAE,UAAU,EAO1C,CAAC;AAEF,KAAK,+BAA+B,GAAG;IACrC,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,IAAI,EAAE,MAAM,IAAI,CAAC;IACjB,MAAM,EAAE,iBAAiB,CAAC;IAC1B,MAAM,EAAE,MAAM,CAAC,iBAAiB,CAAC,GAAG,MAAM,CAAC,OAAO,CAAC,CAAC;IACpD,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,KAAK,EAAE,KAAK,GAAG,SAAS,CAAC;IACzB,MAAM,EAAE,cAAc,CAAC;IACvB,IAAI,EAAE,SAAS,GAAG,MAAM,CAAC;IACzB,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,0BAA0B,GACrC,OAAO,+BAA+B,4CAubvC,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"OTPLoginUI.d.ts","sourceRoot":"","sources":["../../../../../../src/react/web/wallets/shared/OTPLoginUI.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,6BAA6B,CAAC;AACzD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAOnE,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,0CAA0C,CAAC;AAYvE,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;
|
|
1
|
+
{"version":3,"file":"OTPLoginUI.d.ts","sourceRoot":"","sources":["../../../../../../src/react/web/wallets/shared/OTPLoginUI.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,6BAA6B,CAAC;AACzD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAOnE,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,0CAA0C,CAAC;AAYvE,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAe3D;;GAEG;AACH,wBAAgB,UAAU,CAAC,KAAK,EAAE;IAChC,QAAQ,EAAE;QAAE,KAAK,EAAE,MAAM,CAAA;KAAE,GAAG;QAAE,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC;IAChD,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,iBAAiB,CAAC;IAC1B,IAAI,EAAE,MAAM,IAAI,CAAC;IACjB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,MAAM,EAAE,cAAc,CAAC;IACvB,KAAK,EAAE,KAAK,GAAG,SAAS,CAAC;IACzB,IAAI,EAAE,SAAS,GAAG,MAAM,CAAC;IACzB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,kDA2UA"}
|
|
@@ -8,5 +8,8 @@ export declare function WideModal(): import("react/jsx-runtime").JSX.Element;
|
|
|
8
8
|
export declare function ClassNameAndStylesAdded(): import("react/jsx-runtime").JSX.Element;
|
|
9
9
|
export declare function WideModalAndClassNameAndStylesAdded(): import("react/jsx-runtime").JSX.Element;
|
|
10
10
|
export declare function AllInAppWalletAuthMethods(): import("react/jsx-runtime").JSX.Element;
|
|
11
|
+
export declare function ConfiguredInAppWalletWideModal(): import("react/jsx-runtime").JSX.Element;
|
|
12
|
+
export declare function GoogleLoginWideModal(): import("react/jsx-runtime").JSX.Element;
|
|
13
|
+
export declare function GithubLoginWideModal(): import("react/jsx-runtime").JSX.Element;
|
|
11
14
|
export declare function EcosystemWallet(): import("react/jsx-runtime").JSX.Element;
|
|
12
15
|
//# sourceMappingURL=ConnectEmbed.stories.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ConnectEmbed.stories.d.ts","sourceRoot":"","sources":["../../../src/stories/ConnectEmbed.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAE7C,OAAO,EAAE,YAAY,EAAE,MAAM,qDAAqD,CAAC;
|
|
1
|
+
{"version":3,"file":"ConnectEmbed.stories.d.ts","sourceRoot":"","sources":["../../../src/stories/ConnectEmbed.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAE7C,OAAO,EAAE,YAAY,EAAE,MAAM,qDAAqD,CAAC;AAMnF,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,YAAY,CAoBnC,CAAC;AACF,eAAe,IAAI,CAAC;AAEpB,wBAAgB,UAAU,4CAEzB;AAED,wBAAgB,MAAM,4CAUrB;AAED,wBAAgB,SAAS,4CAExB;AAED,wBAAgB,uBAAuB,4CAUtC;AAED,wBAAgB,mCAAmC,4CAWlD;AAED,wBAAgB,yBAAyB,4CAmCxC;AAED,wBAAgB,8BAA8B,4CAgB7C;AAED,wBAAgB,oBAAoB,4CAgBnC;AAED,wBAAgB,oBAAoB,4CAgBnC;AAED,wBAAgB,eAAe,4CAa9B"}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import type { Meta } from "@storybook/react";
|
|
2
|
+
import type { AuthOption } from "../wallets/types.js";
|
|
3
|
+
declare const meta: Meta<typeof Variant>;
|
|
4
|
+
export default meta;
|
|
5
|
+
export declare function LightTheme(): import("react/jsx-runtime").JSX.Element;
|
|
6
|
+
export declare function DarkTheme(): import("react/jsx-runtime").JSX.Element;
|
|
7
|
+
declare function Variant(props: {
|
|
8
|
+
authOptions: AuthOption[];
|
|
9
|
+
}): import("react/jsx-runtime").JSX.Element;
|
|
10
|
+
//# sourceMappingURL=in-app-wallet-icon.stories.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"in-app-wallet-icon.stories.d.ts","sourceRoot":"","sources":["../../../src/stories/in-app-wallet-icon.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAQ7C,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAGtD,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,OAAO,CAW9B,CAAC;AACF,eAAe,IAAI,CAAC;AAuGpB,wBAAgB,UAAU,4CAEzB;AAED,wBAAgB,SAAS,4CAExB;AAUD,iBAAS,OAAO,CAAC,KAAK,EAAE;IAAE,WAAW,EAAE,UAAU,EAAE,CAAA;CAAE,2CAWpD"}
|
package/dist/types/version.d.ts
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export declare const version = "5.116.
|
|
1
|
+
export declare const version = "5.116.2-nightly-151127d66825365cb0ed949ae28b9906ee4dfc8d-20251213000343";
|
|
2
2
|
//# sourceMappingURL=version.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"version.d.ts","sourceRoot":"","sources":["../../src/version.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,OAAO,
|
|
1
|
+
{"version":3,"file":"version.d.ts","sourceRoot":"","sources":["../../src/version.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,OAAO,4EAA4E,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"otp.d.ts","sourceRoot":"","sources":["../../../../../../../src/wallets/in-app/web/lib/auth/otp.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iCAAiC,CAAC;AAMtE,OAAO,KAAK,EACV,mCAAmC,EACnC,qBAAqB,EACrB,eAAe,EAChB,MAAM,uCAAuC,CAAC;AAC/C,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,+BAA+B,CAAC;AAE/D;;GAEG;AACH,eAAO,MAAM,OAAO,GAAU,MAAM,eAAe,KAAG,OAAO,CAAC,IAAI,
|
|
1
|
+
{"version":3,"file":"otp.d.ts","sourceRoot":"","sources":["../../../../../../../src/wallets/in-app/web/lib/auth/otp.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iCAAiC,CAAC;AAMtE,OAAO,KAAK,EACV,mCAAmC,EACnC,qBAAqB,EACrB,eAAe,EAChB,MAAM,uCAAuC,CAAC;AAC/C,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,+BAA+B,CAAC;AAE/D;;GAEG;AACH,eAAO,MAAM,OAAO,GAAU,MAAM,eAAe,KAAG,OAAO,CAAC,IAAI,CAmDjE,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,SAAS,GACpB,MAAM,qBAAqB,GAAG;IAC5B,MAAM,EAAE,cAAc,CAAC;IACvB,SAAS,CAAC,EAAE,SAAS,CAAC;CACvB,KACA,OAAO,CAAC,mCAAmC,CA+C7C,CAAC"}
|
package/package.json
CHANGED
|
@@ -399,7 +399,7 @@
|
|
|
399
399
|
}
|
|
400
400
|
},
|
|
401
401
|
"typings": "./dist/types/exports/thirdweb.d.ts",
|
|
402
|
-
"version": "5.116.
|
|
402
|
+
"version": "5.116.2-nightly-151127d66825365cb0ed949ae28b9906ee4dfc8d-20251213000343",
|
|
403
403
|
"scripts": {
|
|
404
404
|
"bench": "vitest -c ./test/vitest.config.ts bench",
|
|
405
405
|
"bench:compare": "bun run ./benchmarks/run.ts",
|
|
@@ -6,8 +6,10 @@ import { Buy, Sell } from "../../../../../bridge/index.js";
|
|
|
6
6
|
import type { prepare as SellPrepare } from "../../../../../bridge/Sell.js";
|
|
7
7
|
import type { TokenWithPrices } from "../../../../../bridge/types/Token.js";
|
|
8
8
|
import type { ThirdwebClient } from "../../../../../client/client.js";
|
|
9
|
+
import { NATIVE_TOKEN_ADDRESS } from "../../../../../constants/addresses.js";
|
|
9
10
|
import { getToken } from "../../../../../pay/convert/get-token.js";
|
|
10
11
|
import type { SupportedFiatCurrency } from "../../../../../pay/convert/type.js";
|
|
12
|
+
import { getAddress } from "../../../../../utils/address.js";
|
|
11
13
|
import { toTokens, toUnits } from "../../../../../utils/units.js";
|
|
12
14
|
import { useCustomTheme } from "../../../../core/design-system/CustomThemeProvider.js";
|
|
13
15
|
import {
|
|
@@ -245,6 +247,18 @@ export function SwapUI(props: SwapUIProps) {
|
|
|
245
247
|
) {
|
|
246
248
|
props.setSellToken(undefined);
|
|
247
249
|
}
|
|
250
|
+
|
|
251
|
+
// if sell token is not selected, set it as native token of the buy token's chain if buy token is not a native token itself
|
|
252
|
+
if (
|
|
253
|
+
!props.sellToken &&
|
|
254
|
+
token.tokenAddress.toLowerCase() !==
|
|
255
|
+
NATIVE_TOKEN_ADDRESS.toLowerCase()
|
|
256
|
+
) {
|
|
257
|
+
props.setSellToken({
|
|
258
|
+
tokenAddress: getAddress(NATIVE_TOKEN_ADDRESS),
|
|
259
|
+
chainId: token.chainId,
|
|
260
|
+
});
|
|
261
|
+
}
|
|
248
262
|
}}
|
|
249
263
|
/>
|
|
250
264
|
)}
|
|
@@ -270,6 +284,18 @@ export function SwapUI(props: SwapUIProps) {
|
|
|
270
284
|
) {
|
|
271
285
|
props.setBuyToken(undefined);
|
|
272
286
|
}
|
|
287
|
+
|
|
288
|
+
// if buy token is not selected, set it as native token of the sell token's chain if sell token is not a native token itself
|
|
289
|
+
if (
|
|
290
|
+
!props.buyToken &&
|
|
291
|
+
token.tokenAddress.toLowerCase() !==
|
|
292
|
+
NATIVE_TOKEN_ADDRESS.toLowerCase()
|
|
293
|
+
) {
|
|
294
|
+
props.setBuyToken({
|
|
295
|
+
tokenAddress: getAddress(NATIVE_TOKEN_ADDRESS),
|
|
296
|
+
chainId: token.chainId,
|
|
297
|
+
});
|
|
298
|
+
}
|
|
273
299
|
}}
|
|
274
300
|
activeWalletInfo={props.activeWalletInfo}
|
|
275
301
|
/>
|
|
@@ -5,8 +5,25 @@ import type { ThirdwebClient } from "../../../../../client/client.js";
|
|
|
5
5
|
export function useBridgeChains(client: ThirdwebClient) {
|
|
6
6
|
return useQuery({
|
|
7
7
|
queryKey: ["bridge-chains"],
|
|
8
|
-
queryFn: () => {
|
|
9
|
-
|
|
8
|
+
queryFn: async () => {
|
|
9
|
+
const data = await chains({ client });
|
|
10
|
+
const dataCopy = [...data];
|
|
11
|
+
// sort by name, but if name starts with number, put it at the end
|
|
12
|
+
|
|
13
|
+
return dataCopy.sort((a, b) => {
|
|
14
|
+
const aStartsWithNumber = a.name[0]?.match(/^\d/);
|
|
15
|
+
const bStartsWithNumber = b.name[0]?.match(/^\d/);
|
|
16
|
+
|
|
17
|
+
if (aStartsWithNumber && !bStartsWithNumber) {
|
|
18
|
+
return 1;
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
if (!aStartsWithNumber && bStartsWithNumber) {
|
|
22
|
+
return -1;
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
return a.name.localeCompare(b.name);
|
|
26
|
+
});
|
|
10
27
|
},
|
|
11
28
|
refetchOnMount: false,
|
|
12
29
|
refetchOnWindowFocus: false,
|
|
@@ -17,6 +17,7 @@ import { Skeleton } from "../components/Skeleton.js";
|
|
|
17
17
|
import { Text } from "../components/text.js";
|
|
18
18
|
import { WalletImage } from "../components/WalletImage.js";
|
|
19
19
|
import { StyledButton } from "../design-system/elements.js";
|
|
20
|
+
import { InAppWalletIcon } from "./in-app-wallet-icon.js";
|
|
20
21
|
import type { ConnectLocale } from "./locale/types.js";
|
|
21
22
|
|
|
22
23
|
/**
|
|
@@ -52,9 +53,20 @@ export function WalletEntryButton(props: {
|
|
|
52
53
|
wallet && walletId === "inApp"
|
|
53
54
|
? (wallet.getConfig() as InAppWalletCreationOptions)?.metadata
|
|
54
55
|
: undefined;
|
|
55
|
-
|
|
56
|
+
let nameOverride = customMeta?.name || walletName;
|
|
56
57
|
const iconOverride = customMeta?.icon;
|
|
57
58
|
|
|
59
|
+
// change "Social Login" to name of the login method if only 1 method is enabled
|
|
60
|
+
if (wallet.id === "inApp") {
|
|
61
|
+
const config = wallet.getConfig() as InAppWalletCreationOptions;
|
|
62
|
+
if (config?.auth?.options.length === 1) {
|
|
63
|
+
const name = config.auth?.options[0];
|
|
64
|
+
if (name) {
|
|
65
|
+
nameOverride = uppercaseFirstLetter({ text: name });
|
|
66
|
+
}
|
|
67
|
+
}
|
|
68
|
+
}
|
|
69
|
+
|
|
58
70
|
return (
|
|
59
71
|
<WalletButtonEl
|
|
60
72
|
className={props.className}
|
|
@@ -64,12 +76,17 @@ export function WalletEntryButton(props: {
|
|
|
64
76
|
>
|
|
65
77
|
{iconOverride ? (
|
|
66
78
|
<Img
|
|
67
|
-
alt=
|
|
79
|
+
alt=""
|
|
68
80
|
client={props.client}
|
|
69
81
|
height={`${iconSize.xl}`}
|
|
70
82
|
src={iconOverride}
|
|
71
83
|
width={`${iconSize.xl}`}
|
|
72
84
|
/>
|
|
85
|
+
) : wallet.id === "inApp" ? (
|
|
86
|
+
<InAppWalletIcon
|
|
87
|
+
client={props.client}
|
|
88
|
+
wallet={wallet as Wallet<"inApp">}
|
|
89
|
+
/>
|
|
73
90
|
) : (
|
|
74
91
|
<WalletImage client={props.client} id={walletId} size={iconSize.xl} />
|
|
75
92
|
)}
|
|
@@ -119,3 +136,7 @@ export const WalletButtonEl = /* @__PURE__ */ StyledButton((_) => {
|
|
|
119
136
|
width: "100%",
|
|
120
137
|
};
|
|
121
138
|
});
|
|
139
|
+
|
|
140
|
+
function uppercaseFirstLetter(props: { text: string }) {
|
|
141
|
+
return props.text.charAt(0).toUpperCase() + props.text.slice(1);
|
|
142
|
+
}
|
|
@@ -1,30 +1,23 @@
|
|
|
1
1
|
import type { IconFC } from "./types.js";
|
|
2
2
|
|
|
3
|
-
/**
|
|
4
|
-
* @internal
|
|
5
|
-
*/
|
|
6
3
|
export const EmailIcon: IconFC = (props) => {
|
|
7
4
|
return (
|
|
8
5
|
<svg
|
|
9
|
-
|
|
6
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
7
|
+
width={props.size}
|
|
10
8
|
height={props.size}
|
|
9
|
+
viewBox="0 0 24 24"
|
|
11
10
|
role="presentation"
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
11
|
+
fill="none"
|
|
12
|
+
stroke="currentColor"
|
|
13
|
+
strokeWidth="2"
|
|
14
|
+
strokeLinecap="round"
|
|
15
|
+
strokeLinejoin="round"
|
|
16
|
+
className="lucide lucide-mail-icon lucide-mail"
|
|
17
|
+
style={{ color: props.color }}
|
|
15
18
|
>
|
|
16
|
-
<path
|
|
17
|
-
|
|
18
|
-
stroke={props.color ?? "currentColor"}
|
|
19
|
-
strokeLinecap="round"
|
|
20
|
-
strokeLinejoin="round"
|
|
21
|
-
/>
|
|
22
|
-
<path
|
|
23
|
-
d="M14.6668 4.6665L8.68683 8.4665C8.48101 8.59545 8.24304 8.66384 8.00016 8.66384C7.75728 8.66384 7.51931 8.59545 7.3135 8.4665L1.3335 4.6665"
|
|
24
|
-
stroke={props.color ?? "currentColor"}
|
|
25
|
-
strokeLinecap="round"
|
|
26
|
-
strokeLinejoin="round"
|
|
27
|
-
/>
|
|
19
|
+
<path d="m22 7-8.991 5.727a2 2 0 0 1-2.009 0L2 7" />
|
|
20
|
+
<rect x="2" y="4" width="20" height="16" rx="2" />
|
|
28
21
|
</svg>
|
|
29
22
|
);
|
|
30
23
|
};
|
|
@@ -0,0 +1,195 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import type { ThirdwebClient } from "../../../../client/client.js";
|
|
3
|
+
import type { Wallet } from "../../../../wallets/interfaces/wallet.js";
|
|
4
|
+
import type { AuthOption } from "../../../../wallets/types.js";
|
|
5
|
+
import { useCustomTheme } from "../../../core/design-system/CustomThemeProvider.js";
|
|
6
|
+
import {
|
|
7
|
+
iconSize,
|
|
8
|
+
radius,
|
|
9
|
+
spacing,
|
|
10
|
+
} from "../../../core/design-system/index.js";
|
|
11
|
+
import { socialIcons } from "../../../core/utils/walletIcon.js";
|
|
12
|
+
import { defaultAuthOptions } from "../../wallets/shared/ConnectWalletSocialOptions.js";
|
|
13
|
+
import { Img } from "../components/Img.js";
|
|
14
|
+
import { EmailIcon } from "./icons/EmailIcon.js";
|
|
15
|
+
import { FingerPrintIcon } from "./icons/FingerPrintIcon.js";
|
|
16
|
+
import { GuestIcon } from "./icons/GuestIcon.js";
|
|
17
|
+
import { PhoneIcon } from "./icons/PhoneIcon.js";
|
|
18
|
+
|
|
19
|
+
export function InAppWalletIcon(props: {
|
|
20
|
+
client: ThirdwebClient;
|
|
21
|
+
wallet: Wallet<"inApp">;
|
|
22
|
+
}) {
|
|
23
|
+
const enabledAuthMethods = (
|
|
24
|
+
props.wallet.getConfig()?.auth?.options || defaultAuthOptions
|
|
25
|
+
)
|
|
26
|
+
.slice() // clone
|
|
27
|
+
.sort((a, b) => {
|
|
28
|
+
if (a in socialIcons && !(b in socialIcons)) {
|
|
29
|
+
return -1;
|
|
30
|
+
}
|
|
31
|
+
if (!(a in socialIcons) && b in socialIcons) {
|
|
32
|
+
return 1;
|
|
33
|
+
}
|
|
34
|
+
return 0;
|
|
35
|
+
});
|
|
36
|
+
|
|
37
|
+
const theme = useCustomTheme();
|
|
38
|
+
|
|
39
|
+
const firstMethod = enabledAuthMethods[0];
|
|
40
|
+
const secondMethod = enabledAuthMethods[1];
|
|
41
|
+
const thirdMethod = enabledAuthMethods[2];
|
|
42
|
+
const fourthMethod = enabledAuthMethods[3];
|
|
43
|
+
|
|
44
|
+
const offset = "4px";
|
|
45
|
+
const offset2 = "6px";
|
|
46
|
+
const smallIconSize = "20";
|
|
47
|
+
const extraIconSize = "12";
|
|
48
|
+
|
|
49
|
+
if (firstMethod && secondMethod) {
|
|
50
|
+
return (
|
|
51
|
+
<div
|
|
52
|
+
style={{
|
|
53
|
+
width: `${iconSize.xl}px`,
|
|
54
|
+
height: `${iconSize.xl}px`,
|
|
55
|
+
position: "relative",
|
|
56
|
+
gap: spacing["3xs"],
|
|
57
|
+
border: `1px solid ${theme.colors.borderColor}`,
|
|
58
|
+
borderRadius: radius.md,
|
|
59
|
+
backgroundColor: theme.colors.tertiaryBg,
|
|
60
|
+
}}
|
|
61
|
+
>
|
|
62
|
+
<div
|
|
63
|
+
style={{
|
|
64
|
+
position: "absolute",
|
|
65
|
+
top: offset,
|
|
66
|
+
left: offset,
|
|
67
|
+
display: "flex",
|
|
68
|
+
}}
|
|
69
|
+
>
|
|
70
|
+
<AuthOptionIcon
|
|
71
|
+
authOption={firstMethod}
|
|
72
|
+
client={props.client}
|
|
73
|
+
size={smallIconSize}
|
|
74
|
+
/>
|
|
75
|
+
</div>
|
|
76
|
+
|
|
77
|
+
<div
|
|
78
|
+
style={{
|
|
79
|
+
position: "absolute",
|
|
80
|
+
bottom: offset,
|
|
81
|
+
right: offset,
|
|
82
|
+
display: "flex",
|
|
83
|
+
}}
|
|
84
|
+
>
|
|
85
|
+
<AuthOptionIcon
|
|
86
|
+
authOption={secondMethod}
|
|
87
|
+
client={props.client}
|
|
88
|
+
size={smallIconSize}
|
|
89
|
+
/>
|
|
90
|
+
</div>
|
|
91
|
+
|
|
92
|
+
<div>
|
|
93
|
+
{thirdMethod && (
|
|
94
|
+
<div
|
|
95
|
+
style={{
|
|
96
|
+
position: "absolute",
|
|
97
|
+
top: offset2,
|
|
98
|
+
right: offset2,
|
|
99
|
+
display: "flex",
|
|
100
|
+
}}
|
|
101
|
+
>
|
|
102
|
+
<AuthOptionIcon
|
|
103
|
+
authOption={thirdMethod}
|
|
104
|
+
client={props.client}
|
|
105
|
+
size={extraIconSize}
|
|
106
|
+
/>
|
|
107
|
+
</div>
|
|
108
|
+
)}
|
|
109
|
+
|
|
110
|
+
{fourthMethod && (
|
|
111
|
+
<div
|
|
112
|
+
style={{
|
|
113
|
+
position: "absolute",
|
|
114
|
+
bottom: offset2,
|
|
115
|
+
left: offset2,
|
|
116
|
+
display: "flex",
|
|
117
|
+
}}
|
|
118
|
+
>
|
|
119
|
+
<AuthOptionIcon
|
|
120
|
+
authOption={fourthMethod}
|
|
121
|
+
client={props.client}
|
|
122
|
+
size={extraIconSize}
|
|
123
|
+
/>
|
|
124
|
+
</div>
|
|
125
|
+
)}
|
|
126
|
+
</div>
|
|
127
|
+
</div>
|
|
128
|
+
);
|
|
129
|
+
}
|
|
130
|
+
|
|
131
|
+
if (firstMethod) {
|
|
132
|
+
return (
|
|
133
|
+
<div
|
|
134
|
+
style={{
|
|
135
|
+
width: `${iconSize.xl}px`,
|
|
136
|
+
height: `${iconSize.xl}px`,
|
|
137
|
+
display: "flex",
|
|
138
|
+
justifyContent: "center",
|
|
139
|
+
alignItems: "center",
|
|
140
|
+
border: `1px solid ${theme.colors.borderColor}`,
|
|
141
|
+
borderRadius: radius.md,
|
|
142
|
+
backgroundColor: theme.colors.tertiaryBg,
|
|
143
|
+
}}
|
|
144
|
+
>
|
|
145
|
+
<AuthOptionIcon
|
|
146
|
+
authOption={firstMethod}
|
|
147
|
+
client={props.client}
|
|
148
|
+
key={firstMethod}
|
|
149
|
+
size={iconSize.lg}
|
|
150
|
+
/>
|
|
151
|
+
</div>
|
|
152
|
+
);
|
|
153
|
+
}
|
|
154
|
+
|
|
155
|
+
return null;
|
|
156
|
+
}
|
|
157
|
+
|
|
158
|
+
function AuthOptionIcon(props: {
|
|
159
|
+
authOption: AuthOption;
|
|
160
|
+
client: ThirdwebClient;
|
|
161
|
+
size: string;
|
|
162
|
+
}) {
|
|
163
|
+
const theme = useCustomTheme();
|
|
164
|
+
if (props.authOption in socialIcons) {
|
|
165
|
+
const icon = socialIcons[props.authOption as keyof typeof socialIcons];
|
|
166
|
+
return (
|
|
167
|
+
<Img
|
|
168
|
+
src={icon}
|
|
169
|
+
width={props.size}
|
|
170
|
+
height={props.size}
|
|
171
|
+
client={props.client}
|
|
172
|
+
/>
|
|
173
|
+
);
|
|
174
|
+
}
|
|
175
|
+
|
|
176
|
+
if (props.authOption === "phone") {
|
|
177
|
+
return <PhoneIcon size={props.size} color={theme.colors.secondaryText} />;
|
|
178
|
+
}
|
|
179
|
+
|
|
180
|
+
if (props.authOption === "email") {
|
|
181
|
+
return <EmailIcon size={props.size} color={theme.colors.secondaryText} />;
|
|
182
|
+
}
|
|
183
|
+
|
|
184
|
+
if (props.authOption === "passkey") {
|
|
185
|
+
return (
|
|
186
|
+
<FingerPrintIcon size={props.size} color={theme.colors.secondaryText} />
|
|
187
|
+
);
|
|
188
|
+
}
|
|
189
|
+
|
|
190
|
+
if (props.authOption === "guest") {
|
|
191
|
+
return <GuestIcon size={props.size} color={theme.colors.secondaryText} />;
|
|
192
|
+
}
|
|
193
|
+
|
|
194
|
+
return null;
|
|
195
|
+
}
|
|
@@ -3,7 +3,7 @@ import { keyframes } from "@emotion/react";
|
|
|
3
3
|
import { useCustomTheme } from "../../../core/design-system/CustomThemeProvider.js";
|
|
4
4
|
import type { Theme } from "../../../core/design-system/index.js";
|
|
5
5
|
import { iconSize } from "../../../core/design-system/index.js";
|
|
6
|
-
import {
|
|
6
|
+
import { StyledSvg } from "../design-system/elements.js";
|
|
7
7
|
|
|
8
8
|
/**
|
|
9
9
|
* @internal
|
|
@@ -24,20 +24,25 @@ export const Spinner: React.FC<{
|
|
|
24
24
|
viewBox="0 0 50 50"
|
|
25
25
|
className="tw-spinner"
|
|
26
26
|
>
|
|
27
|
-
<
|
|
27
|
+
<circle
|
|
28
28
|
cx="25"
|
|
29
29
|
cy="25"
|
|
30
30
|
fill="none"
|
|
31
31
|
r="20"
|
|
32
|
+
style={{
|
|
33
|
+
strokeLinecap: "round",
|
|
34
|
+
animation: `tw-spinner-circle-dash 1.5s ease-in-out infinite`,
|
|
35
|
+
}}
|
|
32
36
|
stroke={props.color ? theme.colors[props.color] : "currentColor"}
|
|
33
37
|
strokeWidth={Number(iconSize[props.size]) > 64 ? "2" : "4"}
|
|
34
38
|
/>
|
|
39
|
+
<style>{dashAnimation}</style>
|
|
35
40
|
</Svg>
|
|
36
41
|
);
|
|
37
42
|
};
|
|
38
|
-
|
|
39
43
|
// animations
|
|
40
|
-
const dashAnimation =
|
|
44
|
+
const dashAnimation = `
|
|
45
|
+
@keyframes tw-spinner-circle-dash {
|
|
41
46
|
0% {
|
|
42
47
|
stroke-dasharray: 1, 150;
|
|
43
48
|
stroke-dashoffset: 0;
|
|
@@ -63,8 +68,3 @@ const Svg = /* @__PURE__ */ StyledSvg({
|
|
|
63
68
|
height: "1em",
|
|
64
69
|
width: "1em",
|
|
65
70
|
});
|
|
66
|
-
|
|
67
|
-
const Circle = /* @__PURE__ */ StyledCircle({
|
|
68
|
-
animation: `${dashAnimation} 1.5s ease-in-out infinite`,
|
|
69
|
-
strokeLinecap: "round",
|
|
70
|
-
});
|
|
@@ -2,7 +2,6 @@ import styled from "@emotion/styled";
|
|
|
2
2
|
|
|
3
3
|
export const StyledDiv = /* @__PURE__ */ styled.div;
|
|
4
4
|
export const StyledSvg = /* @__PURE__ */ styled.svg;
|
|
5
|
-
export const StyledCircle = /* @__PURE__ */ styled.circle;
|
|
6
5
|
export const StyledSpan = /* @__PURE__ */ styled.span;
|
|
7
6
|
export const StyledAnchor = /* @__PURE__ */ styled.a;
|
|
8
7
|
export const StyledButton = /* @__PURE__ */ styled.button;
|