Resolved merge conflicts

.github/workflows/build.yml

@@ -5,8 +5,8 @@ jobs:
     timeout-minutes: 60
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
-      - uses: actions/setup-node@v3
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
         with:
           node-version: 20
       - name: Install dependencies

package.json

@@ -20,6 +20,7 @@
     "git-info": "rm -rf src/generated/ && mkdir src/generated/ && echo export default \"{\\\"commitHash\\\": \\\"$(git rev-parse --short HEAD)\\\", \\\"version\\\": \\\"$(git describe --tags --always)\\\"};\" > src/generated/gitInfo.ts"
   },
   "dependencies": {
+    "@creit.tech/stellar-wallets-kit": "^0.8.2",
     "@stellar/design-system": "^2.0.0-beta.13",
     "@stellar/stellar-sdk": "^11.3.0",
     "@tanstack/react-query": "^5.32.1",
@@ -35,6 +36,7 @@
     "next": "14.2.3",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "tslib": "^2.6.2",
     "zustand": "^4.5.2",
     "zustand-querystring": "^0.0.19"
   },

src/app/(sidebar)/transaction/sign/components/Overview.tsx

@@ -19,6 +19,8 @@ import { WithInfoText } from "@/components/WithInfoText";
 import { ValidationResponseCard } from "@/components/ValidationResponseCard";
 import { XdrPicker } from "@/components/FormElements/XdrPicker";
 
+import { SignWithWallet } from "./SignWithWallet";
+
 const MIN_LENGTH_FOR_FULL_WIDTH_FIELD = 30;
 
 export const Overview = () => {
@@ -34,6 +36,7 @@ export const Overview = () => {
   const [secretInputs, setSecretInputs] = useState<string[]>([""]);
   const [signedTxSuccessMsg, setSignedTxSuccessMsg] = useState<string>("");
   const [signedTxErrorMsg, setSignedTxErrorMsg] = useState<string>("");
+  const [signError, setSignError] = useState<string>("");
 
   // @TODO bip path
   const [bipPath, setBipPath] = useState<string>("");
@@ -220,37 +223,49 @@ export const Overview = () => {
               />
             </div>
 
-            <div className="SignTx__Buttons">
-              <div>
-                <Button
-                  disabled={!HAS_SECRET_KEYS || HAS_INVALID_SECRET_KEYS}
-                  size="md"
-                  variant="secondary"
-                  onClick={() =>
-                    signTxWithSecretKeys(
-                      sign.importXdr,
-                      secretInputs,
-                      network.passphrase,
-                    )
-                  }
-                >
-                  Sign with secret key
-                </Button>
-
-                <Button size="md" variant="secondary">
-                  Sign with wallet and submit
-                </Button>
+            <Box gap="xs" addlClassName="full-width">
+              <div className="SignTx__Buttons">
+                <div>
+                  <Button
+                    disabled={!HAS_SECRET_KEYS || HAS_INVALID_SECRET_KEYS}
+                    size="md"
+                    variant="secondary"
+                    onClick={() =>
+                      signTxWithSecretKeys(
+                        sign.importXdr,
+                        secretInputs,
+                        network.passphrase,
+                      )
+                    }
+                  >
+                    Sign with secret key
+                  </Button>
+
+                  <SignWithWallet setSignError={setSignError} />
+                </div>
+                <div>
+                  <Button
+                    size="md"
+                    variant="tertiary"
+                    onClick={() => addSignature()}
+                  >
+                    Add signature
+                  </Button>
+                </div>
               </div>
               <div>
-                <Button
-                  size="md"
-                  variant="tertiary"
-                  onClick={() => addSignature()}
-                >
-                  Add signature
-                </Button>
+                {signError ? (
+                  <Text
+                    as="div"
+                    size="xs"
+                    weight="regular"
+                    addlClassName="FieldNote--error"
+                  >
+                    {signError}
+                  </Text>
+                ) : null}
               </div>
-            </div>
+            </Box>
           </div>
         </Card>
 

src/app/(sidebar)/transaction/sign/components/SignWithWallet.tsx

@@ -0,0 +1,87 @@
+"use client";
+
+import React, { Dispatch, SetStateAction } from "react";
+import { Button } from "@stellar/design-system";
+import {
+  StellarWalletsKit,
+  WalletNetwork,
+  allowAllModules,
+  ISupportedWallet,
+  FREIGHTER_ID,
+} from "@creit.tech/stellar-wallets-kit";
+
+import { useStore } from "@/store/useStore";
+
+import { NetworkType } from "@/types/types";
+
+const getWalletNetwork = (network: NetworkType) => {
+  switch (network) {
+    case "testnet":
+      return WalletNetwork.TESTNET;
+    case "mainnet":
+      return WalletNetwork.PUBLIC;
+    case "futurenet":
+      return WalletNetwork.FUTURENET;
+    // @TODO: stellar wallets kit doesn't support CUSTOM
+    //   case "custom":
+    default:
+      return WalletNetwork.TESTNET;
+  }
+};
+
+export const SignWithWallet = ({
+  setSignError,
+}: {
+  setSignError: Dispatch<SetStateAction<string>>;
+}) => {
+  const { network, transaction } = useStore();
+  const { sign, updateSignedTx } = transaction;
+
+  const kit: StellarWalletsKit = new StellarWalletsKit({
+    network: getWalletNetwork(network.id),
+    selectedWalletId: FREIGHTER_ID,
+    modules: allowAllModules(),
+  });
+
+  const onSignWithWallet = async () => {
+    // remove the previously signed tx from the display
+    updateSignedTx("");
+
+    await kit.openModal({
+      onWalletSelected: async (option: ISupportedWallet) => {
+        try {
+          kit.setWallet(option.id);
+          const publicKey = await kit.getPublicKey();
+          const networkType = getWalletNetwork(network.id);
+
+          const { result } = await kit.signTx({
+            xdr: sign.importXdr,
+            // You could send multiple public keys in case the wallet needs to handle multi signatures
+            publicKeys: [publicKey],
+            network: networkType,
+          });
+
+          updateSignedTx(result);
+        } catch (error: any) {
+          // the error for the following wallets:
+          // xbull
+          // albedo
+          // freighter
+          if (
+            error?.message?.includes("denied") ||
+            error?.error?.code === -4 ||
+            error?.includes("User declined access")
+          ) {
+            setSignError(`User declined access to ${option.id}`);
+          }
+        }
+      },
+    });
+  };
+
+  return (
+    <Button size="md" variant="secondary" onClick={onSignWithWallet}>
+      Sign with wallet
+    </Button>
+  );
+};

src/components/FormElements/LiquidityPoolShares.tsx

@@ -64,7 +64,7 @@ export const LiquidityPoolShares = ({
         id={`${id}-fee`}
         label="Fee"
         fieldSize="md"
-        value={"30"}
+        value="30"
         error={""}
         note="For now the only fee supported is 30."
         onChange={() => {

tsconfig.json

@@ -3,6 +3,7 @@
   "compilerOptions": {
     "target": "es5",
     "lib": ["dom", "dom.iterable", "esnext"],
+    "downlevelIteration": true,
     "allowJs": true,
     "skipLibCheck": true,
     "strict": true,