feat: implement Clockwork integration

package.json

@@ -33,6 +33,7 @@
   "dependencies": {
     "@chakra-ui/icons": "^2.0.14",
     "@chakra-ui/react": "^2.4.4",
+    "@clockwork-xyz/sdk": "^0.3.0",
     "@dnd-kit/core": "^6.0.6",
     "@dnd-kit/modifiers": "^6.0.1",
     "@dnd-kit/sortable": "^7.0.1",

src/components/client/ClientHeader.tsx

@@ -17,7 +17,8 @@ import {
   Spacer,
   Tooltip,
 } from "@chakra-ui/react";
-import { SquadsConfig } from "components/client/SquadsConfig";
+import { ClockworkConfig } from "components/client/integrations/ClockworkConfig";
+import { SquadsConfig } from "components/client/integrations/SquadsConfig";
 import { Description } from "components/common/Description";
 import { EditableName } from "components/common/EditableName";
 import { RpcEndpointMenu } from "components/common/RpcEndpointMenu";
@@ -195,6 +196,7 @@ export const ClientHeader: React.FC<{ sendButton: React.ReactNode }> = ({
       </Collapse>
 
       {runType === "squads" && <SquadsConfig />}
+      {runType === "clockwork" && <ClockworkConfig />}
 
       <Heading mt="5" mb="2" alignItems="center" flex="1" size="lg">
         <EditableName

src/components/client/SendButton.tsx

@@ -14,6 +14,7 @@ import {
   Tooltip,
 } from "@chakra-ui/react";
 import { useWallet } from "@solana/wallet-adapter-react";
+import { useSendToClockwork } from "hooks/clockwork";
 import { useSendToSquads } from "hooks/squads";
 import { useConfigStore } from "hooks/useConfigStore";
 import { useSendWeb3Transaction } from "hooks/useSendWeb3Transaction";
@@ -42,6 +43,33 @@ const SquadsIcon: React.FC<IconProps> = (props) => (
   </Icon>
 );
 
+const ClockworkIcon: React.FC<IconProps> = (props) => (
+  <Icon
+    w="3.5"
+    h="3.5"
+    viewBox="0 0 40 40"
+    ml="1" // icon is a bit off-centre compared to squads
+    {...props}
+  >
+    <path
+      d="m 34.1428,34.1508 c 0.6402,-0.6401 1.2323,-1.3202 1.7684,-2.0244 0.5761,-0.7521 0.3841,-1.8403 -0.4241,-2.3364 l -3.8648,-2.3685 c -0.6721,-0.4161 -1.5603,-0.2801 -2.0564,0.3361 -0.264,0.328 -0.5521,0.6481 -0.8561,0.9522 -0.3041,0.304 -0.6242,0.5921 -0.9522,0.8561 -0.6162,0.4961 -0.7522,1.3843 -0.3361,2.0564 l 2.3685,3.8648 c 0.4961,0.8082 1.5843,1.0002 2.3364,0.4241 0.6962,-0.5281 1.3763,-1.1202 2.0164,-1.7604 z"
+      fill="#446df6"
+    />
+    <path
+      d="m 40.008,19.996 c 0,0.9122 -0.064,1.8083 -0.176,2.6805 -0.128,0.9442 -1.0322,1.5683 -1.9524,1.3523 l -4.4089,-1.0562 c -0.7681,-0.1841 -1.2963,-0.9042 -1.2162,-1.6964 0.04,-0.424 0.064,-0.8481 0.064,-1.2802 0,-0.4321 -0.024,-0.8642 -0.064,-1.2803 -0.0801,-0.7841 0.4481,-1.5123 1.2162,-1.6963 l 4.4089,-1.0562 c 0.9202,-0.2241 1.8244,0.4081 1.9524,1.3523 0.112,0.8721 0.176,1.7683 0.176,2.6805 z"
+      fill="#1dd3b0"
+    />
+    <path
+      d="m 34.1428,5.84115 c 0.6402,0.64013 1.2323,1.32026 1.7684,2.0244 0.5761,0.75215 0.3841,1.84037 -0.4241,2.33645 l -3.8648,2.3685 c -0.6721,0.4161 -1.5603,0.28 -2.0564,-0.3361 -0.264,-0.328 -0.5521,-0.6481 -0.8561,-0.9522 -0.3041,-0.304 -0.6242,-0.5921 -0.9522,-0.8561 C 27.1414,9.92996 27.0054,9.04179 27.4215,8.36965 L 29.79,4.50488 c 0.4961,-0.80816 1.5843,-1.0002 2.3364,-0.42409 0.6962,0.52811 1.3763,1.12023 2.0164,1.76036 z"
+      fill="#ff4242"
+    />
+    <path
+      d="m 22.9726,33.4627 c -0.176,-0.7202 -0.8242,-1.2403 -1.5523,-1.2323 h -0.008 c -0.04,0 -0.088,0 -0.136,0.008 -0.2081,0.0241 -0.4161,0.0401 -0.6242,0.0561 0,0 -0.008,0 -0.016,0 -0.208,0.008 -0.4241,0.016 -0.6401,0.016 -2.1764,0 -4.2248,-0.5682 -6.0012,-1.5603 -0.088,-0.0481 -0.176,-0.0961 -0.2561,-0.1441 -0.088,-0.048 -0.168,-0.104 -0.256,-0.152 -0.08,-0.056 -0.168,-0.104 -0.2481,-0.16 -0.08,-0.0561 -0.16,-0.1121 -0.248,-0.1681 -0.136,-0.096 -0.2721,-0.192 -0.4081,-0.296 -0.088,-0.064 -0.176,-0.1361 -0.264,-0.2001 -0.1281,-0.104 -0.2561,-0.208 -0.3841,-0.32 -0.072,-0.0641 -0.152,-0.1281 -0.2241,-0.2001 -0.032,-0.032 -0.072,-0.064 -0.112,-0.096 -0.104,-0.104 -0.216,-0.2 -0.32,-0.3041 -2.23249,-2.2324 -3.60877,-5.305 -3.60877,-8.7057 0,-0.3361 0.01601,-0.6721 0.04001,-1.0082 C 8.17763,13.0986 12.8666,8.35367 18.7157,7.75355 19.1318,7.71354 19.5559,7.68954 19.98,7.68954 c 0.4321,0 0.8642,0.024 1.2803,0.06401 0.7841,0.08002 1.5123,-0.44809 1.6963,-1.21624 L 24.0128,2.12843 C 24.2368,1.20824 23.6047,0.304059 22.6605,0.176034 22.3325,0.128024 22.0044,0.0960187 21.6683,0.0720139 21.5323,0.0640123 21.3963,0.0480096 21.2603,0.040008 21.1722,0.0320064 21.0842,0.0320054 20.9962,0.0240038 20.6601,0.00800062 20.3161,0 19.98,0 c -0.112,0 -0.224,0 -0.3361,0 -0.096,0 -0.2,4.8826e-7 -0.296,0.00800209 -0.024,0 -0.048,0 -0.072,0 -0.0801,0 -0.1681,0.00799961 -0.2481,0.00799961 -0.112,0.0080016 -0.224,0.0080026 -0.3281,0.0160042 -0.056,0 -0.112,0.0080021 -0.168,0.0080021 -0.064,0 -0.128,0.0080001 -0.192,0.0160017 -0.016,0 -0.04,5e-7 -0.056,0.0080021 -0.0961,0.0080016 -0.1921,0.0160047 -0.2801,0.0240063 -0.144,0.0160029 -0.2801,0.0320049 -0.4241,0.0480079 -0.072,0.008001 -0.136,0.016004 -0.208,0.024006 -0.016,0 -0.04,0.008002 -0.056,0.008002 -0.008,0 -0.016,0 -0.016,0 C 7.52951,1.4963 0,9.86597 0,19.996 c 0,10.098 7.4815,18.4517 17.2034,19.812 0.032,0.008 0.0721,0.016 0.1041,0.016 0.8801,0.12 1.7763,0.176 2.6805,0.176 0.9042,0 1.8004,-0.064 2.6805,-0.176 0.008,0 0.016,0 0.032,-0.008 0.016,0 0.032,-0.008 0.04,-0.008 0.8962,-0.1601 1.4883,-1.0403 1.2723,-1.9444 z"
+      fill="currentColor"
+    />
+  </Icon>
+);
+
 export const RUN_TYPES: {
   id: RunType;
   type: "standard" | "integration";
@@ -55,6 +83,12 @@ export const RUN_TYPES: {
     type: "integration",
     icon: <SquadsIcon />,
   },
+  {
+    id: "clockwork",
+    name: "Send to Clockwork",
+    type: "integration",
+    icon: <ClockworkIcon />,
+  },
 ];
 
 export const SendButton: React.FC<{
@@ -151,6 +185,13 @@ export const SendButton: React.FC<{
     onError,
   });
 
+  const { simulate: clockworkSimulate, send: clockworkSend } =
+    useSendToClockwork({
+      onSimulated,
+      onSent,
+      onError,
+    });
+
   const onClick = () => {
     setUI((state) => {
       state.transactionRun = {
@@ -167,6 +208,10 @@ export const SendButton: React.FC<{
       squadsSimulate(transaction);
     } else if (runType === "squads" && !simulate) {
       squadsSend(transaction);
+    } else if (runType === "clockwork" && simulate) {
+      clockworkSimulate(transaction);
+    } else if (runType === "clockwork" && !simulate) {
+      clockworkSend(transaction);
     }
   };