Page MenuHomePhorge
Files F32098270

D15380.1765011397.diff
No OneTemporary
Actions

Size
4 KB
Referenced Files
None
Subscribers
None

D15380.1765011397.diff
View Options

diff --git a/native/components/protocol-icon.react.js b/native/components/protocol-icon.react.js
--- a/native/components/protocol-icon.react.js
+++ b/native/components/protocol-icon.react.js
@@ -3,6 +3,7 @@
import Icon from '@expo/vector-icons/FontAwesome.js';
import * as React from 'react';
import { View } from 'react-native';
+import type { ViewStyleProp } from 'react-native/Libraries/StyleSheet/StyleSheet';
import { getProtocolByName } from 'lib/shared/threads/protocols/thread-protocols.js';
import type { ProtocolName } from 'lib/shared/threads/thread-spec.js';
@@ -14,6 +15,7 @@
+icon?: React.Node,
+protocol?: ProtocolName,
+size: number,
+ +containerStyle?: ?ViewStyleProp,
};
function ProtocolIcon(props: Props): React.Node {
@@ -23,7 +25,7 @@
const protocolIcon = getProtocolByName(props.protocol)?.presentationDetails
?.protocolIcon;
const iconSize = props.size * 0.65;
- let containerStyle = styles.container;
+ let containerStyle = props.containerStyle ?? styles.container;
if (props.icon) {
containerStyle = styles.container;
iconComponent = props.icon;
@@ -33,7 +35,7 @@
iconComponent = <Icon name="server" size={iconSize} style={styles.icon} />;
} else if (protocolIcon === 'farcaster') {
iconComponent = <FarcasterLogo size={iconSize} />;
- containerStyle = styles.farcasterContainer;
+ containerStyle = [styles.farcasterContainer, props.containerStyle];
}
const viewStyle = React.useMemo(
diff --git a/native/user-profile/user-profile.react.js b/native/user-profile/user-profile.react.js
--- a/native/user-profile/user-profile.react.js
+++ b/native/user-profile/user-profile.react.js
@@ -26,6 +26,7 @@
import UserProfileMessageButton from './user-profile-message-button.react.js';
import UserProfileRelationshipButton from './user-profile-relationship-button.react.js';
import { BottomSheetContext } from '../bottom-sheet/bottom-sheet-provider.react.js';
+import ProtocolIcon from '../components/protocol-icon.react.js';
import SingleLine from '../components/single-line.react.js';
import SWMansionIcon from '../components/swmansion-icon.react.js';
import { useStyles } from '../themes/colors.js';
@@ -56,12 +57,18 @@
}
return (
<View style={styles.farcasterUsernameContainer}>
- <Text style={styles.farcasterUsernameText}>Farcaster: {ensFCName}</Text>
+ <ProtocolIcon
+ protocol="Farcaster DC"
+ size={20}
+ containerStyle={styles.farcasterIcon}
+ />
+ <Text style={styles.farcasterUsernameText}>{ensFCName}</Text>
</View>
);
}, [
farcasterUsername,
resolvedUsernameText,
+ styles.farcasterIcon,
styles.farcasterUsernameText,
styles.farcasterUsernameContainer,
]);
@@ -233,12 +240,18 @@
},
farcasterUsernameContainer: {
paddingVertical: 8,
+ flexDirection: 'row',
+ justifyContent: 'center',
+ alignItems: 'center',
},
farcasterUsernameText: {
color: 'modalForegroundLabel',
fontSize: 14,
fontWeight: '500',
},
+ farcasterIcon: {
+ marginLeft: 0,
+ },
copyUsernameContainer: {
flexDirection: 'row',
justifyContent: 'center',
diff --git a/web/components/protocol-icon.react.js b/web/components/protocol-icon.react.js
--- a/web/components/protocol-icon.react.js
+++ b/web/components/protocol-icon.react.js
@@ -16,6 +16,7 @@
+icon?: React.Node,
+protocol?: ProtocolName,
+size: number,
+ +marginHorizontal?: number,
};
function ProtocolIcon(props: Props): React.Node {
@@ -55,8 +56,7 @@
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
- marginLeft: 3,
- marginRight: 3,
+ marginHorizontal: props.marginHorizontal ?? 3,
}}
>
{iconComponent}
diff --git a/web/modals/user-profile/user-profile.css b/web/modals/user-profile/user-profile.css
--- a/web/modals/user-profile/user-profile.css
+++ b/web/modals/user-profile/user-profile.css
@@ -26,6 +26,10 @@
}
.farcasterUsernameContainer {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ gap: 8px;
padding: 8px 0;
}
diff --git a/web/modals/user-profile/user-profile.react.js b/web/modals/user-profile/user-profile.react.js
--- a/web/modals/user-profile/user-profile.react.js
+++ b/web/modals/user-profile/user-profile.react.js
@@ -18,6 +18,7 @@
import UserProfileAvatarModal from './user-profile-avatar-modal.react.js';
import css from './user-profile.css';
import UserAvatar from '../../avatars/user-avatar.react.js';
+import ProtocolIcon from '../../components/protocol-icon.react.js';
import SingleLine from '../../components/single-line.react.js';
type Props = {
@@ -75,7 +76,8 @@
}
return (
<div className={css.farcasterUsernameContainer}>
- <p className={css.farcasterUsernameText}>Farcaster: {ensFCName}</p>
+ <ProtocolIcon protocol="Farcaster DC" size={20} marginHorizontal={0} />
+ <p className={css.farcasterUsernameText}>{ensFCName}</p>
</div>
);
}, [farcasterUsername, resolvedUsernameText]);

File Metadata

Mime Type
text/plain
Expires
Sat, Dec 6, 8:56 AM (17 h, 14 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
5834819
Default Alt Text
D15380.1765011397.diff (4 KB)

Event Timeline