Merge pull request #438 from trilitech/add-js-value-wrap

Add JsValueWrap component
trilitech · Sep 13, 2023 · 6717de7 · 6717de7
2 parents ea39150 + 7df8d4f
commit 6717de7
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 26 deletions.
diff --git a/...mponents/AccountDrawer/AssetsPanel/MultisigPendingAccordion/MultisigDecodedOperations.tsx b/...mponents/AccountDrawer/AssetsPanel/MultisigPendingAccordion/MultisigDecodedOperations.tsx
@@ -5,13 +5,12 @@ import {
   AccordionItem,
   AccordionPanel,
   Box,
-  Card,
-  CardBody,
 } from "@chakra-ui/react";
 import { parseRawMichelson } from "../../../../multisig/decode/decodeLambda";
 import { UnrecognizedMichelsonError } from "../../../../multisig/decode/UnrecognizedMichelsonError";
 import { MultisigAccount } from "../../../../types/Account";
 import MultisigDecodedOperationItem from "./MultisigDecodedOperationItem";
+import JsValueWrap from "../../JsValueWrap";
 
 const MultisigDecodedOperations: React.FC<{
   rawActions: string;
@@ -51,17 +50,7 @@ const UnrecognizedOperationAccordion: React.FC<{ unrecoginizedRawActions: string
           </AccordionButton>
         </h2>
         <AccordionPanel pb={3} h="400px" overflowY="scroll">
-          <Card bg="umami.gray.700" borderRadius="5px">
-            <pre
-              style={{
-                whiteSpace: "pre-wrap",
-                fontSize: "12px",
-                lineHeight: "18px",
-              }}
-            >
-              <CardBody>{JSON.stringify(JSON.parse(unrecoginizedRawActions), null, 1)}</CardBody>
-            </pre>
-          </Card>
+          <JsValueWrap value={JSON.parse(unrecoginizedRawActions)} space={1} />
         </AccordionPanel>
       </AccordionItem>
     </Accordion>

diff --git a/src/components/AccountDrawer/JsValueWrap.tsx b/src/components/AccountDrawer/JsValueWrap.tsx
@@ -0,0 +1,23 @@
+import { Card, CardBody } from "@chakra-ui/react";
+import colors from "../../style/colors";
+
+// Wrapper for any JavaScript value
+const JsValueWrap: React.FC<{ value: any; space?: number }> = ({ value, space = 2 }) => {
+  return (
+    <Card bg={colors.gray[700]} borderRadius="5px">
+      <CardBody>
+        <pre
+          style={{
+            whiteSpace: "pre-wrap",
+            fontSize: "12px",
+            lineHeight: "18px",
+          }}
+        >
+          {JSON.stringify(value, null, space)}
+        </pre>
+      </CardBody>
+    </Card>
+  );
+};
+
+export default JsValueWrap;
diff --git a/src/views/nfts/NFTDrawerCard.tsx b/src/views/nfts/NFTDrawerCard.tsx
@@ -24,6 +24,7 @@ import { useContext } from "react";
 import SendNFTForm from "../../components/SendFlow/NFT/FormPage";
 import { useGetOwnedAccount } from "../../utils/hooks/accountHooks";
 import { artifactUri } from "../../types/Token";
+import JsValueWrap from "../../components/AccountDrawer/JsValueWrap";
 
 const NFTDrawerCard = ({ nft, ownerPkh }: { nft: NFTBalance; ownerPkh: RawPkh }) => {
   const url = getIPFSurl(artifactUri(nft));
@@ -97,19 +98,7 @@ const NFTDrawerCard = ({ nft, ownerPkh }: { nft: NFTBalance; ownerPkh: RawPkh })
             </AccordionButton>
           </h2>
           <AccordionPanel>
-            <Card bg="umami.gray.700" borderRadius="5px">
-              <CardBody>
-                <pre
-                  style={{
-                    whiteSpace: "pre-wrap",
-                    fontSize: "12px",
-                    lineHeight: "18px",
-                  }}
-                >
-                  {JSON.stringify(nft, null, 2)}
-                </pre>
-              </CardBody>
-            </Card>
+            <JsValueWrap value={nft} />
           </AccordionPanel>
         </AccordionItem>
       </Accordion>