Resolve conflicts

stellar · Nov 7, 2024 · 6df9431 · 6df9431
2 parents e60fe89 + a775d84
commit 6df9431
Show file tree

Hide file tree

Showing 50 changed files with 1,144 additions and 367 deletions.
diff --git a/src/app/(sidebar)/account/create/page.tsx b/src/app/(sidebar)/account/create/page.tsx
@@ -1,19 +1,22 @@
 "use client";
 
 import { useCallback, useEffect, useRef, useState } from "react";
-import { Card, Text, Button } from "@stellar/design-system";
+import { Card, Text, Button, Icon } from "@stellar/design-system";
 import { Keypair } from "@stellar/stellar-sdk";
 
 import { useStore } from "@/store/useStore";
 import { useFriendBot } from "@/query/useFriendBot";
 import { useQueryClient } from "@tanstack/react-query";
 
 import { useIsTestingNetwork } from "@/hooks/useIsTestingNetwork";
+import { getNetworkHeaders } from "@/helpers/getNetworkHeaders";
 
 import { GenerateKeypair } from "@/components/GenerateKeypair";
 import { ExpandBox } from "@/components/ExpandBox";
 import { SuccessMsg } from "@/components/FriendBot/SuccessMsg";
 import { ErrorMsg } from "@/components/FriendBot/ErrorMsg";
+import { Box } from "@/components/layout/Box";
+import { SaveKeypairModal } from "@/components/SaveKeypairModal";
 
 import "../styles.scss";
 
