Kieran/snort
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

address review comments

Browse Source
This commit is contained in:
Alejandro Gomez
2023-02-09 23:22:16 +01:00
parent 8ca9a2157c
commit 710bb10083
10 changed files with 180 additions and 104 deletions
Download Patch File Download Diff File Expand all files Collapse all files

79
src/Pages/new/GetVerified.tsx
View File

@ -1,14 +1,22 @@
import { useState } from "react";
import { FormattedMessage } from "react-intl";
import { useNavigate } from "react-router-dom";
import { useSelector } from "react-redux";
import { services } from "Pages/Verification";
import Nip5Service from "Element/Nip5Service";
import ProfileImage from "Element/ProfileImage";
import type { RootState } from "State/Store";
import { useUserProfile } from "Feed/ProfileFeed";
import messages from "./messages";
export default function GetVerified() {
const navigate = useNavigate();
const { publicKey } = useSelector((s: RootState) => s.login);
const user = useUserProfile(publicKey);
const [isVerified, setIsVerified] = useState(true);
const [nip05, setNip05] = useState(`${user?.name || "nostrich"}@snort.social`);
const onNext = async () => {
navigate("/new/import");
@ -26,7 +34,7 @@ export default function GetVerified() {
<FormattedMessage {...messages.PreviewOnSnort} />
</h4>
<div className="profile-preview-nip">
<ProfileImage pubkey="63fe6318dc58583cfe16810f86dd09e18bfd76aabc24a0081ce2856f330504ed" />
{user?.pubkey && <ProfileImage pubkey={user?.pubkey} defaultNip={nip05} verifyNip={false} />}
</div>
<p>
<FormattedMessage {...messages.IdentifierHelp} />
@ -45,28 +53,55 @@ export default function GetVerified() {
<p className="warning">
<FormattedMessage {...messages.NameSquatting} />
</p>
<h2>
<FormattedMessage {...messages.GetSnortId} />
</h2>
<p>
<FormattedMessage {...messages.GetSnortIdHelp} />
</p>
<div className="nip-container">
<Nip5Service key="snort" {...services[0]} helpText={false} />
</div>
<h2>
<FormattedMessage {...messages.GetPartnerId} />
</h2>
<p>
<FormattedMessage {...messages.GetPartnerIdHelp} />
</p>
<div className="nip-container">
<Nip5Service key="nostrplebs" {...services[1]} helpText={false} />
</div>
{!isVerified && (
<>
<h2>
<FormattedMessage {...messages.GetSnortId} />
</h2>
<p>
<FormattedMessage {...messages.GetSnortIdHelp} />
</p>
<div className="nip-container">
<Nip5Service
key="snort"
{...services[0]}
helpText={false}
onChange={setNip05}
onSuccess={() => setIsVerified(true)}
/>
</div>
</>
)}
{!isVerified && (
<>
<h2>
<FormattedMessage {...messages.GetPartnerId} />
</h2>
<p>
<FormattedMessage {...messages.GetPartnerIdHelp} />
</p>
<div className="nip-container">
<Nip5Service
key="nostrplebs"
{...services[1]}
helpText={false}
onChange={setNip05}
onSuccess={() => setIsVerified(true)}
/>
</div>
</>
)}
<div className="next-actions">
<button type="button" className="transparent" onClick={onNext}>
<FormattedMessage {...messages.Skip} />
</button>
{!isVerified && (
<button type="button" className="transparent" onClick={onNext}>
<FormattedMessage {...messages.Skip} />
</button>
)}
{isVerified && (
<button type="button" onClick={onNext}>
<FormattedMessage {...messages.Next} />
</button>
)}
</div>
</div>
);

26
src/Pages/new/NewUserFlow.tsx
View File

@ -1,38 +1,14 @@
import { useState, ReactNode } from "react";
import { useSelector } from "react-redux";
import { FormattedMessage } from "react-intl";
import { useNavigate } from "react-router-dom";
import ChevronDown from "Icons/ChevronDown";
import { CollapsedIcon } from "Element/Collapsed";
import { CollapsedSection } from "Element/Collapsed";
import Copy from "Element/Copy";
import { RootState } from "State/Store";
import { hexToBech32 } from "Util";
import messages from "./messages";
interface CollapsedSectionProps {
title: ReactNode;
children: ReactNode;
}
const CollapsedSection = ({ title, children }: CollapsedSectionProps) => {
const [collapsed, setCollapsed] = useState(true);
const icon = (
<div className={`collapse-icon ${collapsed ? "" : "flip"}`} onClick={() => setCollapsed(!collapsed)}>
<ChevronDown />
</div>
);
return (
<div className="faq">
<h3 onClick={() => setCollapsed(!collapsed)}>{title}</h3>
<CollapsedIcon icon={icon} collapsed={collapsed}>
{children}
</CollapsedIcon>
</div>
);
};
const WhatIsSnort = () => {
return (
<CollapsedSection title={<FormattedMessage {...messages.WhatIsSnort} />}>

21
src/Pages/new/index.css
View File

@ -112,27 +112,6 @@
height: 16px;
}
.new-user .faq {
position: relative;
}
.new-user .faq h3,
.new-user .faq svg {
cursor: pointer;
}
.new-user .faq .collapse-icon {
position: absolute;
top: 0;
right: 0;
transition: transform 300ms ease-in-out;
}
.new-user .faq .collapse-icon.flip {
transform: rotate(180deg);
transition: transform 300ms ease-in-out;
}
.new-user input {
width: 100%;
max-width: 568px;

2
src/Pages/new/messages.js
View File

@ -44,7 +44,7 @@ export default defineMessages({
EasierToFind: "Make your profile easier to find and share",
Funding: "Fund developers and platforms providing NIP-05 verification services",
NameSquatting:
"Name-squatting and impersonation is not allowed. Snort and our partners reserve the right to terminate your verification (not your account - nobody can take that away) for violating this rule.",
"Name-squatting and impersonation is not allowed. Snort and our partners reserve the right to terminate your handle (not your account - nobody can take that away) for violating this rule.",
PreviewOnSnort: "Preview on snort",
GetSnortId: "Get a Snort identifier",
GetSnortIdHelp: