copyable orderly private key

OrderlyNetwork · May 27, 2024 · b841761 · b841761
1 parent e3d67ce
commit b841761
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 4 deletions.
diff --git a/src/Account.tsx b/src/Account.tsx
@@ -1,10 +1,11 @@
 import { getPublicKeyAsync } from '@noble/ed25519';
-import { Button, Card, Container, Flex, Heading, Text } from '@radix-ui/themes';
+import { Button, Card, Container, Flex, Heading, IconButton, Text } from '@radix-ui/themes';
 import { useConnectWallet, useSetChain } from '@web3-onboard/react';
 import { encodeBase58 } from 'ethers';
 import { FC, useEffect, useState } from 'react';
 
 import { registerAccount, addOrderlyKey, getBaseUrl } from './helpers';
+import { CopyIcon } from '@radix-ui/react-icons';
 
 export const Account: FC<{
   brokerId: string;
@@ -43,6 +44,8 @@ export const Account: FC<{
     run();
   }, [connectedChain, accountId]);
 
+  const privateKey = orderlyKey ? `ed25519:${encodeBase58(orderlyKey)}` : null
+
   return (
     <Flex style={{ margin: '1.5rem' }} gap="4" align="center" justify="center" direction="column">
       <Heading>Account</Heading>
@@ -83,12 +86,32 @@ export const Account: FC<{
               </Container>
               <Container>
                 <Text as="div" size="2" weight="bold">
-                  Orderly Key:
+                  Orderly Public Key:
                 </Text>
                 <Text as="div" size="2">
                   {publicKey ?? '-'}
                 </Text>
               </Container>
+              <Container>
+                <Text as="div" size="2" weight="bold">
+                  Orderly Private Key:
+                </Text>
+                <Text as="div" size="2">
+                  {privateKey ? `${privateKey.slice(0, 12)}...${privateKey.slice(-4)}`:  '-'}
+                </Text>
+                {orderlyKey &&
+                  <IconButton
+                    size="1"
+                    variant="soft"
+                    onClick={async () => {
+                      if (privateKey == null) return
+                      navigator.clipboard.writeText(privateKey);
+                    }}
+                  >
+                    <CopyIcon height="12" />
+                  </IconButton>
+                }
+              </Container>
             </Flex>
           </>
         ) : (

diff --git a/src/DelegateSigner.tsx b/src/DelegateSigner.tsx
@@ -1,5 +1,5 @@
 import { getPublicKeyAsync } from '@noble/ed25519';
-import { Button, Card, Container, Flex, Heading, Text, TextField } from '@radix-ui/themes';
+import { Button, Card, Container, Flex, Heading, IconButton, Text, TextField } from '@radix-ui/themes';
 import { useConnectWallet, useSetChain } from '@web3-onboard/react';
 import { encodeBase58 } from 'ethers';
 import { FC, useEffect, useState } from 'react';
@@ -12,6 +12,7 @@ import {
   registerExampleDelegateSigner,
   isTestnet
 } from './helpers';
+import { CopyIcon } from '@radix-ui/react-icons';
 
 export const DelegateSigner: FC<{
   brokerId: string;
@@ -47,6 +48,8 @@ export const DelegateSigner: FC<{
     run();
   }, [orderlyKey]);
 
+  const privateKey = orderlyKey ? `ed25519:${encodeBase58(orderlyKey)}` : null
+
   return (
     <Flex style={{ margin: '1.5rem' }} gap="4" align="center" justify="center" direction="column">
       <Heading>Delegate Signer</Heading>
@@ -110,12 +113,32 @@ export const DelegateSigner: FC<{
               </Container>
               <Container>
                 <Text as="div" size="2" weight="bold">
-                  Orderly Key:
+                  Orderly Public Key:
                 </Text>
                 <Text as="div" size="2">
                   {publicKey ?? '-'}
                 </Text>
               </Container>
+              <Container>
+                <Text as="div" size="2" weight="bold">
+                  Orderly Private Key:
+                </Text>
+                <Text as="div" size="2">
+                  {privateKey ? `${privateKey.slice(0, 12)}...${privateKey.slice(-4)}`:  '-'}
+                </Text>
+                {orderlyKey &&
+                  <IconButton
+                    size="1"
+                    variant="soft"
+                    onClick={async () => {
+                      if (privateKey == null) return
+                      navigator.clipboard.writeText(privateKey);
+                    }}
+                  >
+                    <CopyIcon height="12" />
+                  </IconButton>
+                }
+              </Container>
             </Flex>
           </>
         ) : (