settings

cartridge-gg · Aug 15, 2024 · 14ef319 · 14ef319
1 parent a9755fb
commit 14ef319
Show file tree

Hide file tree

Showing 19 changed files with 635 additions and 141 deletions.
diff --git a/packages/keychain/src/components/Execute/index.tsx b/packages/keychain/src/components/Execute/index.tsx
@@ -183,7 +183,13 @@ export function Execute() {
           submit
         </Button>
 
-        <Button onClick={cancel}>Cancel</Button>
+        <Button
+          onClick={() => {
+            ctx.onCancel ? ctx.onCancel() : cancel();
+          }}
+        >
+          Cancel
+        </Button>
       </Footer>
     </Container>
   );

diff --git a/packages/keychain/src/components/Menu/index.tsx b/packages/keychain/src/components/Menu/index.tsx
@@ -2,34 +2,25 @@ import { Button, VStack, Text, HStack, Spacer } from "@chakra-ui/react";
 import { Container, Content, Footer } from "components/layout";
 import { CopyIcon } from "@cartridge/ui";
 import { useConnection } from "hooks/connection";
-import { useEffect, useState } from "react";
+import { useState } from "react";
 
-const shortAddress = (address: string) => {
+export const shortAddress = (address: string) => {
   return `${address.slice(0, 6)}...${address.slice(
     address.length - 4,
     address.length,
   )}`;
 };
 
-export function Menu({
-  onLogout,
-  onSetDelegate,
-}: {
-  onLogout: () => void;
-  onSetDelegate: () => void;
-}) {
+export const mediumAddress = (address: string) => {
+  return `${address.slice(0, 20)}...${address.slice(
+    address.length - 20,
+    address.length,
+  )}`;
+};
+
+export function Menu({ onLogout }: { onLogout: () => void }) {
   const { controller } = useConnection();
   const [isCopying, setIsCopying] = useState(false);
-  const [isCopyingDelegate, setIsCopyingDelegate] = useState(false);
-  const [delegateAccount, setDelegateAccount] = useState("");
-
-  useEffect(() => {
-    const init = async () => {
-      const delegate = await controller.delegateAccount();
-      setDelegateAccount(delegate);
-    };
-    init();
-  }, [controller]);
 
   const onCopy = () => {
     setIsCopying(true);
@@ -39,85 +30,33 @@ export function Menu({
     }, 1_000);
   };
 
-  const onCopyDelegate = () => {
-    setIsCopyingDelegate(true);
-    navigator.clipboard.writeText(delegateAccount);
-    setTimeout(() => {
-      setIsCopyingDelegate(false);
-    }, 1_000);
-  };
-
   return (
-    <Container variant="menu" title={controller.username}>
-      <Content h="350px">
-        <VStack w="full" h="full" justifyContent="space-between">
-          <VStack w="full" gap={3}>
-            <VStack
-              gap={0}
-              cursor="pointer"
-              _hover={{
-                color: "color.primary",
-              }}
-              onClick={onCopy}
-            >
-              <Text
-                color="text.secondaryAccent"
-                fontSize="xs"
-                fontWeight="bold"
-                casing="uppercase"
-              >
-                Controller
-              </Text>
-
-              {!isCopying ? (
-                <HStack>
-                  <Text>{shortAddress(controller.address)}</Text>
-                  <Spacer />
-                  <CopyIcon color="currentColor" />
-                </HStack>
-              ) : (
-                <Text color="text.secondary">Copied to clipboard!</Text>
-              )}
-            </VStack>
-
-            {delegateAccount && BigInt(delegateAccount) !== 0n && (
-              <VStack
-                gap={0}
-                cursor="pointer"
-                _hover={{
-                  color: "color.primary",
-                }}
-                onClick={onCopyDelegate}
-              >
-                <Text
-                  color="text.secondaryAccent"
-                  fontSize="xs"
-                  fontWeight="bold"
-                  casing="uppercase"
-                >
-                  Delegate
-                </Text>
-
-                {!isCopyingDelegate ? (
-                  <HStack>
-                    <Text>{shortAddress(delegateAccount)}</Text>
-                    <Spacer />
-                    <CopyIcon color="currentColor" />
-                  </HStack>
-                ) : (
-                  <Text color="text.secondary">Copied to clipboard!</Text>
-                )}
-              </VStack>
-            )}
-          </VStack>
-
-          <VStack w="full">
-            <Button colorScheme="colorful" w="full" onClick={onSetDelegate}>
-              Set delegate account
-            </Button>
-          </VStack>
+    <Container
+      variant="menu"
+      showSettings={true}
+      title={controller.username}
+      description={
+        <VStack
+          cursor="pointer"
+          _hover={{
+            color: "color.primary",
+          }}
+          onClick={onCopy}
+          alignItems="flex-start"
+        >
+          {!isCopying ? (
+            <HStack>
+              <Text>{shortAddress(controller.address)}</Text>
+              <Spacer />
+              <CopyIcon color="currentColor" />
+            </HStack>
+          ) : (
+            <Text color="text.secondary">Copied to clipboard!</Text>
+          )}
         </VStack>
-      </Content>
+      }
+    >
+      <Content h="350px"></Content>
       <Footer>
         <Button w="full" onClick={onLogout}>
           Log out

diff --git a/packages/keychain/src/components/SetDelegate.tsx b/packages/keychain/src/components/SetDelegate.tsx
@@ -1,16 +1,16 @@
 import { AlertIcon } from "@cartridge/ui";
 import { Button, VStack, Text, HStack, Input } from "@chakra-ui/react";
 import { Container, Content, Footer } from "components/layout";
+import { useConnection } from "hooks/connection";
 import { useEffect, useState } from "react";
 import { CallData, num } from "starknet";
 
 export function SetDelegate({
-  onClose,
   onSetDelegate,
 }: {
-  onClose: () => void;
   onSetDelegate: (address: string) => void;
 }) {
+  const { context, openSettings } = useConnection();
   const [delegateAddress, setDelegateAddress] = useState("");
   const [isValid, setIsValid] = useState(true);
 
@@ -24,18 +24,22 @@ export function SetDelegate({
   }, [delegateAddress]);
 
   return (
-    <Container variant="menu" title="Set delegate account">
+    <Container
+      variant="menu"
+      title="Delegate account"
+      onBack={() => openSettings(context)}
+    >
       <Content>
         <VStack w="full" h="full" justifyContent="space-between" gap={6}>
-          <Text textAlign="center" color="text.secondary" fontSize="sm">
+          <Text color="text.secondary" fontSize="sm">
             Your controller can be owned by an existing Starknet wallet which
             can receive the rewards you earn while playing. <br />
             (This can be updated later)
           </Text>
           <VStack w="full">
             <Input
               w="full"
-              fontSize="10px"
+              // fontSize="10px"
               placeholder="0x..."
               value={delegateAddress}
               onChange={(e) => setDelegateAddress(e.target.value)}
@@ -57,9 +61,9 @@ export function SetDelegate({
         >
           Set delegate account
         </Button>
-        <Button w="full" onClick={onClose}>
+        {/* <Button w="full" onClick={onClose}>
           Setup later
-        </Button>
+        </Button> */}
       </Footer>
     </Container>
   );

diff --git a/packages/keychain/src/components/SetExternalOwner.tsx b/packages/keychain/src/components/SetExternalOwner.tsx
@@ -0,0 +1,64 @@
+import { AlertIcon } from "@cartridge/ui";
+import { Button, VStack, Text, HStack, Input } from "@chakra-ui/react";
+import { Container, Content, Footer } from "components/layout";
+import { useConnection } from "hooks/connection";
+import { useEffect, useState } from "react";
+import { CallData, num } from "starknet";
+
+export function SetExternalOwner() {
+  const { context, openSettings, setExternalOwnerTransaction } =
+    useConnection();
+  const [externalOwnerAddress, setExternalOwnerAddress] = useState("");
+  const [isValid, setIsValid] = useState(true);
+
+  useEffect(() => {
+    try {
+      CallData.compile([externalOwnerAddress]);
+      setIsValid(num.isHex(externalOwnerAddress));
+    } catch (e: any) {
+      setIsValid(false);
+    }
+  }, [externalOwnerAddress]);
+
+  return (
+    <Container
+      variant="menu"
+      title="Recovery Account(s)"
+      onBack={() => openSettings(context)}
+    >
+      <Content>
+        <VStack w="full" h="full" justifyContent="space-between" gap={6}>
+          <Text color="text.secondary" fontSize="sm">
+            Your controller can be owned by an existing Starknet wallet
+          </Text>
+          <VStack w="full">
+            <Input
+              w="full"
+              // fontSize="10px"
+              placeholder="0x..."
+              value={externalOwnerAddress}
+              onChange={(e) => setExternalOwnerAddress(e.target.value)}
+            />
+            {!isValid && externalOwnerAddress !== "" && (
+              <HStack w="full" color="red.400">
+                <AlertIcon /> <Text color="red.400">Invalid address!</Text>
+              </HStack>
+            )}
+          </VStack>
+        </VStack>
+      </Content>
+      <Footer>
+        <Button
+          colorScheme="colorful"
+          w="full"
+          onClick={() =>
+            setExternalOwnerTransaction(context, externalOwnerAddress)
+          }
+          isDisabled={!isValid}
+        >
+          Add Recovery Account
+        </Button>
+      </Footer>
+    </Container>
+  );
+}