select scope for orderly key

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

Hide file tree

Showing 14 changed files with 2,027 additions and 2,489 deletions.
diff --git a/package.json b/package.json
@@ -33,7 +33,7 @@
     "@typescript-eslint/eslint-plugin": "^7.10.0",
     "@typescript-eslint/parser": "^7.10.0",
     "@vitejs/plugin-react": "^4.3.0",
-    "eslint": "^9.3.0",
+    "eslint": "^8",
     "eslint-config-prettier": "^9.1.0",
     "eslint-config-typescript": "^3.0.0",
     "eslint-plugin-import": "^2.29.1",

diff --git a/src/Account.tsx b/src/Account.tsx
@@ -1,11 +1,20 @@
 import { getPublicKeyAsync } from '@noble/ed25519';
-import { Button, Card, Container, Flex, Heading, IconButton, Text } from '@radix-ui/themes';
+import { CopyIcon } from '@radix-ui/react-icons';
+import {
+  Button,
+  Card,
+  Container,
+  DropdownMenu,
+  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';
+import { registerAccount, addOrderlyKey, getBaseUrl, Scope } from './helpers';
 
 export const Account: FC<{
   brokerId: string;
@@ -15,6 +24,7 @@ export const Account: FC<{
 }> = ({ brokerId, accountId, orderlyKey, setOrderlyKey }) => {
   const [publicKey, setPublicKey] = useState<string>();
   const [isRegistered, setIsRegistered] = useState<boolean>();
+  const [scope, setScope] = useState<Scope>('read,trading');
 
   const [{ wallet }] = useConnectWallet();
   const [{ connectedChain }] = useSetChain();
@@ -44,7 +54,7 @@ export const Account: FC<{
     run();
   }, [connectedChain, accountId]);
 
-  const privateKey = orderlyKey ? `ed25519:${encodeBase58(orderlyKey)}` : null
+  const privateKey = orderlyKey ? `ed25519:${encodeBase58(orderlyKey)}` : null;
 
   return (
     <Flex style={{ margin: '1.5rem' }} gap="4" align="center" justify="center" direction="column">
@@ -97,20 +107,20 @@ export const Account: FC<{
                   Orderly Private Key:
                 </Text>
                 <Text as="div" size="2">
-                  {privateKey ? `${privateKey.slice(0, 12)}...${privateKey.slice(-4)}`:  '-'}
+                  {privateKey ? `${privateKey.slice(0, 12)}...${privateKey.slice(-4)}` : '-'}
                 </Text>
-                {orderlyKey &&
+                {orderlyKey && (
                   <IconButton
                     size="1"
                     variant="soft"
                     onClick={async () => {
-                      if (privateKey == null) return
+                      if (privateKey == null) return;
                       navigator.clipboard.writeText(privateKey);
                     }}
                   >
                     <CopyIcon height="12" />
                   </IconButton>
-                }
+                )}
               </Container>
             </Flex>
           </>
@@ -132,11 +142,39 @@ export const Account: FC<{
         Register Account
       </Button>
 
+      <Flex direction="column">
+        <span>Scope:</span>
+        <DropdownMenu.Root>
+          <DropdownMenu.Trigger>
+            <Button variant="soft">
+              {scope}
+              <DropdownMenu.TriggerIcon />
+            </Button>
+          </DropdownMenu.Trigger>
+          <DropdownMenu.Content>
+            <DropdownMenu.Item
+              onSelect={() => {
+                setScope('read');
+              }}
+            >
+              read
+            </DropdownMenu.Item>
+            <DropdownMenu.Item
+              onSelect={() => {
+                setScope('read,trading');
+              }}
+            >
+              read,trading
+            </DropdownMenu.Item>
+          </DropdownMenu.Content>
+        </DropdownMenu.Root>
+      </Flex>
+
       <Button
         disabled={!wallet || !connectedChain || !brokerId}
         onClick={async () => {
           if (!wallet || !connectedChain || !brokerId) return;
-          const key = await addOrderlyKey(wallet, connectedChain.id, brokerId);
+          const key = await addOrderlyKey(wallet, connectedChain.id, brokerId, scope);
           setOrderlyKey(key);
         }}
       >

diff --git a/src/DelegateSigner.tsx b/src/DelegateSigner.tsx
@@ -1,5 +1,16 @@
 import { getPublicKeyAsync } from '@noble/ed25519';
-import { Button, Card, Container, Flex, Heading, IconButton, Text, TextField } from '@radix-ui/themes';
+import { CopyIcon } from '@radix-ui/react-icons';
+import {
+  Button,
+  Card,
+  Container,
+  DropdownMenu,
+  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';
@@ -10,9 +21,9 @@ import {
   announceDelegateSigner,
   delegateAddOrderlyKey,
   registerExampleDelegateSigner,
-  isTestnet
+  isTestnet,
+  Scope
 } from './helpers';
-import { CopyIcon } from '@radix-ui/react-icons';
 
 export const DelegateSigner: FC<{
   brokerId: string;
@@ -33,6 +44,7 @@ export const DelegateSigner: FC<{
 }) => {
   const [txHash, setTxHash] = useState<string>('');
   const [publicKey, setPublicKey] = useState<string>();
+  const [scope, setScope] = useState<Scope>('read,trading');
 
   const [{ wallet }] = useConnectWallet();
   const [{ connectedChain }] = useSetChain();
@@ -48,7 +60,7 @@ export const DelegateSigner: FC<{
     run();
   }, [orderlyKey]);
 
-  const privateKey = orderlyKey ? `ed25519:${encodeBase58(orderlyKey)}` : null
+  const privateKey = orderlyKey ? `ed25519:${encodeBase58(orderlyKey)}` : null;
 
   return (
     <Flex style={{ margin: '1.5rem' }} gap="4" align="center" justify="center" direction="column">
@@ -124,20 +136,20 @@ export const DelegateSigner: FC<{
                   Orderly Private Key:
                 </Text>
                 <Text as="div" size="2">
-                  {privateKey ? `${privateKey.slice(0, 12)}...${privateKey.slice(-4)}`:  '-'}
+                  {privateKey ? `${privateKey.slice(0, 12)}...${privateKey.slice(-4)}` : '-'}
                 </Text>
-                {orderlyKey &&
+                {orderlyKey && (
                   <IconButton
                     size="1"
                     variant="soft"
                     onClick={async () => {
-                      if (privateKey == null) return
+                      if (privateKey == null) return;
                       navigator.clipboard.writeText(privateKey);
                     }}
                   >
                     <CopyIcon height="12" />
                   </IconButton>
-                }
+                )}
               </Container>
             </Flex>
           </>
@@ -197,6 +209,34 @@ export const DelegateSigner: FC<{
         </Button>
       </Flex>
 
+      <Flex direction="column">
+        <span>Scope:</span>
+        <DropdownMenu.Root>
+          <DropdownMenu.Trigger>
+            <Button variant="soft">
+              {scope}
+              <DropdownMenu.TriggerIcon />
+            </Button>
+          </DropdownMenu.Trigger>
+          <DropdownMenu.Content>
+            <DropdownMenu.Item
+              onSelect={() => {
+                setScope('read');
+              }}
+            >
+              read
+            </DropdownMenu.Item>
+            <DropdownMenu.Item
+              onSelect={() => {
+                setScope('read,trading');
+              }}
+            >
+              read,trading
+            </DropdownMenu.Item>
+          </DropdownMenu.Content>
+        </DropdownMenu.Root>
+      </Flex>
+
       <Button
         disabled={!wallet || !connectedChain || !brokerId}
         onClick={async () => {
@@ -206,7 +246,8 @@ export const DelegateSigner: FC<{
             connectedChain.id,
             brokerId,
             contractAddress,
-            accountId
+            accountId,
+            scope
           );
           setOrderlyKey(key);
         }}

diff --git a/src/abi/DelegateSigner.ts b/src/abi/DelegateSigner.ts
@@ -11,42 +11,42 @@ import type {
   AddressLike,
   ContractRunner,
   ContractMethod,
-  Listener,
-} from "ethers";
+  Listener
+} from 'ethers';
 import type {
   TypedContractEvent,
   TypedDeferredTopicFilter,
   TypedEventLog,
   TypedListener,
-  TypedContractMethod,
-} from "./common";
+  TypedContractMethod
+} from './common';
 
 export declare namespace VaultTypes {
   export type VaultDelegateStruct = {
     brokerHash: BytesLike;
     delegateSigner: AddressLike;
   };
 
-  export type VaultDelegateStructOutput = [
-    brokerHash: string,
-    delegateSigner: string
-  ] & { brokerHash: string; delegateSigner: string };
+  export type VaultDelegateStructOutput = [brokerHash: string, delegateSigner: string] & {
+    brokerHash: string;
+    delegateSigner: string;
+  };
 }
 
 export interface DelegateSignerInterface extends Interface {
-  getFunction(nameOrSignature: "delegate" | "execAction"): FunctionFragment;
+  getFunction(nameOrSignature: 'delegate' | 'execAction'): FunctionFragment;
 
   encodeFunctionData(
-    functionFragment: "delegate",
+    functionFragment: 'delegate',
     values: [AddressLike, VaultTypes.VaultDelegateStruct]
   ): string;
   encodeFunctionData(
-    functionFragment: "execAction",
+    functionFragment: 'execAction',
     values: [AddressLike, BigNumberish, BytesLike]
   ): string;
 
-  decodeFunctionResult(functionFragment: "delegate", data: BytesLike): Result;
-  decodeFunctionResult(functionFragment: "execAction", data: BytesLike): Result;
+  decodeFunctionResult(functionFragment: 'delegate', data: BytesLike): Result;
+  decodeFunctionResult(functionFragment: 'execAction', data: BytesLike): Result;
 }
 
 export interface DelegateSigner extends BaseContract {
@@ -88,39 +88,35 @@ export interface DelegateSigner extends BaseContract {
     event: TCEvent
   ): Promise<Array<TypedListener<TCEvent>>>;
   listeners(eventName?: string): Promise<Array<Listener>>;
-  removeAllListeners<TCEvent extends TypedContractEvent>(
-    event?: TCEvent
-  ): Promise<this>;
+  removeAllListeners<TCEvent extends TypedContractEvent>(event?: TCEvent): Promise<this>;
 
   delegate: TypedContractMethod<
     [vault: AddressLike, data: VaultTypes.VaultDelegateStruct],
     [void],
-    "nonpayable"
+    'nonpayable'
   >;
 
   execAction: TypedContractMethod<
     [to: AddressLike, value: BigNumberish, action: BytesLike],
     [boolean],
-    "nonpayable"
+    'nonpayable'
   >;
 
-  getFunction<T extends ContractMethod = ContractMethod>(
-    key: string | FunctionFragment
-  ): T;
+  getFunction<T extends ContractMethod = ContractMethod>(key: string | FunctionFragment): T;
 
   getFunction(
-    nameOrSignature: "delegate"
+    nameOrSignature: 'delegate'
   ): TypedContractMethod<
     [vault: AddressLike, data: VaultTypes.VaultDelegateStruct],
     [void],
-    "nonpayable"
+    'nonpayable'
   >;
   getFunction(
-    nameOrSignature: "execAction"
+    nameOrSignature: 'execAction'
   ): TypedContractMethod<
     [to: AddressLike, value: BigNumberish, action: BytesLike],
     [boolean],
-    "nonpayable"
+    'nonpayable'
   >;
 
   filters: {};