@@ -23,6 +26,7 @@ export default function CreateAccount() {
 
   const [secretKey, setSecretKey] = useState("");
   const [showAlert, setShowAlert] = useState<boolean>(false);
+  const [isSaveModalVisible, setIsSaveModalVisible] = useState(false);
 
   const queryClient = useQueryClient();
   const IS_TESTING_NETWORK = useIsTestingNetwork();
@@ -49,6 +53,7 @@ export default function CreateAccount() {
       network,
       publicKey: account.publicKey!,
       key: { type: "create" },
+      headers: getNetworkHeaders(network, "horizon"),
     });
 
   useEffect(() => {
@@ -95,32 +100,64 @@ export default function CreateAccount() {
               account signer, and/or as a stellar-core node key.
             </Text>
           </div>
-          <div className="Account__CTA" data-testid="createAccount-buttons">
-            <Button
-              disabled={isLoading || isFetching}
-              size="md"
-              variant="secondary"
-              onClick={generateKeypair}
+          <Box
+            gap="sm"
+            direction="row"
+            justify="space-between"
+            wrap="wrap"
+            data-testid="createAccount-buttons"
+            addlClassName="Account__create__buttons"
+          >
+            <Box
+              gap="sm"
+              direction="row"
+              wrap="wrap"
+              addlClassName="Account__create__buttons__group"
             >
-              Generate keypair
-            </Button>
-
-            {IS_TESTING_NETWORK || IS_CUSTOM_NETWORK_WITH_HORIZON ? (
               <Button
+                disabled={isLoading || isFetching}
                 size="md"
-                disabled={!account.publicKey || isLoading}
-                variant="tertiary"
-                isLoading={isLoading || isFetching}
-                onClick={() => {
-                  resetQuery();
-                  refetch();
-                }}
-                data-testid="fundAccount-button"
+                variant="secondary"
+                onClick={generateKeypair}
               >
-                Fund account with Friendbot
+                Generate keypair
               </Button>
-            ) : null}
-          </div>
+
+              <>
+                {IS_TESTING_NETWORK ? (
+                  <Button
+                    disabled={!account.publicKey || isLoading || isFetching}
+                    size="md"
+                    variant="tertiary"
+                    icon={<Icon.Save01 />}
+                    onClick={() => {
+                      setIsSaveModalVisible(true);
+                    }}
+                  >
+                    Save Keypair
+                  </Button>
+                ) : null}
+              </>
+            </Box>
+
+            <>
+              {IS_TESTING_NETWORK || IS_CUSTOM_NETWORK_WITH_HORIZON ? (
+                <Button
+                  size="md"
+                  disabled={!account.publicKey || isLoading}
+                  variant="tertiary"
+                  isLoading={isLoading || isFetching}
+                  onClick={() => {
+                    resetQuery();
+                    refetch();
+                  }}
+                  data-testid="fundAccount-button"
+                >
+                  Fund account with Friendbot
+                </Button>
+              ) : null}
+            </>
+          </Box>
 
           {Boolean(account.publicKey) && (
             <ExpandBox isExpanded={Boolean(account.publicKey)} offsetTop="xl">
@@ -150,6 +187,16 @@ export default function CreateAccount() {
           setShowAlert(false);
         }}
       />
+
+      <SaveKeypairModal
+        type="save"
+        isVisible={isSaveModalVisible}
+        onClose={() => {
+          setIsSaveModalVisible(false);
+        }}
+        publicKey={account.publicKey!}
+        secretKey={secretKey}
+      />
     </div>
   );
 }
diff --git a/src/app/(sidebar)/account/fund/page.tsx b/src/app/(sidebar)/account/fund/page.tsx
@@ -6,6 +6,7 @@ import { useQueryClient } from "@tanstack/react-query";
 
 import { useFriendBot } from "@/query/useFriendBot";
 import { useStore } from "@/store/useStore";
+import { getNetworkHeaders } from "@/helpers/getNetworkHeaders";
 
 import { validate } from "@/validate";
 
@@ -38,6 +39,7 @@ export default function FundAccount() {
     network,
     publicKey: generatedPublicKey,
     key: { type: "fund" },
+    headers: getNetworkHeaders(network, "horizon"),
   });
 
   const queryClient = useQueryClient();

diff --git a/src/app/(sidebar)/account/muxed-create/page.tsx b/src/app/(sidebar)/account/muxed-create/page.tsx
@@ -1,14 +1,15 @@
 "use client";
 
 import { useState } from "react";
-import { Alert, Button, Card, Input, Text } from "@stellar/design-system";
+import { Alert, Button, Card, Input, Link, Text } from "@stellar/design-system";
 
 import { useStore } from "@/store/useStore";
 
 import { ExpandBox } from "@/components/ExpandBox";
 import { MuxedAccountResult } from "@/components/MuxedAccountResult";
 import { PubKeyPicker } from "@/components/FormElements/PubKeyPicker";
 import { SdsLink } from "@/components/SdsLink";
+import { WithInfoText } from "@/components/WithInfoText";
 
 import { muxedAccount } from "@/helpers/muxedAccount";
 
@@ -68,9 +69,11 @@ export default function CreateMuxedAccount() {
       <Card>
         <div className="Account__card">
           <div className="CardText">
-            <Text size="lg" as="h1" weight="medium">
-              Create Multiplexed Account
-            </Text>
+            <WithInfoText href="https://developers.stellar.org/docs/learn/encyclopedia/transactions-specialized/pooled-accounts-muxed-accounts-memos">
+              <Text size="lg" as="h1" weight="medium">
+                Create Multiplexed Account
+              </Text>
+            </WithInfoText>
 
             <Text size="sm" as="p">
               A muxed (or multiplexed) account (defined in{" "}
@@ -165,6 +168,11 @@ export default function CreateMuxedAccount() {
         title="Muxed accounts are uncommon"
       >
         Don’t use in a production environment unless you know what you’re doing.
+        Read more about Muxed accounts{" "}
+        <Link href="https://developers.stellar.org/docs/learn/encyclopedia/transactions-specialized/pooled-accounts-muxed-accounts-memos#muxed-accounts">
+          here
+        </Link>
+        .
       </Alert>
 
       {Boolean(sdkError) && (

diff --git a/src/app/(sidebar)/account/muxed-parse/page.tsx b/src/app/(sidebar)/account/muxed-parse/page.tsx
@@ -1,13 +1,14 @@
 "use client";
 
 import { useState } from "react";
-import { Alert, Card, Text, Button } from "@stellar/design-system";
+import { Alert, Card, Link, Text, Button } from "@stellar/design-system";
 
 import { useStore } from "@/store/useStore";
 
 import { ExpandBox } from "@/components/ExpandBox";
 import { PubKeyPicker } from "@/components/FormElements/PubKeyPicker";
 import { MuxedAccountResult } from "@/components/MuxedAccountResult";
+import { WithInfoText } from "@/components/WithInfoText";
 
 import { muxedAccount } from "@/helpers/muxedAccount";
 
@@ -59,9 +60,11 @@ export default function ParseMuxedAccount() {
       <Card>
         <div className="Account__card">
           <div className="CardText">
-            <Text size="lg" as="h1" weight="medium">
-              Get Muxed Account from M address
-            </Text>
+            <WithInfoText href="https://developers.stellar.org/docs/learn/encyclopedia/transactions-specialized/pooled-accounts-muxed-accounts-memos">
+              <Text size="lg" as="h1" weight="medium">
+                Get Muxed Account from M address
+              </Text>
+            </WithInfoText>
           </div>
 
           <PubKeyPicker
@@ -126,6 +129,11 @@ export default function ParseMuxedAccount() {
         title="Muxed accounts are uncommon"
       >
         Don’t use in a production environment unless you know what you’re doing.
+        Read more about Muxed accounts{" "}
+        <Link href="https://developers.stellar.org/docs/learn/encyclopedia/transactions-specialized/pooled-accounts-muxed-accounts-memos#muxed-accounts">
+          here
+        </Link>
+        .
       </Alert>
 
       {Boolean(sdkError) && (