updating based on recommendations

stellar · Mar 27, 2024 · adf59ad · adf59ad
1 parent 3384166
commit adf59ad
Show file tree

Hide file tree

Showing 10 changed files with 138 additions and 199 deletions.
diff --git a/.nvmrc b/.nvmrc
@@ -1 +1 @@
-v18
+v18.19.0
diff --git a/src/app/(sidebar)/account/create/page.tsx b/src/app/(sidebar)/account/create/page.tsx
@@ -27,37 +27,42 @@ export default function CreateAccount() {
   return (
     <div className="Account">
       <Card>
-        <div className="Account__card">
-          <div className="CardText">
-            <Text size="lg" as="h1" weight="medium">
-              Keypair Generator
-            </Text>
+        <div className="Account__content">
+          <div className="Account__card">
+            <div className="CardText">
+              <Text size="lg" as="h1" weight="medium">
+                Keypair Generator
+              </Text>
 
-            <Text size="sm" as="p">
-              These keypairs can be used on the Stellar network where one is
-              required. For example, it can be used as an account master key,
-              account signer, and/or as a stellar-core node key.
-            </Text>
-          </div>
-          <div className="Account__CTA">
-            <Button size="md" variant="secondary" onClick={generateKeypair}>
-              Generate keypair
-            </Button>
+              <Text size="sm" as="p">
+                These keypairs can be used on the Stellar network where one is
+                required. For example, it can be used as an account master key,
+                account signer, and/or as a stellar-core node key.
+              </Text>
+            </div>
+            <div className="Account__CTA">
+              <Button size="md" variant="secondary" onClick={generateKeypair}>
+                Generate keypair
+              </Button>
 
-            <Button
-              size="md"
-              variant="tertiary"
-              onClick={() => router.push(Routes.ACCOUNT_FUND)}
-            >
-              Fund account with Friendbot
-            </Button>
+              <Button
+                size="md"
+                variant="tertiary"
+                onClick={() => router.push(Routes.ACCOUNT_FUND)}
+              >
+                Fund account with Friendbot
+              </Button>
+            </div>
           </div>
         </div>
+
         <ExpandBox isExpanded={Boolean(account.publicKey)}>
-          <GenerateKeypair
-            publicKey={account.publicKey}
-            secretKey={secretKey}
-          />
+          <div className="Account__content__inputs">
+            <GenerateKeypair
+              publicKey={account.publicKey}
+              secretKey={secretKey}
+            />
+          </div>
         </ExpandBox>
       </Card>
     </div>

diff --git a/src/app/(sidebar)/account/muxed-create/page.tsx b/src/app/(sidebar)/account/muxed-create/page.tsx
@@ -1,13 +1,11 @@
 "use client";
 
 import { useState } from "react";
-import { Alert, Card, Text, Button } from "@stellar/design-system";
+import { Alert, Button, Card, Input, Text } from "@stellar/design-system";
 
 import { useStore } from "@/store/useStore";
 
 import { ExpandBox } from "@/components/ExpandBox";
-import { MuxedIdPicker } from "@/components/FormElements/MuxedIdPicker";
-import { MuxedKeyPicker } from "@/components/FormElements/MuxedKeyPicker";
 import { PubKeyPicker } from "@/components/FormElements/PubKeyPicker";
 import { SdsLink } from "@/components/SdsLink";
 import { muxedAccount } from "@/helpers/muxedAccount";
@@ -87,19 +85,27 @@ export default function CreateMuxedAccount() {
                 setReset(true);
                 setBaseAddress(e.target.value);
 
-                const error = validate.publicKey(e.target.value);
+                let error = "";
 
-                setBaseFieldErrorMessage(error || "");
+                if (e.target.value.startsWith("M")) {
+                  error = "Base account address should start with G";
+                } else {
+                  error = validate.publicKey(e.target.value) || "";
+                }
+
+                setBaseFieldErrorMessage(error);
               }}
               error={baseFieldErrorMessage}
               copyButton={{
                 position: "right",
               }}
             />
 
-            <MuxedIdPicker
-              id="muxed-account-id"
-              label="Muxed Account Id"
+            <Input
+              id="muxed-account-iD"
+              fieldSize="md"
+              placeholder="Ex: 1"
+              label="Muxed Account ID"
               value={muxedId}
               onChange={(e) => {
                 setReset(true);
@@ -116,7 +122,11 @@ export default function CreateMuxedAccount() {
 
             <div className="Account__CTA">
               <Button
-                disabled={!baseAddress || Boolean(baseFieldErrorMessage)}
+                disabled={
+                  !baseAddress ||
+                  !muxedId ||
+                  Boolean(baseFieldErrorMessage || muxedFieldError)
+                }
                 size="md"
                 variant={"secondary"}
                 onClick={generateMuxedAccount}
@@ -125,48 +135,49 @@ export default function CreateMuxedAccount() {
               </Button>
             </div>
           </div>
-
-          <ExpandBox
-            isExpanded={
-              !isReset && Boolean(account.generatedMuxedAccount.muxedAddress)
-            }
-          >
-            <div className="Account__content__inputs">
-              <PubKeyPicker
-                id="muxed-public-key-result"
-                label="Base Account G Address"
-                value={account.generatedMuxedAccount.baseAddress}
-                error=""
-                readOnly={true}
-                copyButton={{
-                  position: "right",
-                }}
-              />
-
-              <MuxedIdPicker
-                id="muxed-account-id-result"
-                label="Muxed Account Id"
-                value={account.generatedMuxedAccount.id}
-                error=""
-                readOnly={true}
-                copyButton={{
-                  position: "right",
-                }}
-              />
-
-              <MuxedKeyPicker
-                id="muxed-account-address-result"
-                label="Muxed Account M Address"
-                value={account.generatedMuxedAccount.muxedAddress}
-                error=""
-                readOnly={true}
-                copyButton={{
-                  position: "right",
-                }}
-              />
-            </div>
-          </ExpandBox>
         </div>
+
+        <ExpandBox
+          isExpanded={
+            !isReset && Boolean(account.generatedMuxedAccount.muxedAddress)
+          }
+        >
+          <div className="Account__content__inputs Account__content__inputs--grey">
+            <PubKeyPicker
+              id="muxed-public-key-result"
+              label="Base Account G Address"
+              value={account.generatedMuxedAccount.baseAddress || ""}
+              error=""
+              readOnly={true}
+              copyButton={{
+                position: "right",
+              }}
+            />
+
+            <Input
+              id="muxed-account-id-result"
+              fieldSize="md"
+              label="Muxed Account ID"
+              value={account.generatedMuxedAccount.id}
+              error=""
+              readOnly={true}
+              copyButton={{
+                position: "right",
+              }}
+            />
+
+            <PubKeyPicker
+              id="muxed-account-address-result"
+              label="Muxed Account M Address"
+              value={account.generatedMuxedAccount.muxedAddress || ""}
+              error=""
+              readOnly={true}
+              copyButton={{
+                position: "right",
+              }}
+            />
+          </div>
+        </ExpandBox>
       </Card>
 
       <Alert

diff --git a/src/app/(sidebar)/account/muxed-parse/page.tsx b/src/app/(sidebar)/account/muxed-parse/page.tsx
@@ -1,13 +1,11 @@
 "use client";
 
 import { useState } from "react";
-import { Alert, Card, Text, Button } from "@stellar/design-system";
+import { Alert, Card, Input, Text, Button } from "@stellar/design-system";
 
 import { useStore } from "@/store/useStore";
 
 import { ExpandBox } from "@/components/ExpandBox";
-import { MuxedIdPicker } from "@/components/FormElements/MuxedIdPicker";
-import { MuxedKeyPicker } from "@/components/FormElements/MuxedKeyPicker";
 import { PubKeyPicker } from "@/components/FormElements/PubKeyPicker";
 
 import { muxedAccount } from "@/helpers/muxedAccount";
@@ -63,9 +61,10 @@ export default function ParseMuxedAccount() {
               </Text>
             </div>
 
-            <MuxedKeyPicker
+            <PubKeyPicker
               id="muxed-account-address"
               label="Muxed Account M Address"
+              placeholder="Ex: MBRWSVNURRYVIYSWLRFQ5AAAUWPKOZZNZVVVIXHFGUSGIRVKLVIDYAAAAAAAAAAD5GJ4U"
               value={muxedAddress}
               error={muxedFieldError}
               copyButton={{
@@ -75,8 +74,15 @@ export default function ParseMuxedAccount() {
                 setReset(true);
                 setMuxedAddress(e.target.value);
 
-                const error = validate.publicKey(e.target.value);
-                setMuxedFieldError(error || "");
+                let error = "";
+
+                if (e.target.value.startsWith("G")) {
+                  error = "Muxed account address should start with M";
+                } else {
+                  error = validate.publicKey(e.target.value) || "";
+                }
+
+                setMuxedFieldError(error);
               }}
             />
 
@@ -106,17 +112,19 @@ export default function ParseMuxedAccount() {
               <PubKeyPicker
                 id="muxed-public-key-result"
                 label="Base Account G Address"
-                value={account.parsedMuxedAccount.baseAddress}
+                value={account.parsedMuxedAccount.baseAddress || ""}
                 error=""
                 readOnly={true}
                 copyButton={{
                   position: "right",
                 }}
               />
 
-              <MuxedIdPicker
+              <Input
                 id="muxed-account-id-result"
+                fieldSize="md"
                 label="Muxed Account Id"
+                placeholder="Ex: 1"
                 value={account.parsedMuxedAccount.id}
                 error=""
                 readOnly={true}
@@ -125,8 +133,9 @@ export default function ParseMuxedAccount() {
                 }}
               />
 
-              <MuxedIdPicker
+              <Input
                 id="muxed-account-address-result"
+                fieldSize="md"
                 label="Muxed Account M Address"
                 value={account.parsedMuxedAccount.muxedAddress}
                 error=""

diff --git a/src/app/(sidebar)/account/styles.scss b/src/app/(sidebar)/account/styles.scss
@@ -24,26 +24,23 @@
     display: flex;
     align-items: flex-start;
     flex-direction: column;
-    margin-top: pxToRem(24px);
     gap: pxToRem(16px);
 
     .Input__side-element--right {
       cursor: pointer;
     }
   }
 
-  &__content {
+  &__content__inputs {
     display: flex;
     flex-direction: column;
-    gap: pxToRem(24px);
+    gap: pxToRem(16px);
+    margin-top: pxToRem(24px);
 
-    &__inputs {
-      display: flex;
-      flex-direction: column;
-      gap: pxToRem(16px);
-      padding: pxToRem(16px);
+    &--grey {
       background-color: var(--sds-clr-gray-03);
       border-radius: pxToRem(8px);
+      padding: pxToRem(16px);
     }
   }
 }
diff --git a/src/components/FormElements/MuxedIdPicker.tsx b/src/components/FormElements/MuxedIdPicker.tsx