diff --git a/src/components/user/mention.tsx b/src/components/user/mention.tsx
new file mode 100644
index 00000000..5b5ab538
--- /dev/null
+++ b/src/components/user/mention.tsx
@@ -0,0 +1,50 @@
+import { DatabaseContext } from '@components/contexts/database';
+
+import { truncate } from '@utils/truncate';
+
+import { memo, useCallback, useContext, useEffect, useState } from 'react';
+
+export const UserMention = memo(function UserMention({ pubkey }: { pubkey: string }) {
+ const { db }: any = useContext(DatabaseContext);
+ const [profile, setProfile] = useState({ name: null });
+
+ const insertCacheProfile = useCallback(
+ async (event) => {
+ // insert to database
+ await db.execute('INSERT OR IGNORE INTO cache_profiles (id, metadata) VALUES (?, ?);', [pubkey, event.content]);
+ // update state
+ setProfile(JSON.parse(event.content));
+ },
+ [db, pubkey]
+ );
+
+ const getCacheProfile = useCallback(async () => {
+ const result: any = await db.select(`SELECT metadata FROM cache_profiles WHERE id = "${pubkey}"`);
+ return result[0];
+ }, [db, pubkey]);
+
+ useEffect(() => {
+ getCacheProfile()
+ .then((res) => {
+ if (res !== undefined) {
+ setProfile(JSON.parse(res.metadata));
+ } else {
+ fetch(`https://rbr.bio/${pubkey}/metadata.json`, { redirect: 'follow' })
+ .then((response) => {
+ if (response.ok) {
+ return response.json();
+ } else if (response.status === 404) {
+ return Promise.reject('error 404');
+ } else {
+ return Promise.reject('some other error: ' + response.status);
+ }
+ })
+ .then((data) => insertCacheProfile(data))
+ .catch((error) => console.log('error is', error));
+ }
+ })
+ .catch(console.error);
+ }, [getCacheProfile, insertCacheProfile, pubkey]);
+
+ return @{profile.name ? profile.name : truncate(pubkey, 16, ' .... ')};
+});