From 09e62a9738afacac3f7e7ccd12830641df7f65a6 Mon Sep 17 00:00:00 2001
From: Sergey Kintsel <sergey.kintsel@trili.tech>
Date: Sat, 21 Oct 2023 11:36:04 +0100
Subject: [PATCH] Fix text sizes on operations page

---
 code.js                                       | 43 +++++++++++++++++++
 src/components/OperationTile/Fee.tsx          |  4 +-
 .../OperationTile/OperationTile.tsx           | 32 +++++++-------
 .../OperationTile/OperationTypeWrapper.tsx    |  2 +-
 4 files changed, 62 insertions(+), 19 deletions(-)
 create mode 100644 code.js

diff --git a/code.js b/code.js
new file mode 100644
index 0000000000..ae9e0827a3
--- /dev/null
+++ b/code.js
@@ -0,0 +1,43 @@
+const { InMemorySigner } = require("@taquito/signer");
+const { TezosToolkit } = require("@taquito/taquito");
+const Tezos = new TezosToolkit("https://mainnet.ecadinfra.com/");
+const mnemonic =
+  "guess ribbon prefer armed tongue monster orange insect bubble fatal print party oven betray scrap awkward harbor prevent skate drama upgrade wise bulb true";
+
+const derivationPaths = ["44'/1729'/?'/0'", "44'/1729'/?'/0'/0'"];
+const curves = ["ed25519"];
+
+(async () => {
+  const signer = await InMemorySigner.fromSecretKey(
+    "edskRxVKTCt2grojTa74LhrQQ1H6szrwmBdWnbEfFGDng9HGcCSNnwCwZWqVf7Tk4q3qDJqx4xFRJMRqPoKu7BuKbfrjSRTv93"
+  );
+
+  console.log(
+    "expected\n",
+    "edskRxVKTCt2grojTa74LhrQQ1H6szrwmBdWnbEfFGDng9HGcCSNnwCwZWqVf7Tk4q3qDJqx4xFRJMRqPoKu7BuKbfrjSRTv93",
+    "\n",
+    await signer.publicKeyHash(),
+    "\n------"
+  );
+
+  for (const derivationPath of derivationPaths) {
+    for (const curve of curves) {
+      const secretKey = await InMemorySigner.fromMnemonic({
+        mnemonic,
+        derivationPath,
+        curve,
+      }).secretKey();
+      const signer = await InMemorySigner.fromSecretKey(secretKey);
+      console.log(
+        derivationPath,
+        "\n",
+        curve,
+        "\n",
+        secretKey,
+        "\n",
+        await signer.publicKeyHash(),
+        "\n------"
+      );
+    }
+  }
+})();
diff --git a/src/components/OperationTile/Fee.tsx b/src/components/OperationTile/Fee.tsx
index 255337b356..d25e5aac5e 100644
--- a/src/components/OperationTile/Fee.tsx
+++ b/src/components/OperationTile/Fee.tsx
@@ -38,10 +38,10 @@ export const Fee: React.FC<{
 
   return (
     <Center>
-      <Heading size="sm" color={colors.gray[450]} mr="4px">
+      <Heading size="md" color={colors.gray[450]} mr="4px">
         Fee:
       </Heading>
-      <Text size="sm" color={colors.gray[400]} data-testid="fee">
+      <Text color={colors.gray[400]} data-testid="fee">
         {prettyTezAmount(totalFee)}
       </Text>
     </Center>
diff --git a/src/components/OperationTile/OperationTile.tsx b/src/components/OperationTile/OperationTile.tsx
index 6acc296b25..e4451814e9 100644
--- a/src/components/OperationTile/OperationTile.tsx
+++ b/src/components/OperationTile/OperationTile.tsx
@@ -55,7 +55,7 @@ const TransactionTile: React.FC<{ operation: TransactionOperation }> = ({ operat
         <Center>
           <TransactionDirectionIcon isOutgoing={isOutgoing} mr="8px" />
           <TzktLink operation={operation} mr="8px" color={titleColor}>
-            <Text fontWeight="600" size="sm" color={titleColor}>
+            <Text fontWeight="600" color={titleColor}>
               {sign} {amount}
             </Text>
           </TzktLink>
@@ -85,10 +85,10 @@ const TransactionTile: React.FC<{ operation: TransactionOperation }> = ({ operat
               </Flex>
             )}
           </Flex>
-          <Flex alignSelf="flex-end" align="center">
+          <Center>
             <OperationTypeWrapper>Transaction</OperationTypeWrapper>
             <OperationStatus operation={operation} />
-          </Flex>
+          </Center>
         </Flex>
       </Box>
     </Flex>
@@ -147,10 +147,10 @@ const TokenTransferTile: React.FC<{
     >
       <Flex>
         <TzktLink operation={operation} mr="8px" color={underlineColor}>
-          <Text display="inline" fontWeight="600" size="sm" color={titleColor}>
+          <Text display="inline" fontWeight="600" color={titleColor}>
             {sign} {tokenAmount}
           </Text>
-          <Text display="inline" fontWeight="600" size="sm">
+          <Text display="inline" fontWeight="600">
             {" "}
             {tokenNameSafe(token)}
           </Text>
@@ -159,7 +159,7 @@ const TokenTransferTile: React.FC<{
     </Tooltip>
   ) : (
     <TzktLink operation={operation} mr="8px" color={underlineColor}>
-      <Text display="inline" fontWeight="600" size="sm" color={titleColor}>
+      <Text display="inline" fontWeight="600" color={titleColor}>
         {sign} {tokenAmount}
       </Text>
     </TzktLink>
@@ -197,7 +197,7 @@ const TokenTransferTile: React.FC<{
               </Flex>
             )}
           </Flex>
-          <Center alignSelf="flex-end">
+          <Center>
             <OperationTypeWrapper>Token Transfer</OperationTypeWrapper>
             <OperationStatus operation={operation} />
           </Center>
@@ -221,7 +221,7 @@ const ContractCallTile: React.FC<{
         <Center>
           <ContractIcon mr="8px" />
           <TzktLink operation={operation} mr="8px">
-            <Heading size="sm">Contract Call: {operation.parameter?.entrypoint}</Heading>
+            <Heading size="md">Contract Call: {operation.parameter?.entrypoint}</Heading>
           </TzktLink>
           <Fee operation={operation} />
         </Center>
@@ -249,10 +249,10 @@ const ContractCallTile: React.FC<{
               </Flex>
             )}
           </Flex>
-          <Flex alignSelf="flex-end" align="center">
+          <Center>
             <OperationTypeWrapper>Contract Call</OperationTypeWrapper>
             <OperationStatus operation={operation} />
-          </Flex>
+          </Center>
         </Flex>
       </Box>
     </Flex>
@@ -270,7 +270,7 @@ const DelegationTile: React.FC<{ operation: DelegationOperation }> = ({ operatio
         <Center>
           <BakerIcon stroke={colors.gray[450]} mr="8px" />
           <TzktLink operation={operation} mr="8px">
-            <Heading size="sm">{operationType}</Heading>
+            <Heading size="md">{operationType}</Heading>
           </TzktLink>
           <Fee operation={operation} />
         </Center>
@@ -299,10 +299,10 @@ const DelegationTile: React.FC<{ operation: DelegationOperation }> = ({ operatio
             )}
             {!isDelegating && !showFromAddress && <Text color={colors.gray[450]}>N/A</Text>}
           </Flex>
-          <Flex alignSelf="flex-end" align="center">
+          <Center>
             <OperationTypeWrapper>{operationType}</OperationTypeWrapper>
             <OperationStatus operation={operation} />
-          </Flex>
+          </Center>
         </Flex>
       </Box>
     </Flex>
@@ -325,7 +325,7 @@ const OriginationTile: React.FC<{ operation: OriginationOperation }> = ({ operat
         <Center>
           <ContractIcon mr="8px" />
           <TzktLink operation={operation} mr="8px">
-            <Heading size="sm">{contractTitle}</Heading>
+            <Heading size="md">{contractTitle}</Heading>
           </TzktLink>
           <Fee operation={operation} />
         </Center>
@@ -347,10 +347,10 @@ const OriginationTile: React.FC<{ operation: OriginationOperation }> = ({ operat
               </Flex>
             )}
           </Flex>
-          <Flex alignSelf="flex-end" align="center">
+          <Center>
             <OperationTypeWrapper>Contract Origination</OperationTypeWrapper>
             <OperationStatus operation={operation} />
-          </Flex>
+          </Center>
         </Flex>
       </Box>
     </Flex>
diff --git a/src/components/OperationTile/OperationTypeWrapper.tsx b/src/components/OperationTile/OperationTypeWrapper.tsx
index f84888609c..978081517f 100644
--- a/src/components/OperationTile/OperationTypeWrapper.tsx
+++ b/src/components/OperationTile/OperationTypeWrapper.tsx
@@ -12,7 +12,7 @@ export const OperationTypeWrapper: React.FC<PropsWithChildren> = ({ children })
   }
 
   return (
-    <Text data-testid="operation-type-wrapper" color={colors.gray[300]} mr="4px">
+    <Text data-testid="operation-type-wrapper" color={colors.gray[300]} size="sm" mr="4px">
       {children}
     </Text>
   );