@arcblock/ux 3.0.33 → 3.0.35
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/lib/Avatar/index.d.ts +3 -0
- package/lib/Avatar/index.js +26 -24
- package/lib/DIDConnect/auth-apps/auth-apps-info.js +20 -47
- package/lib/DIDConnect/icons/did-wallet-logo.d.ts +7 -0
- package/lib/DIDConnect/icons/did-wallet-logo.js +12 -0
- package/lib/DIDConnect/icons/github-logo.d.ts +7 -0
- package/lib/DIDConnect/icons/github-logo.js +11 -0
- package/lib/DIDConnect/provider-icon.d.ts +7 -0
- package/lib/DIDConnect/provider-icon.js +52 -0
- package/lib/Img/index.d.ts +9 -1
- package/lib/Img/index.js +83 -72
- package/lib/UserCard/components.js +15 -14
- package/lib/UserCard/index.js +41 -31
- package/lib/Util/constant.d.ts +2 -0
- package/lib/Util/constant.js +23 -20
- package/package.json +7 -7
- package/src/Avatar/index.jsx +3 -0
- package/src/DIDConnect/auth-apps/auth-apps-info.tsx +2 -37
- package/src/DIDConnect/icons/did-wallet-logo.tsx +18 -0
- package/src/DIDConnect/icons/github-logo.tsx +17 -0
- package/src/DIDConnect/provider-icon.tsx +62 -0
- package/src/Img/index.jsx +47 -9
- package/src/UserCard/components.tsx +1 -0
- package/src/UserCard/index.tsx +23 -6
- package/src/Util/constant.ts +3 -0
package/src/UserCard/index.tsx
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { useEffect, useRef, useState } from 'react';
|
|
1
|
+
import { useEffect, useMemo, useRef, useState } from 'react';
|
|
2
2
|
import type { User } from './types';
|
|
3
3
|
import { UserCardProps, CardType } from './types';
|
|
4
4
|
import AvatarOnlyCard from './Cards/avatar-only';
|
|
@@ -55,9 +55,26 @@ function UserCard(props: UserCardProps) {
|
|
|
55
55
|
};
|
|
56
56
|
}, [props.did, props.user]);
|
|
57
57
|
|
|
58
|
+
// 补全 avatar 的 imageFilter 信息，以提高性能
|
|
59
|
+
const userInfo = useMemo(() => {
|
|
60
|
+
if (!user) {
|
|
61
|
+
return null;
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
const { avatar = '', ...rest } = user;
|
|
65
|
+
const avatarParam = avatar.split('?')[1];
|
|
66
|
+
if (avatar && !avatarParam) {
|
|
67
|
+
return {
|
|
68
|
+
...rest,
|
|
69
|
+
avatar: `${avatar}?imageFilter=resize&w=48&h=48`,
|
|
70
|
+
};
|
|
71
|
+
}
|
|
72
|
+
return user;
|
|
73
|
+
}, [user]);
|
|
74
|
+
|
|
58
75
|
// 如果不存在，则使用 did 渲染头像
|
|
59
|
-
if (!
|
|
60
|
-
return <Avatar did={props.did} size={props.avatarSize} {...props.avatarProps} />;
|
|
76
|
+
if (!userInfo) {
|
|
77
|
+
return <Avatar did={props.did} size={props.avatarSize} useProxyFallback {...props.avatarProps} />;
|
|
61
78
|
}
|
|
62
79
|
|
|
63
80
|
// user 存在，则使用 user 渲染头像
|
|
@@ -68,7 +85,7 @@ function UserCard(props: UserCardProps) {
|
|
|
68
85
|
<DetailedCard
|
|
69
86
|
{...props}
|
|
70
87
|
shouldShowHoverCard={false}
|
|
71
|
-
user={
|
|
88
|
+
user={userInfo!}
|
|
72
89
|
avatarProps={props.popupAvatarProps}
|
|
73
90
|
shortenLabelProps={props.popupShortenLabelProps || props.shortenLabelProps}
|
|
74
91
|
renderFields={props.popupRenderFields}
|
|
@@ -88,7 +105,7 @@ function UserCard(props: UserCardProps) {
|
|
|
88
105
|
{...props}
|
|
89
106
|
shouldShowHoverCard={shouldShowHoverCard}
|
|
90
107
|
renderCardContent={renderCardContent}
|
|
91
|
-
user={
|
|
108
|
+
user={userInfo!}
|
|
92
109
|
/>
|
|
93
110
|
);
|
|
94
111
|
}
|
|
@@ -100,7 +117,7 @@ function UserCard(props: UserCardProps) {
|
|
|
100
117
|
{...props}
|
|
101
118
|
shouldShowHoverCard={shouldShowHoverCard}
|
|
102
119
|
renderCardContent={renderCardContent}
|
|
103
|
-
user={
|
|
120
|
+
user={userInfo!}
|
|
104
121
|
/>
|
|
105
122
|
</CardContainer>
|
|
106
123
|
);
|
package/src/Util/constant.ts
CHANGED
|
@@ -28,6 +28,7 @@ export const LOGIN_PROVIDER = {
|
|
|
28
28
|
WALLET: 'wallet',
|
|
29
29
|
NFT: 'nft',
|
|
30
30
|
PASSKEY: 'passkey',
|
|
31
|
+
TWITTER: 'twitter',
|
|
31
32
|
};
|
|
32
33
|
|
|
33
34
|
export const LOGIN_PROVIDER_NAME = {
|
|
@@ -39,6 +40,7 @@ export const LOGIN_PROVIDER_NAME = {
|
|
|
39
40
|
[LOGIN_PROVIDER.WALLET]: 'DID Wallet',
|
|
40
41
|
[LOGIN_PROVIDER.NFT]: 'NFT',
|
|
41
42
|
[LOGIN_PROVIDER.PASSKEY]: 'Passkey',
|
|
43
|
+
[LOGIN_PROVIDER.TWITTER]: 'X',
|
|
42
44
|
};
|
|
43
45
|
|
|
44
46
|
// HACK: 目前这里的键值不能使用 [LOGIN_PROVIDER.AUTH0] 形式，否则会影响 ts 的 keyof typeof OAUTH_PROVIDER 来获取键值作为类型的判断
|
|
@@ -48,6 +50,7 @@ export const OAUTH_PROVIDER = {
|
|
|
48
50
|
apple: 'Apple',
|
|
49
51
|
github: 'Github',
|
|
50
52
|
google: 'Google',
|
|
53
|
+
twitter: 'X',
|
|
51
54
|
};
|
|
52
55
|
|
|
53
56
|
export const DID_CONNECT_SMALL_WIDTH = 360;
|