tab management

README.md

@@ -1,7 +1,7 @@
 # Orderly Broker Registration
 
 This app lets you register an account in the Orderly Network infrastructure with any wallet address and any broker ID.
-The address can be a Delegate Signer EOA account or a user address.
+The address can be a Delegate Signer account or a user EOA address.
 
 The project has been scaffolded via Vitejs and the `react-ts` template.
 

src/Account.tsx

@@ -62,8 +62,7 @@ export const Account: FC<{
 
       <Text>
         Here you can register your account in the Orderly Network infrastructure. This could be e.g.
-        helpful to register an admin address for your broker. Please make sure that the address is
-        not an EOA. Otherwise use the Delegate Signer feature.
+        helpful to register an admin address for your broker.
       </Text>
 
       <Card style={{ maxWidth: 240 }}>

src/App.tsx

@@ -38,6 +38,8 @@ function App() {
   const [accountId, setAccountId] = useState<string>();
   const [delegateSigner, setDelegateSigner] = useState<DelegateSignerResponse>();
   const [orderlyKey, setOrderlyKey] = useState<Uint8Array>();
+  const [showEOA, setShowEOA] = useState<boolean>(false);
+  const [activeTab, setActiveTab] = useState<string>('account');
 
   const [{ wallet }, connectWallet, disconnectWallet] = useConnectWallet();
   const [{ connectedChain }, setChain] = useSetChain();
@@ -214,47 +216,82 @@ function App() {
           )}
         </Container>
 
-        <label>
-          Broker ID
-          <TextField.Root
-            value={brokerId}
-            onChange={(event) => {
-              setBrokerId(event.target.value);
-              setAccountId(undefined);
-            }}
-          />
-        </label>
+        <Flex gap="4" align="end">
+          <label>
+            Broker ID
+            <TextField.Root
+              value={brokerId}
+              onChange={(event) => {
+                setBrokerId(event.target.value);
+                setAccountId(undefined);
+              }}
+            />
+          </label>
 
-        <label>
-          Wallet Address
-          <TextField.Root
-            value={address}
-            onChange={(event) => {
-              setAddress(event.target.value);
-              setAccountId(undefined);
+          <Button
+            disabled={!brokerId || !address || !connectedChain}
+            onClick={async () => {
+              if (!brokerId || !wallet || !connectedChain) return;
+              const userAddress = wallet.accounts[0].address;
+              if (!userAddress) return;
+              setAccountId(getAccountId(userAddress, brokerId));
+              saveBrokerId(connectedChain.id, brokerId);
+              setShowEOA(true);
+              setActiveTab('account');
             }}
-          />
-        </label>
+          >
+            Load Connected Address
+          </Button>
+        </Flex>
 
-        <Button
-          disabled={!brokerId || !address || !connectedChain}
-          onClick={async () => {
-            if (!brokerId || !address || !connectedChain) return;
-            setAccountId(getAccountId(address, brokerId));
-            saveBrokerId(connectedChain.id, brokerId);
-            saveContractAddress(connectedChain.id, address);
-          }}
-        >
-          Load Account
-        </Button>
+        <Flex gap="4" align="end">
+          <label>
+            Delegate Signer Address
+            <TextField.Root
+              value={address}
+              onChange={(event) => {
+                setAddress(event.target.value);
+                setAccountId(undefined);
+              }}
+            />
+          </label>
+
+          <Button
+            disabled={
+              !brokerId ||
+              !address ||
+              !connectedChain ||
+              address.toLowerCase() === wallet?.accounts[0].address.toLowerCase()
+            }
+            onClick={async () => {
+              if (!brokerId || !address || !connectedChain) return;
+              setAccountId(getAccountId(address, brokerId));
+              saveBrokerId(connectedChain.id, brokerId);
+              saveContractAddress(connectedChain.id, address);
+              setShowEOA(false);
+              setActiveTab('delegate-signer');
+            }}
+          >
+            Load Delegate Signer
+          </Button>
+        </Flex>
       </Flex>
 
       {accountId ? (
-        <Tabs.Root defaultValue="account">
+        <Tabs.Root value={activeTab}>
           <Tabs.List>
-            <Tabs.Trigger value="account">Account</Tabs.Trigger>
-            <Tabs.Trigger value="delegate-signer">Delegate Signer</Tabs.Trigger>
-            <Tabs.Trigger value="assets">Assets</Tabs.Trigger>
+            {showEOA ? (
+              <Tabs.Trigger value="account" onClick={() => setActiveTab('account')}>
+                Account
+              </Tabs.Trigger>
+            ) : (
+              <Tabs.Trigger value="delegate-signer" onClick={() => setActiveTab('delegate-signer')}>
+                Delegate Signer
+              </Tabs.Trigger>
+            )}
+            <Tabs.Trigger value="assets" onClick={() => setActiveTab('assets')}>
+              Assets
+            </Tabs.Trigger>
           </Tabs.List>
 
           <Tabs.Content value="account">
@@ -281,6 +318,7 @@ function App() {
               brokerId={brokerId}
               accountId={accountId}
               contractAddress={address}
+              showEOA={showEOA}
               orderlyKey={orderlyKey}
             />
           </Tabs.Content>

src/Assets.tsx

@@ -18,13 +18,13 @@ export const Assets: FC<{
   brokerId: string;
   accountId: string;
   contractAddress: string;
+  showEOA: boolean;
   orderlyKey?: Uint8Array;
-}> = ({ brokerId, accountId, contractAddress, orderlyKey }) => {
+}> = ({ brokerId, accountId, contractAddress, showEOA, orderlyKey }) => {
   const [amount, setAmount] = useState<string>('');
   const [balance, setBalance] = useState<bigint>();
   const [allowance, setAllowance] = useState<bigint>();
   const [contractBalance, setContractBalance] = useState<bigint>();
-  const [isEOA, setIsEOA] = useState(false);
   const [vaultBalance, setVaultBalance] = useState<number>();
   const [usdcContract, setUsdcContract] = useState<NativeUSDC>();
 
@@ -40,12 +40,6 @@ export const Assets: FC<{
     }
   }
 
-  useEffect(() => {
-    const address = wallet?.accounts[0].address;
-    if (address == null) return;
-    setIsEOA(address.toLowerCase() !== contractAddress.toLowerCase());
-  }, [wallet, setIsEOA, contractAddress]);
-
   useEffect(() => {
     async function run() {
       if (!wallet || !connectedChain) {
@@ -128,9 +122,9 @@ export const Assets: FC<{
               {balance != null ? usdFormatter.format(Number(formatUnits(balance, 6))) : '-'}
             </Table.Cell>
           </Table.Row>
-          {isEOA && (
+          {!showEOA && (
             <Table.Row>
-              <Table.RowHeaderCell>EOA Wallet Balance (USDC):</Table.RowHeaderCell>
+              <Table.RowHeaderCell>Delegate Signer Balance (USDC):</Table.RowHeaderCell>
               <Table.Cell>
                 {contractBalance != null
                   ? usdFormatter.format(Number(formatUnits(contractBalance, 6)))
@@ -147,7 +141,7 @@ export const Assets: FC<{
         </Table.Body>
       </Table.Root>
 
-      {isEOA && (
+      {!showEOA && (
         <Flex direction="column" gap="4">
           <TextField.Root
             style={{ gridArea: 'input' }}

src/DelegateSigner.tsx

@@ -75,7 +75,7 @@ export const DelegateSigner: FC<{
         >
           Delegate Signer
         </a>{' '}
-        EOA account in the Orderly Network infrastructure. You can then deposit and withdraw to your
+        account in the Orderly Network infrastructure. You can then deposit and withdraw to your
         respective smart contract account.
       </Text>
 

src/SafeInstructions.tsx

@@ -117,7 +117,7 @@ export const SafeInstructions: FC<{ brokerId: string; chainId: string }> = ({
                   >
                     <CopyIcon height="12" />
                   </IconButton>
-                  <Text>This data will send your wallet address Delegate Signer EOA.</Text>
+                  <Text>This data will send your wallet address & Delegate Signer EOA.</Text>
                   <Code style={{ wordWrap: 'break-word', overflow: 'hidden' }}>
                     {JSON.stringify(data, undefined, 2)}
                   </Code>