Transaction: 9vWc9kR...wTTK

{ "data": { "james.near": { "widget": { "components.profile.ProfileEdit": { "": "const { Button, Avatar, InputField, TextEditor } = VM.require(\n \"buildhub.near/widget/components\"\n) || {\n Button: () => <></>,\n Avatar: () => <></>,\n InputField: () => <></>,\n TextEditor: () => <></>,\n};\n\nconst accountId = context.accountId;\n\nif (!accountId) {\n return \"\";\n}\n\nconst profile = Social.getr(`${accountId}/profile`);\nconst badges = Social.getr(`${accountId}/badge`);\n\nif (!profile || !badges) {\n return \"\";\n}\n\nconst [name, setName] = useState(profile.name ?? \"\");\nconst [description, setDescription] = useState(profile.description ?? \"\");\nconst [location, setLocation] = useState(profile.location ?? \"\");\nconst [twitter, setTwitter] = useState(profile.linktree.twitter ?? \"\");\nconst [github, setGithub] = useState(profile.linktree.github ?? \"\");\nconst [telegram, setTelegram] = useState(profile.linktree.telegram ?? \"\");\nconst [website, setWebsite] = useState(profile.linktree.website ?? \"\");\nconst [image, setImage] = useState(profile.image ?? {});\nconst [hatColor, setHatColor] = useState(badges.builder[accountId] ?? \"\");\n\nconst onNameChange = useCallback((e) => {\n setName(e.target.value);\n}, []);\n\nconst onDescriptionChange = useCallback((e) => {\n setDescription(e);\n}, []);\n\nconst onHatChange = useCallback((e) => {\n setHatColor(e.target.value);\n}, []);\n\nconst onLocationChange = useCallback((e) => {\n setLocation(e.target.value);\n}, []);\n\nconst onTwitterChange = useCallback((e) => {\n setTwitter(e.target.value);\n}, []);\n\nconst onGithubChange = useCallback((e) => {\n setGithub(e.target.value);\n}, []);\n\nconst onTelegramChange = useCallback((e) => {\n setTelegram(e.target.value);\n}, []);\n\nconst onWebsiteChange = useCallback((e) => {\n setWebsite(e.target.value);\n}, []);\n\nconst setEditMode = props.setEditMode || (() => {});\n\nconst Container = styled.div`\n background-color: #000;\n padding: 23px;\n`;\n\nconst SpanLabel = styled.span`\n color: var(--White-100, #fff);\n\n /* Body/14px */\n font-size: 14px;\n font-style: normal;\n font-weight: 400;\n line-height: 170%; /* 23.8px */\n`;\n\nconst ProfileImageContainer = styled.div`\n display: flex;\n flex-direction: row;\n gap: 4px;\n align-items: center;\n\n img {\n width: 64px;\n height: 64px;\n object-fit: cover;\n border-radius: 100%;\n }\n`;\n\nreturn (\n <Container>\n <div className=\"d-flex flex-column mb-3\" style={{ gap: 24 }}>\n <div className=\"d-flex flex-row\">\n <ProfileImageContainer className=\"d-flex align-items-center gap-3\">\n <Widget\n src=\"buildhub.near/widget/components.profile.ImageUploader\"\n loading=\"\"\n props={{\n image: profile.image,\n setImage: setImage,\n }}\n />\n </ProfileImageContainer>\n <div className=\"ms-auto\">\n <Button\n style={{ marginRight: 8 }}\n variant=\"outline\"\n onClick={() => {\n Social.set(\n {\n profile: {\n name,\n image: image,\n description,\n location,\n linktree: {\n twitter,\n github,\n telegram,\n website,\n },\n },\n badge: {\n builder: {\n [accountId]: hatColor,\n },\n },\n },\n {\n onCommit: () => {\n setEditMode(false);\n },\n }\n );\n }}\n id={\"save-profile\"}\n >\n Save Profile\n </Button>\n <Button\n variant=\"outline\"\n onClick={() => setEditMode(false)}\n id={\"cancel-edit\"}\n >\n Cancel\n </Button>\n </div>\n </div>\n <InputField\n label=\"Name\"\n value={name}\n key={\"name\"}\n onChange={onNameChange}\n placeholder=\"Enter full name\"\n maxWidth=\"100%\"\n />\n <TextEditor\n value={description}\n onChange={onDescriptionChange}\n label=\"Description\"\n />\n <div className=\"d-flex flex-column\">\n <span className=\"d-flex flex-row\">\n <p className=\"me-2\" style={{ color: \"#fff\" }}>\n Hat Color\n </p>\n <Widget\n src=\"james.near/widget/BuilderHat\"\n props={{ color: hatColor, accountId }}\n />\n </span>\n <InputField\n value={hatColor}\n key={\"hat\"}\n onChange={onHatChange}\n placeholder=\"red, green, blue, yellow, purple, gray, brown, orange, maroon, pink, white, black, rust\"\n maxWidth=\"100%\"\n />\n </div>\n <InputField\n label=\"Location\"\n value={location}\n key={\"location\"}\n onChange={onLocationChange}\n placeholder=\"e.g. United States\"\n maxWidth=\"100%\"\n />\n <InputField\n label=\"Twitter\"\n value={twitter}\n key={\"twitter\"}\n onChange={onTwitterChange}\n placeholder=\"username\"\n maxWidth=\"100%\"\n />\n <InputField\n label=\"Github\"\n value={github}\n key={\"github\"}\n onChange={onGithubChange}\n placeholder=\"username\"\n maxWidth=\"100%\"\n />\n <InputField\n value={telegram}\n onChange={onTelegramChange}\n key={\"telegram\"}\n label=\"Telegram\"\n placeholder=\"username\"\n maxWidth=\"100%\"\n />\n <InputField\n label=\"Website\"\n value={website}\n key={\"website\"}\n onChange={onWebsiteChange}\n placeholder=\"URL\"\n maxWidth=\"100%\"\n />\n </div>\n </Container>\n);\n" } } } } }