feat: idOS design enhancement (#607)

* feat: improve idos ui experience * feat: add cards with active wallet * feat: update sign up button * fix: fetch data * fix: address comments * feat: use verification icons * chore: remove banner
near · Jan 16, 2024 · 49d3bbd · 49d3bbd
1 parent 43c1197
commit 49d3bbd
Show file tree

Hide file tree

Showing 5 changed files with 192 additions and 136 deletions.
diff --git a/src/Settings/Identity/Banner.jsx b/src/Settings/Identity/Banner.jsx
diff --git a/src/Settings/Identity/Index.jsx b/src/Settings/Identity/Index.jsx
@@ -1,5 +1,6 @@
+let { idosConnected, connectIdOS, walletImages, connectedWallet, ...forwardedProps } = props;
+
 const [showBanner, setShowBanner] = useState(true);
-const [idosData, setIdosData] = useState(null);
 const [showSuccessTooltip, setShowSuccessTooltip] = useState(props.showTooltip);
 
 const Wrapper = styled.div`
@@ -27,43 +28,30 @@ const Icon = styled.i`
   cursor: pointer;
 `;
 
-const bannerToggle = useCallback(() => setShowBanner(!showBanner), [showBanner]);
-
 useEffect(() => {
-  if (!props.idosConnected && props.connectIdOS) {
-    props.connectIdOS();
+  if (connectIdOS) {
+    connectIdOS();
   }
-}, [props.idosConnected, props.connectIdOS]);
+}, [connectIdOS]);
 
 return (
   <Wrapper>
-    <Title>
-      Identity &amp; data privacy
-      <Icon className="ph ph-info" onClick={bannerToggle} />
-    </Title>
-
-    <Widget
-      src="${REPL_ACCOUNT}/widget/Settings.Identity.Banner"
-      props={{
-        open: showBanner,
-        onClick: bannerToggle,
-      }}
-    />
+    <Title>Identity &amp; data privacy</Title>
 
-    {!props.idosConnected && (
+    {!idosConnected && (
       <Widget
-        src="${REPL_ACCOUNT}/widget/DIG.Button"
+        src="${REPL_ACCOUNT}/widget/Settings.Identity.Onboarding.Cards"
         props={{
-          variant: "primary",
-          label: "Connect to idOS",
-          disabled: disabled ?? !context.accountId,
-          onClick: props.connectIdOS,
+          idosConnected,
+          connectIdOS,
+          walletImages,
+          connectedWallet,
         }}
       />
     )}
 
     {props.idosConnected && (
-      <Widget src="${REPL_ACCOUNT}/widget/Settings.Identity.Verifications.Index" props={{ ...props }} />
+      <Widget src="${REPL_ACCOUNT}/widget/Settings.Identity.Verifications.Index" props={{ ...forwardedProps }} />
     )}
 
     {showSuccessTooltip && (

diff --git a/src/Settings/Identity/Onboarding/Cards.jsx b/src/Settings/Identity/Onboarding/Cards.jsx
@@ -0,0 +1,172 @@
+let { idosConnected, connectIdOS, walletImages, connectedWallet } = props;
+
+const idOSLearnLink = "https://idos-1.gitbook.io/idos-docs";
+const createAccountUrl =
+  "https://app.fractal.id/authorize?client_id=PXAbBxPErSPMXiKmMYQ3ged8Qxwqg1Px7ymhsuhaGP4&redirect_uri=https%3A%2F%2Fnear.org%2Fsettings&response_type=code&scope=contact%3Aread%20verification.uniqueness%3Aread%20verification.uniqueness.details%3Aread%20verification.idos%3Aread%20verification.idos.details%3Aread%20verification.wallet-near%3Aread%20verification.wallet-near.details%3Aread";
+
+const Wrapper = styled.div`
+  display: grid;
+  grid-gap: 24px;
+  grid-template-columns: repeat(2, 320px);
+  justify-content: center;
+  margin: 0 auto;
+`;
+
+const Card = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  box-shadow:
+    0px 4px 4px 0px rgba(0, 0, 0, 0.1),
+    0px -1px 2px 0px rgba(0, 0, 0, 0.15);
+  border-radius: 15px;
+  background: ${(p) => p.background};
+  width: 100%;
+  height: 100%;
+  gap: 24px;
+  padding: 24px;
+`;
+
+const Step = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 26px;
+  height: 26px;
+  background: ${(p) => p.background};
+  color: ${(p) => p.color};
+  border-radius: 50%;
+`;
+
+const Title = styled.h4`
+  font: var(--text-s);
+  color: ${(p) => p.color};
+  font-weight: 700;
+`;
+
+const ImagesWrapper = styled.div`
+  display: flex;
+  gap: 16px;
+  flex: 1 0 auto;
+`;
+
+const WalletImageWrapper = styled.div`
+  display: flex;
+  width: 60px;
+  height: 60px;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  border-radius: 50%;
+  background: var(--white);
+  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
+  opacity: ${(p) => (p.active ? "1" : "0.5")};
+  transform: ${(p) => (p.active ? "scale(1.3)" : "scale(1)")};
+  margin: auto 0;
+`;
+
+const WalletImage = styled.img`
+  width: 55px;
+  height: 55px;
+  padding: 4px;
+`;
+
+const Checkmark = styled.i`
+  position: absolute;
+  top: -5px;
+  right: -5px;
+  display: block;
+  background: var(--green8);
+  border-radius: 50%;
+  color: var(--white);
+  font-size: 12px;
+  padding: 4px;
+`;
+
+const TextWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+`;
+
+const Text = styled.span`
+  font: var(--text-base);
+  color: ${(p) => p.color};
+`;
+
+const TextLink = styled("Link")`
+  color: var(--violet8);
+  text-decoration: underline;
+  font-weight: 700;
+`;
+
+const ImageWrapper = styled.div`
+  padding: 0 24px;
+`;
+
+return (
+  <Wrapper>
+    <Card background="var(--white)">
+      <Step background="var(--sand12)" color="var(--white)">
+        1
+      </Step>
+      <Title>Log into idOS compatible wallet</Title>
+      <ImagesWrapper>
+        {walletImages.map((image) => (
+          <WalletImageWrapper key={image.name} active={connectedWallet === image.name} title={image.name}>
+            <WalletImage src={image.src} alt={image.name} />
+            {connectedWallet === image.name && <Checkmark className="ph-bold ph-check" />}
+          </WalletImageWrapper>
+        ))}
+      </ImagesWrapper>
+      <Widget
+        src="${REPL_ACCOUNT}/widget/DIG.Button"
+        props={{
+          variant: "primary",
+          label: "Sign In",
+          disabled: context.accountId,
+          href: "/signin",
+        }}
+      />
+    </Card>
+
+    <Card background="#0d0d0f">
+      <Step background="var(--white)" color="var(--sand12)">
+        2
+      </Step>
+      <Title color="var(--sand10)">Log into idOS</Title>
+      <ImageWrapper>
+        <Widget
+          src="${REPL_MOB}/widget/Image"
+          props={{
+            image: {
+              ipfs_cid: "bafkreigb7fwbwomsi2hg3to5tbapsnl43vfp6qdctnqhv5w4et7q5oqtnq",
+            },
+            alt: "log into idOS",
+          }}
+        />
+      </ImageWrapper>
+      <TextWrapper>
+        <Text color="var(--sand10)">
+          All your credentials and preferences on this settings page will be securely stored in a decentralized identity
+          operating system (idOS). Sign in to view your data.
+        </Text>
+        <Text color="var(--sand10)">
+          Learn more about idOS
+          <TextLink href={idOSLearnLink} target="_blank">
+            here
+          </TextLink>
+        </Text>
+      </TextWrapper>
+      <Widget
+        src="${REPL_ACCOUNT}/widget/DIG.Button"
+        props={{
+          variant: "affirmative",
+          label: "Sign In",
+          disabled: !context.accountId || idosConnected,
+          href: createAccountUrl,
+        }}
+      />
+    </Card>
+  </Wrapper>
+);
diff --git a/src/Settings/Identity/Verifications/Index.jsx b/src/Settings/Identity/Verifications/Index.jsx
@@ -38,26 +38,20 @@ const IconWrapper = styled.div`
 const Icon = styled.i`
   color: ${(p) => p.color ?? "var(--sand11)"};
   font-size: ${(p) => p.size ?? "20px"};
-  ${(p) =>
-    p.fit &&
-    `
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-  `}
 `;
 
 const IconSealUser = () => (
   <IconWrapper background="#f1eefe">
-    <Icon className="ph-fill ph-seal" color="#7C66DC" size="28px" />
-    <Icon className="ph-bold ph-user" color="var(--white)" size="14px" fit />
+    <Widget
+      src="${REPL_ACCOUNT}/widget/Settings.Identity.Verifications.Icon"
+      props={{ type: "i-am-human", size: 28 }}
+    />
   </IconWrapper>
 );
 
 const IconSealCheck = () => (
   <IconWrapper background="#e5fbeb">
-    <Icon className="ph-fill ph-seal-check" color="#3cb179" size="28px" />
+    <Widget src="${REPL_ACCOUNT}/widget/Settings.Identity.Verifications.Icon" props={{ type: "kyc", size: 28 }} />
   </IconWrapper>
 );
 

diff --git a/src/Settings/Identity/Verifications/List.jsx b/src/Settings/Identity/Verifications/List.jsx
@@ -79,14 +79,13 @@ const Icon = styled.i`
 
 const IconSealUser = () => (
   <IconWrapper background="#f1eefe">
-    <Icon className="ph-fill ph-seal" color="#7C66DC" size="18px" />
-    <Icon className="ph-bold ph-user" color="var(--white)" size="8px" fit />
+    <Widget src="${REPL_ACCOUNT}/widget/Settings.Identity.Verifications.Icon" props={{ type: "i-am-human" }} />
   </IconWrapper>
 );
 
 const IconSealCheck = () => (
   <IconWrapper background="#e5fbeb">
-    <Icon className="ph-fill ph-seal-check" color="#3cb179" size="18px" />
+    <Widget src="${REPL_ACCOUNT}/widget/Settings.Identity.Verifications.Icon" props={{ type: "kyc" }} />
   </IconWrapper>
 );