31 changed files with 522 additions and 409 deletions
--- a/build-webapp.sh
+++ b/build-webapp.sh
@ -17,7 +17,6 @@ VITE_GITHUB_IMAGE_UPLOAD_PWA_TEMPLATE_REPO = 'LACONIC_HOSTED_CONFIG_github_image
 VITE_GITHUB_NEXT_APP_TEMPLATE_REPO = 'LACONIC_HOSTED_CONFIG_github_next_app_templaterepo'
 VITE_WALLET_CONNECT_ID = 'LACONIC_HOSTED_CONFIG_wallet_connect_id'
 VITE_LACONICD_CHAIN_ID = 'LACONIC_HOSTED_CONFIG_laconicd_chain_id'
-VITE_WALLET_IFRAME_URL = 'LACONIC_HOSTED_CONFIG_wallet_iframe_url'
 VITE_LIT_RELAY_API_KEY = 'LACONIC_HOSTED_CONFIG_lit_relay_api_key'
 VITE_BUGSNAG_API_KEY = 'LACONIC_HOSTED_CONFIG_bugsnag_api_key'
 VITE_PASSKEY_WALLET_RPID = 'LACONIC_HOSTED_CONFIG_passkey_wallet_rpid'
--- a/packages/deployer/.gitignore
+++ b/packages/deployer/.gitignore
@ -1 +0,0 @@
-records/*.yml
--- a/packages/deployer/deploy-frontend.sh
+++ b/packages/deployer/deploy-frontend.sh
@ -135,7 +135,6 @@ record:
      LACONIC_HOSTED_CONFIG_github_next_app_templaterepo: laconic-templates/starter.nextjs-react-tailwind
      LACONIC_HOSTED_CONFIG_wallet_connect_id: 63cad7ba97391f63652161f484670e15
      LACONIC_HOSTED_CONFIG_laconicd_chain_id: laconic-testnet-2
-      LACONIC_HOSTED_CONFIG_wallet_iframe_url: https://wallet.laconic.com
  meta:
    note: Added @ $CURRENT_DATE_TIME
    repository: "$REPO_URL"
--- a/packages/deployer/records/.gitkeep
+++ b/packages/deployer/records/.gitkeep
--- a/packages/deployer/records/application-deployment-request.yml
+++ b/packages/deployer/records/application-deployment-request.yml
@ -0,0 +1,18 @@
+record:
+  type: ApplicationDeploymentRequest
+  version: '1.0.0'
+  name: deploy-frontend@1.0.0
+  application: lrn://vaasl/applications/deploy-frontend@1.0.0
+  dns: deploy
+  config:
+    env:
+      LACONIC_HOSTED_CONFIG_server_url: https://deploy-backend.apps.vaasl.io
+      LACONIC_HOSTED_CONFIG_github_clientid: Ov23liaet4yc0KX0iM1c
+      LACONIC_HOSTED_CONFIG_github_pwa_templaterepo: laconic-templates/test-progressive-web-app
+      LACONIC_HOSTED_CONFIG_github_image_upload_templaterepo: laconic-templates/image-upload-pwa-example
+      LACONIC_HOSTED_CONFIG_github_next_app_templaterepo: laconic-templates/starter.nextjs-react-tailwind
+      LACONIC_HOSTED_CONFIG_wallet_connect_id: 63cad7ba97391f63652161f484670e15
+  meta:
+    note: Added by Snowball @ Thu Apr  4 14:49:41 UTC 2024
+    repository: "https://git.vdb.to/cerc-io/snowballtools-base"
+    repository_ref: 351db16336eacc3e1f9119ceb8d1282b8e27a27e
--- a/packages/deployer/records/application-record.yml
+++ b/packages/deployer/records/application-record.yml
@ -0,0 +1,8 @@
+record:
+  type: ApplicationRecord
+  version: 0.0.2
+  repository_ref: 351db16336eacc3e1f9119ceb8d1282b8e27a27e
+  repository: ["https://git.vdb.to/cerc-io/snowballtools-base"]
+  app_type: webapp
+  name: deploy-frontend
+  app_version: 1.0.0
--- a/packages/deployer/remove-deployment.sh
+++ b/packages/deployer/remove-deployment.sh
@ -1,6 +1,7 @@
 #!/bin/bash

 source .env
+echo "Using REGISTRY_BOND_ID: $REGISTRY_BOND_ID"
 echo "Using DEPLOYER_LRN: $DEPLOYER_LRN"

 # Generate application-deployment-removal-request.yml
--- a/packages/deployer/staging-records/application-deployment-request.yml
+++ b/packages/deployer/staging-records/application-deployment-request.yml
@ -0,0 +1,25 @@
+record:
+  type: ApplicationDeploymentRequest
+  version: '1.0.0'
+  name: staging-snowballtools-base-frontend@0.0.0
+  application: crn://staging-snowballtools/applications/staging-snowballtools-base-frontend@0.0.0
+  dns: dashboard.staging.apps.snowballtools.com
+  config:
+    env:
+      LACONIC_HOSTED_CONFIG_server_url: https://snowballtools-base-api.staging.apps.snowballtools.com
+      LACONIC_HOSTED_CONFIG_github_clientid: Ov23liOaoahRTYd4nSCV
+      LACONIC_HOSTED_CONFIG_github_templaterepo: snowball-tools/test-progressive-web-app
+      LACONIC_HOSTED_CONFIG_github_pwa_templaterepo: snowball-tools/test-progressive-web-app
+      LACONIC_HOSTED_CONFIG_github_image_upload_templaterepo: snowball-tools/image-upload-pwa-example
+      LACONIC_HOSTED_CONFIG_github_next_app_templaterepo: snowball-tools/starter.nextjs-react-tailwind
+      LACONIC_HOSTED_CONFIG_wallet_connect_id: eda9ba18042a5ea500f358194611ece2
+      LACONIC_HOSTED_CONFIG_lit_relay_api_key: 15DDD969-E75F-404D-AAD9-58A37C4FD354_snowball
+      LACONIC_HOSTED_CONFIG_aplchemy_api_key: THvPart_gqI5x02RNYSBntlmwA66I_qc
+      LACONIC_HOSTED_CONFIG_bugsnag_api_key: 8c480cd5386079f9dd44f9581264a073
+      LACONIC_HOSTED_CONFIG_passkey_wallet_rpid: dashboard.staging.apps.snowballtools.com
+      LACONIC_HOSTED_CONFIG_turnkey_api_base_url: https://api.turnkey.com
+      LACONIC_HOSTED_CONFIG_turnkey_organization_id: 5049ae99-5bca-40b3-8317-504384d4e591
+  meta:
+    note: Added by Snowball @ Mon Jun 24 23:51:48 UTC 2024
+    repository: "https://git.vdb.to/cerc-io/snowballtools-base"
+    repository_ref: 61e3e88a6c9d57e95441059369ee5a46f5c07601
--- a/packages/deployer/staging-records/application-record.yml
+++ b/packages/deployer/staging-records/application-record.yml
@ -0,0 +1,8 @@
+record:
+  type: ApplicationRecord
+  version: 0.0.1
+  repository_ref: 61e3e88a6c9d57e95441059369ee5a46f5c07601
+  repository: ["https://git.vdb.to/cerc-io/snowballtools-base"]
+  app_type: webapp
+  name: staging-snowballtools-base-frontend
+  app_version: 0.0.0
--- a/packages/frontend/.env.example
+++ b/packages/frontend/.env.example
@ -15,4 +15,3 @@ VITE_PASSKEY_WALLET_RPID=
 VITE_TURNKEY_API_BASE_URL=

 VITE_LACONICD_CHAIN_ID=
-VITE_WALLET_IFRAME_URL=
--- a/packages/frontend/src/components/projects/Dialog/ChangeStateToProductionDialog.tsx
+++ b/packages/frontend/src/components/projects/Dialog/ChangeStateToProductionDialog.tsx
@ -47,7 +47,6 @@ export const ChangeStateToProductionDialog = ({
      handleCancel={handleCancel}
      open={open}
      handleConfirm={handleConfirm}
-      confirmButtonTitle={isConfirmButtonLoading ? 'Redeploying' : 'Redeploy'}
      confirmButtonProps={{
        disabled: isConfirmButtonLoading,
        rightIcon: isConfirmButtonLoading ? (
--- a/packages/frontend/src/components/projects/create/AccountsDropdown.tsx
+++ b/packages/frontend/src/components/projects/create/AccountsDropdown.tsx
@ -1,60 +0,0 @@
-import {
-  Select,
-  Option,
-  Spinner,
-} from '@snowballtools/material-tailwind-react-fork';
-
-const AccountsDropdown = ({
-  accounts,
-  isDataReceived,
-  onAccountChange,
-}: {
-  accounts: string[];
-  isDataReceived: boolean;
-  onAccountChange: (selectedAccount: string) => void;
-}) => {
-  return (
-    <div className="p-6 bg-slate-100 dark:bg-overlay3 rounded-lg mb-6 shadow-md">
-      {isDataReceived ? (
-        !accounts.length ? (
-          <div className="text-center">
-            <p className="text-gray-700 dark:text-gray-300 mb-4">
-              No accounts found. Please visit{' '}
-              <a
-                href="https://store.laconic.com"
-                target="_blank"
-                rel="noopener noreferrer"
-                className="text-blue-600 underline dark:text-blue-400"
-              >
-                store.laconic.com
-              </a>{' '}
-              to create a wallet.
-            </p>
-          </div>
-        ) : (
-          <div>
-            <Select
-              label="Select Account"
-              defaultValue={accounts[0]}
-              onChange={(value) => value && onAccountChange(value)}
-              className="dark:bg-overlay2 dark:text-foreground"
-              aria-label="Wallet Account Selector"
-            >
-              {accounts.map((account, index) => (
-                <Option key={index} value={account}>
-                  {account}
-                </Option>
-              ))}
-            </Select>
-          </div>
-        )
-      ) : (
-        <div className="flex items-center justify-center h-12">
-          <Spinner className="h-6 w-6" />
-        </div>
-      )}
-    </div>
-  );
-};
-
-export default AccountsDropdown;
--- a/packages/frontend/src/components/projects/create/Configure.tsx
+++ b/packages/frontend/src/components/projects/create/Configure.tsx
@ -20,14 +20,10 @@ import { Button } from '../../shared/Button';
 import { Input } from 'components/shared/Input';
 import { useToast } from 'components/shared/Toast';
 import { useGQLClient } from '../../../context/GQLClientContext';
-import IFrameModal from './IFrameModal';
 import EnvironmentVariablesForm from 'pages/org-slug/projects/id/settings/EnvironmentVariablesForm';
 import { EnvironmentVariablesFormValues } from 'types/types';
-import {
-  VITE_LACONICD_CHAIN_ID,
-  VITE_WALLET_IFRAME_URL,
-} from 'utils/constants';
-import AccountsDropdown from './AccountsDropdown';
+import ConnectWallet from './ConnectWallet';
+import { useWalletConnectClient } from 'context/WalletConnectContext';

 type ConfigureDeploymentFormValues = {
  option: string;
@ -40,18 +36,16 @@ type ConfigureFormValues = ConfigureDeploymentFormValues &
  EnvironmentVariablesFormValues;

 const DEFAULT_MAX_PRICE = '10000';
-const TX_APPROVAL_TIMEOUT_MS = 60000;

 const Configure = () => {
+  const { signClient, session, accounts } = useWalletConnectClient();
+
  const [isLoading, setIsLoading] = useState(false);
  const [deployers, setDeployers] = useState<Deployer[]>([]);
  const [selectedAccount, setSelectedAccount] = useState<string>();
-  const [accounts, setAccounts] = useState<string[]>([]);
  const [selectedDeployer, setSelectedDeployer] = useState<Deployer>();
  const [isPaymentLoading, setIsPaymentLoading] = useState(false);
  const [isPaymentDone, setIsPaymentDone] = useState(false);
-  const [isFrameVisible, setIsFrameVisible] = useState(false);
-  const [isAccountsDataReceived, setIsAccountsDataReceived] = useState(false);

  const [searchParams] = useSearchParams();
  const templateId = searchParams.get('templateId');
@ -188,7 +182,7 @@ const Configure = () => {

        let amount: string;
        let senderAddress: string;
-        let txHash: string | null = null;
+        let txHash: string;
        if (createFormData.option === 'LRN' && !deployer?.minimumPayment) {
          toast({
            id: 'no-payment-required',
@ -202,7 +196,7 @@ const Configure = () => {
        } else {
          if (!selectedAccount) return;

-          senderAddress = selectedAccount;
+          senderAddress = selectedAccount.split(':')[2];

          if (createFormData.option === 'LRN') {
            amount = deployer?.minimumPayment!;
@ -214,44 +208,27 @@ const Configure = () => {

          const amountToBePaid = amount.replace(/\D/g, '').toString();

-          txHash = await cosmosSendTokensHandler(senderAddress, amountToBePaid);
+          const txHashResponse = await cosmosSendTokensHandler(
+            selectedAccount,
+            amountToBePaid,
+          );

-          if (!txHash) {
-            toast({
-              id: 'unsuccessful-tx',
-              title: 'Transaction rejected',
-              variant: 'error',
-              onDismiss: dismiss,
-            });
-            setIsFrameVisible(false);
-            setIsPaymentLoading(false);
-            throw new Error('Transaction rejected');
+          if (!txHashResponse) {
+            console.error('Tx not successful');
+            return;
          }

-          // Validate transaction hash
+          txHash = txHashResponse;
+
          const isTxHashValid = await verifyTx(
            senderAddress,
            txHash,
-            amountToBePaid,
+            amountToBePaid.toString(),
          );
-          setIsPaymentLoading(false);

-          if (isTxHashValid) {
-            toast({
-              id: 'payment-successful',
-              title: 'Payment successful',
-              variant: 'success',
-              onDismiss: dismiss,
-            });
-            setIsPaymentDone(true);
-          } else {
-            toast({
-              id: 'invalid-tx-hash',
-              title: 'Transaction validation failed',
-              variant: 'error',
-              onDismiss: dismiss,
-            });
-            throw new Error('Transaction validation failed');
+          if (isTxHashValid === false) {
+            console.error('Invalid Tx hash', txHash);
+            return;
          }
        }

@ -271,7 +248,7 @@ const Configure = () => {
          createFormData,
          environmentVariables,
          senderAddress,
-          txHash!,
+          txHash,
        );

        await client.getEnvironmentVariables(projectId);
@ -293,14 +270,14 @@ const Configure = () => {
                `/${orgSlug}/projects/create/deploy?projectId=${projectId}`,
              );
        }
-      } catch (error: any) {
+      } catch (error) {
+        console.error(error);
        toast({
          id: 'error-deploying-app',
          title: 'Error deploying app',
          variant: 'error',
          onDismiss: dismiss,
        });
-        throw new Error(error);
      }
    },
    [client, createProject, dismiss, toast],
@ -325,95 +302,72 @@ const Configure = () => {

  const cosmosSendTokensHandler = useCallback(
    async (selectedAccount: string, amount: string) => {
-      if (!selectedAccount) {
-        throw new Error('Account not selected');
+      if (!signClient || !session || !selectedAccount) {
+        return;
      }

-      const senderAddress = selectedAccount;
+      const chainId = selectedAccount.split(':')[1];
+      const senderAddress = selectedAccount.split(':')[2];
      const snowballAddress = await client.getAddress();
-      let timeoutId;

      try {
        setIsPaymentDone(false);
        setIsPaymentLoading(true);

-        await requestTx(senderAddress, snowballAddress, amount);
-
-        const txHash = await new Promise<string | null>((resolve, reject) => {
-          const handleTxStatus = async (event: MessageEvent) => {
-            if (event.origin !== VITE_WALLET_IFRAME_URL) return;
-
-            if (event.data.type === 'TRANSACTION_RESPONSE') {
-              const txResponse = event.data.data;
-              resolve(txResponse);
-            } else if (event.data.type === 'ERROR') {
-              console.error('Error from wallet:', event.data.message);
-              reject(new Error('Transaction failed'));
-              toast({
-                id: 'error-transaction',
-                title: 'Error during transaction',
-                variant: 'error',
-                onDismiss: dismiss,
-              });
-            }
-            setIsFrameVisible(false);
-
-            window.removeEventListener('message', handleTxStatus);
-          };
-
-          window.addEventListener('message', handleTxStatus);
-
-          // Set a timeout, consider unsuccessful after 1 min
-          timeoutId = setTimeout(() => {
-            reject(new Error('Transaction timeout'));
-            window.removeEventListener('message', handleTxStatus);
-            toast({
-              id: 'transaction-timeout',
-              title: 'The transaction request timed out. Please try again',
-              variant: 'error',
-              onDismiss: dismiss,
-            });
-            setIsFrameVisible(false);
-            setIsPaymentLoading(false);
-          }, TX_APPROVAL_TIMEOUT_MS);
+        toast({
+          id: 'sending-payment-request',
+          title: 'Check your wallet and approve payment request',
+          variant: 'loading',
+          onDismiss: dismiss,
        });
-        return txHash;
-      } catch (error) {
-        console.error('Error in transaction:', error);
-        throw new Error('Error in transaction');
+
+        const result: { signature: string } = await signClient.request({
+          topic: session.topic,
+          chainId: `cosmos:${chainId}`,
+          request: {
+            method: 'cosmos_sendTokens',
+            params: [
+              {
+                from: senderAddress,
+                to: snowballAddress,
+                value: amount,
+              },
+            ],
+          },
+        });
+
+        if (!result) {
+          throw new Error('Error completing transaction');
+        }
+
+        toast({
+          id: 'payment-successful',
+          title: 'Payment successful',
+          variant: 'success',
+          onDismiss: dismiss,
+        });
+
+        setIsPaymentDone(true);
+
+        return result.signature;
+      } catch (error: any) {
+        console.error('Error sending tokens', error);
+
+        toast({
+          id: 'error-sending-tokens',
+          title: 'Error sending tokens',
+          variant: 'error',
+          onDismiss: dismiss,
+        });
+
+        setIsPaymentDone(false);
      } finally {
-        clearTimeout(timeoutId);
+        setIsPaymentLoading(false);
      }
    },
-    [client, dismiss, toast],
+    [session, signClient, toast],
  );

-  const requestTx = async (
-    sender: string,
-    recipient: string,
-    amount: string,
-  ) => {
-    const iframe = document.getElementById('walletIframe') as HTMLIFrameElement;
-
-    if (!iframe.contentWindow) {
-      console.error('Iframe not found or not loaded');
-      throw new Error('Iframe not found or not loaded');
-    }
-
-    iframe.contentWindow.postMessage(
-      {
-        type: 'REQUEST_TX',
-        chainId: VITE_LACONICD_CHAIN_ID,
-        fromAddress: sender,
-        toAddress: recipient,
-        amount,
-      },
-      VITE_WALLET_IFRAME_URL,
-    );
-
-    setIsFrameVisible(true);
-  };
-
  useEffect(() => {
    fetchDeployers();
  }, []);
@ -580,11 +534,10 @@ const Configure = () => {
              </div>
            ) : (
              <>
-                <AccountsDropdown
-                  accounts={accounts}
-                  onAccountChange={onAccountChange}
-                  isDataReceived={isAccountsDataReceived}
-                />
+                <Heading as="h4" className="md:text-lg font-medium mb-3">
+                  Connect to your wallet
+                </Heading>
+                <ConnectWallet onAccountChange={onAccountChange} />
                {accounts.length > 0 && (
                  <div>
                    <Button
@ -616,12 +569,6 @@ const Configure = () => {
            )}
          </form>
        </FormProvider>
-
-        <IFrameModal
-          setAccounts={setAccounts}
-          setIsDataReceived={setIsAccountsDataReceived}
-          isVisible={isFrameVisible}
-        />
      </div>
    </div>
  );
--- a/packages/frontend/src/components/projects/create/ConnectWallet.tsx
+++ b/packages/frontend/src/components/projects/create/ConnectWallet.tsx
@ -0,0 +1,47 @@
+import { Select, Option } from '@snowballtools/material-tailwind-react-fork';
+
+import { Button } from '../../shared/Button';
+import { useWalletConnectClient } from 'context/WalletConnectContext';
+
+const ConnectWallet = ({
+  onAccountChange,
+}: {
+  onAccountChange: (selectedAccount: string) => void;
+}) => {
+  const { onConnect, accounts } = useWalletConnectClient();
+
+  const handleConnect = async () => {
+    await onConnect();
+  };
+
+  return (
+    <div className="p-4 bg-slate-100 dark:bg-overlay3 rounded-lg mb-6">
+      {accounts.length === 0 ? (
+        <div>
+          <Button type={'button'} onClick={handleConnect}>
+            Connect Wallet
+          </Button>
+        </div>
+      ) : (
+        <div>
+          <Select
+            label="Select Account"
+            defaultValue={accounts[0].address}
+            onChange={(value) => {
+              value && onAccountChange(value);
+            }}
+            className="dark:bg-overlay2 dark:text-foreground"
+          >
+            {accounts.map((account, index) => (
+              <Option key={index} value={account.address}>
+                {account.address.split(':').slice(1).join(':')}
+              </Option>
+            ))}
+          </Select>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default ConnectWallet;
--- a/packages/frontend/src/components/projects/create/IFrameModal.tsx
+++ b/packages/frontend/src/components/projects/create/IFrameModal.tsx
@ -1,88 +0,0 @@
-import { useCallback, useEffect } from 'react';
-
-import { Box, Modal } from '@mui/material';
-
-import {
-  VITE_LACONICD_CHAIN_ID,
-  VITE_WALLET_IFRAME_URL,
-} from 'utils/constants';
-
-const IFrameModal = ({
-  setAccounts,
-  setIsDataReceived,
-  isVisible,
-}: {
-  setAccounts: (accounts: string[]) => void;
-  setIsDataReceived: (isReceived: boolean) => void;
-  isVisible: boolean;
-}) => {
-  useEffect(() => {
-    const handleMessage = (event: MessageEvent) => {
-      if (event.origin !== VITE_WALLET_IFRAME_URL) return;
-
-      setIsDataReceived(true);
-      if (event.data.type === 'WALLET_ACCOUNTS_DATA') {
-        setAccounts(event.data.data);
-      } else if (event.data.type === 'ERROR') {
-        console.error('Error from wallet:', event.data.message);
-      }
-    };
-
-    window.addEventListener('message', handleMessage);
-
-    return () => {
-      window.removeEventListener('message', handleMessage);
-    };
-  }, []);
-
-  const getDataFromWallet = useCallback(() => {
-    const iframe = document.getElementById('walletIframe') as HTMLIFrameElement;
-
-    if (!iframe.contentWindow) {
-      console.error('Iframe not found or not loaded');
-      return;
-    }
-
-    iframe.contentWindow.postMessage(
-      {
-        type: 'REQUEST_WALLET_ACCOUNTS',
-        chainId: VITE_LACONICD_CHAIN_ID,
-      },
-      VITE_WALLET_IFRAME_URL,
-    );
-  }, []);
-
-  return (
-    <Modal open={isVisible} disableEscapeKeyDown keepMounted>
-      <Box
-        sx={{
-          position: 'absolute',
-          top: '50%',
-          left: '50%',
-          transform: 'translate(-50%, -50%)',
-          width: '90%',
-          maxWidth: '1200px',
-          height: '600px',
-          maxHeight: '80vh',
-          overflow: 'auto',
-          boxShadow: 24,
-          borderRadius: '8px',
-          outline: 'none',
-          bgcolor: 'background.paper',
-        }}
-      >
-        <iframe
-          onLoad={getDataFromWallet}
-          id="walletIframe"
-          src={`${VITE_WALLET_IFRAME_URL}/wallet-embed`}
-          width="100%"
-          height="100%"
-          sandbox="allow-scripts allow-same-origin"
-          className="border rounded-md shadow-sm"
-        ></iframe>
-      </Box>
-    </Modal>
-  );
-};
-
-export default IFrameModal;
--- a/packages/frontend/src/components/projects/create/MockConnectGitCard.tsx
+++ b/packages/frontend/src/components/projects/create/MockConnectGitCard.tsx
@ -1,8 +1,6 @@
 import React, { useMemo } from 'react';
 import { SegmentedControls } from 'components/shared/SegmentedControls';
 import { useState } from 'react';
-import { useMediaQuery } from 'usehooks-ts';
-
 import {
  GithubIcon,
  LockIcon,
@ -10,7 +8,7 @@ import {
  TemplateIconType,
 } from 'components/shared/CustomIcon';
 import { relativeTimeISO } from 'utils/time';
-import templates from 'assets/templates';
+import { useMediaQuery } from 'usehooks-ts';

 export const MockConnectGitCard = () => {
  const [segmentedControlsValue, setSegmentedControlsValue] =
@ -48,6 +46,21 @@ export const MockConnectGitCard = () => {
    },
  ];

+  const TEMPLATE_CONTENT = [
+    {
+      name: 'Web app',
+      icon: 'web',
+    },
+    {
+      name: 'Progressive Web App (PWA)',
+      icon: 'pwa',
+    },
+    {
+      name: 'Next.js + React + TailwindCSS',
+      icon: 'next-app',
+    },
+  ];
+
  const renderContent = useMemo(() => {
    if (segmentedControlsValue === 'import') {
      return (
@ -65,7 +78,7 @@ export const MockConnectGitCard = () => {
    }
    return (
      <div className="grid grid-cols-1 lg:grid-cols-2 relative z-0">
-        {templates.map((template, index) => (
+        {TEMPLATE_CONTENT.map((template, index) => (
          <MockTemplateCard key={index} {...template} />
        ))}
      </div>
--- a/packages/frontend/src/components/projects/project/deployments/DeploymentDetailsCard.tsx
+++ b/packages/frontend/src/components/projects/project/deployments/DeploymentDetailsCard.tsx
@ -92,7 +92,7 @@ const DeploymentDetailsCard = ({
    }
  };

-  const fetchDeploymentLogs = useCallback(async () => {
+  const fetchDeploymentLogs = async () => {
    setDeploymentLogs('Loading logs...');
    handleOpenDialog();
    const statusUrl = `${deployment.deployer.deployerApiUrl}/${deployment.applicationDeploymentRequestId}`;
@ -108,7 +108,7 @@ const DeploymentDetailsCard = ({
      );
      setDeploymentLogs(logsRes);
    }
-  }, [deployment.deployer, deployment.applicationDeploymentRequestId]);
+  };

  const renderDeploymentStatus = useCallback(
    (className?: string) => {
@ -127,7 +127,7 @@ const DeploymentDetailsCard = ({
        </Tooltip>
      );
    },
-    [deployment.status, deployment.commitHash, fetchDeploymentLogs],
+    [deployment.status, deployment.commitHash],
  );

  return (
--- a/packages/frontend/src/components/projects/project/settings/GitSelectionSection.tsx
+++ b/packages/frontend/src/components/projects/project/settings/GitSelectionSection.tsx
@ -17,7 +17,6 @@ const GitSelectionSection = ({
        <div className="grow">Github</div>
        <div>{'>'}</div>
      </div>
-      {/* 
      <div
        className="flex gap-4 border-b-2 border-gray-200 cursor-pointer p-1"
        onClick={() => {}}
@ -26,7 +25,6 @@ const GitSelectionSection = ({
        <div className="grow">Gitea</div>
        <div>{'>'}</div>
      </div>
-      */}
    </>
  );
 };
--- a/packages/frontend/src/components/shared/CustomIcon/templates/TemplateIcon.tsx
+++ b/packages/frontend/src/components/shared/CustomIcon/templates/TemplateIcon.tsx
@ -4,7 +4,10 @@ import { cloneIcon } from 'utils/cloneIcon';
 import { PWAIcon } from './PWAIcon';
 import { WebAppIcon } from './WebAppIcon';

-const TEMPLATE_ICONS = ['pwa', 'web'] as const;
+const TEMPLATE_ICONS = [
+  'pwa',
+  'web'
+] as const;
 export type TemplateIconType = (typeof TEMPLATE_ICONS)[number];

 export interface TemplateIconProps extends CustomIconProps {
--- a/packages/frontend/src/components/shared/Sidebar/Sidebar.tsx
+++ b/packages/frontend/src/components/shared/Sidebar/Sidebar.tsx
@ -92,20 +92,10 @@ export const Sidebar = ({ mobileOpen }: SidebarProps) => {
                </a>
              </Tabs.Trigger>
              <Tabs.Trigger icon={<QuestionMarkRoundIcon />} value="">
-                <a
-                  className="cursor-pointer font-mono"
-                  href="https://store.laconic.com/pages/instruction-faq"
-                >
-                  DOCUMENTATION
-                </a>
+                <a className="cursor-pointer font-mono">DOCUMENTATION</a>
              </Tabs.Trigger>
              <Tabs.Trigger icon={<LifeBuoyIcon />} value="">
-                <a
-                  className="cursor-pointer font-mono"
-                  href="https://discord.com/invite/ukhbBemyxY"
-                >
-                  SUPPORT
-                </a>
+                <a className="cursor-pointer font-mono">SUPPORT</a>
              </Tabs.Trigger>
            </Tabs.List>
          </Tabs>
--- a/packages/frontend/src/context/WalletConnectContext.tsx
+++ b/packages/frontend/src/context/WalletConnectContext.tsx
@ -0,0 +1,210 @@
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useRef,
+  useState,
+} from 'react';
+
+import SignClient from '@walletconnect/sign-client';
+import { getSdkError } from '@walletconnect/utils';
+import { SessionTypes } from '@walletconnect/types';
+
+import { walletConnectModal } from '../utils/web3modal';
+import {
+  VITE_LACONICD_CHAIN_ID,
+  VITE_WALLET_CONNECT_ID,
+} from 'utils/constants';
+
+interface ClientInterface {
+  signClient: SignClient | undefined;
+  session: SessionTypes.Struct | undefined;
+  loadingSession: boolean;
+  onConnect: () => Promise<void>;
+  onDisconnect: () => Promise<void>;
+  onSessionDelete: () => void;
+  accounts: { address: string }[];
+}
+
+const ClientContext = createContext({} as ClientInterface);
+
+export const useWalletConnectClient = () => {
+  return useContext(ClientContext);
+};
+
+export const WalletConnectClientProvider = ({
+  children,
+}: {
+  children: JSX.Element;
+}) => {
+  const [signClient, setSignClient] = useState<SignClient>();
+  const [session, setSession] = useState<SessionTypes.Struct>();
+  const [loadingSession, setLoadingSession] = useState(true);
+  const [accounts, setAccounts] = useState<{ address: string }[]>([]);
+
+  const isSignClientInitializing = useRef<boolean>(false);
+
+  const onSessionConnect = useCallback(async (session: SessionTypes.Struct) => {
+    setSession(session);
+  }, []);
+
+  const subscribeToEvents = useCallback(
+    async (client: SignClient) => {
+      client.on('session_update', ({ topic, params }) => {
+        const { namespaces } = params;
+        const currentSession = client.session.get(topic);
+        const updatedSession = { ...currentSession, namespaces };
+        setSession(updatedSession);
+      });
+    },
+    [setSession],
+  );
+
+  const onConnect = async () => {
+    const proposalNamespace = {
+      cosmos: {
+        methods: ['cosmos_sendTokens'],
+        chains: [`cosmos:${VITE_LACONICD_CHAIN_ID}`],
+        events: [],
+      },
+    };
+
+    try {
+      const { uri, approval } = await signClient!.connect({
+        requiredNamespaces: proposalNamespace,
+      });
+
+      if (uri) {
+        walletConnectModal.openModal({ uri });
+        const session = await approval();
+        onSessionConnect(session);
+        walletConnectModal.closeModal();
+      }
+    } catch (e) {
+      console.error(e);
+    }
+  };
+
+  const onDisconnect = useCallback(async () => {
+    if (typeof signClient === 'undefined') {
+      throw new Error('WalletConnect is not initialized');
+    }
+    if (typeof session === 'undefined') {
+      throw new Error('Session is not connected');
+    }
+
+    await signClient.disconnect({
+      topic: session.topic,
+      reason: getSdkError('USER_DISCONNECTED'),
+    });
+
+    onSessionDelete();
+  }, [signClient, session]);
+
+  const onSessionDelete = () => {
+    setAccounts([]);
+    setSession(undefined);
+  };
+
+  const checkPersistedState = useCallback(
+    async (signClient: SignClient) => {
+      if (typeof signClient === 'undefined') {
+        throw new Error('WalletConnect is not initialized');
+      }
+
+      if (typeof session !== 'undefined') return;
+      if (signClient.session.length) {
+        const lastKeyIndex = signClient.session.keys.length - 1;
+        const previousSsession = signClient.session.get(
+          signClient.session.keys[lastKeyIndex],
+        );
+
+        await onSessionConnect(previousSsession);
+        return previousSsession;
+      }
+    },
+    [session, onSessionConnect],
+  );
+
+  const createClient = useCallback(async () => {
+    isSignClientInitializing.current = true;
+    try {
+      const signClient = await SignClient.init({
+        projectId: VITE_WALLET_CONNECT_ID,
+        metadata: {
+          name: 'Deploy App',
+          description: '',
+          url: window.location.href,
+          icons: ['https://avatars.githubusercontent.com/u/92608123'],
+        },
+      });
+
+      setSignClient(signClient);
+      await checkPersistedState(signClient);
+      await subscribeToEvents(signClient);
+      setLoadingSession(false);
+    } catch (e) {
+      console.error('error in createClient', e);
+    }
+    isSignClientInitializing.current = false;
+  }, [setSignClient, checkPersistedState, subscribeToEvents]);
+
+  useEffect(() => {
+    if (!signClient && !isSignClientInitializing.current) {
+      createClient();
+    }
+  }, [signClient, createClient]);
+
+  useEffect(() => {
+    const populateAccounts = async () => {
+      if (!session) {
+        return;
+      }
+      if (!session.namespaces['cosmos']) {
+        console.log('Accounts for cosmos namespace not found');
+        return;
+      }
+
+      const cosmosAddresses = session.namespaces['cosmos'].accounts;
+
+      const cosmosAccounts = cosmosAddresses.map((address) => ({
+        address,
+      }));
+
+      const allAccounts = cosmosAccounts;
+
+      setAccounts(allAccounts);
+    };
+
+    populateAccounts();
+  }, [session]);
+
+  useEffect(() => {
+    if (!signClient) {
+      return;
+    }
+
+    signClient.on('session_delete', onSessionDelete);
+
+    return () => {
+      signClient.off('session_delete', onSessionDelete);
+    };
+  });
+
+  return (
+    <ClientContext.Provider
+      value={{
+        signClient,
+        onConnect,
+        onDisconnect,
+        onSessionDelete,
+        loadingSession,
+        session,
+        accounts,
+      }}
+    >
+      {children}
+    </ClientContext.Provider>
+  );
+};
--- a/packages/frontend/src/index.tsx
+++ b/packages/frontend/src/index.tsx
@ -4,9 +4,10 @@ import assert from 'assert';
 import { GQLClient } from 'gql-client';

 import { ThemeProvider } from '@snowballtools/material-tailwind-react-fork';
+
+import './index.css';
 import '@fontsource/inter';
 import '@fontsource-variable/jetbrains-mono';
-
 import App from './App';
 import reportWebVitals from './reportWebVitals';
 import { GQLClientProvider } from './context/GQLClientContext';
@ -15,7 +16,7 @@ import { Toaster } from 'components/shared/Toast';
 import { LogErrorBoundary } from 'utils/log-error';
 import { BASE_URL } from 'utils/constants';
 import Web3ModalProvider from './context/Web3Provider';
-import './index.css';
+import { WalletConnectClientProvider } from 'context/WalletConnectContext';

 console.log(`v-0.0.9`);

@ -31,14 +32,16 @@ const gqlClient = new GQLClient({ gqlEndpoint });
 root.render(
  <LogErrorBoundary>
    <React.StrictMode>
-      <ThemeProvider>
-        <Web3ModalProvider>
-          <GQLClientProvider client={gqlClient}>
-            <App />
-            <Toaster />
-          </GQLClientProvider>
-        </Web3ModalProvider>
-      </ThemeProvider>
+      <WalletConnectClientProvider>
+        <ThemeProvider>
+          <Web3ModalProvider>
+            <GQLClientProvider client={gqlClient}>
+              <App />
+              <Toaster />
+            </GQLClientProvider>
+          </Web3ModalProvider>
+        </ThemeProvider>
+      </WalletConnectClientProvider>
    </React.StrictMode>
  </LogErrorBoundary>,
 );
--- a/packages/frontend/src/pages/org-slug/projects/Id.tsx
+++ b/packages/frontend/src/pages/org-slug/projects/Id.tsx
@ -60,9 +60,9 @@ const Id = () => {
    fetchProject(id);
  }, [id]);

-  const onUpdate = useCallback(async () => {
+  const onUpdate = async () => {
    await fetchProject(id);
-  }, [fetchProject, id]);
+  };

  return (
    <div className="h-full">
@ -118,11 +118,9 @@ const Id = () => {
                <Tabs.Trigger value="deployments">
                  <Link to="deployments">Deployments</Link>
                </Tabs.Trigger>
-                {/*
                <Tabs.Trigger value="integrations">
                  <Link to="integrations">Integrations</Link>
                </Tabs.Trigger>
-	              */}
                <Tabs.Trigger value="settings">
                  <Link to="settings">Settings</Link>
                </Tabs.Trigger>
--- a/packages/frontend/src/pages/org-slug/projects/create/layout.tsx
+++ b/packages/frontend/src/pages/org-slug/projects/create/layout.tsx
@ -1,14 +1,12 @@
 import { ComponentPropsWithoutRef } from 'react';
 import { Link, Outlet, useParams } from 'react-router-dom';
-import { useMediaQuery } from 'usehooks-ts';
-
-import * as Dialog from '@radix-ui/react-dialog';

 import { Heading } from 'components/shared/Heading';
 import { WavyBorder } from 'components/shared/WavyBorder';
 import { Button } from 'components/shared/Button';
 import { CrossIcon } from 'components/shared/CustomIcon';
 import { cn } from 'utils/classnames';
+import * as Dialog from '@radix-ui/react-dialog';

 export interface CreateProjectLayoutProps
  extends ComponentPropsWithoutRef<'section'> {}
@ -18,7 +16,6 @@ export const CreateProjectLayout = ({
  ...props
 }: CreateProjectLayoutProps) => {
  const { orgSlug } = useParams();
-  const isDesktopView = useMediaQuery('(min-width: 720px)'); // md:

  const closeBtnLink = `/${orgSlug}`;

@ -31,69 +28,72 @@ export const CreateProjectLayout = ({
    </Heading>
  );

-  return isDesktopView ? (
-    // Desktop
-    <section
-      {...props}
-      className={cn(
-        'dark:bg-background h-full flex-col hidden md:flex',
-        className,
-      )}
-    >
-      <div className="sticky top-0">
-        <div className="flex px-6 py-4 dark:bg-overlay bg-base-bg items-center gap-4">
-          {heading}
+  return (
+    <>
+      {/* Desktop */}
+      <section
+        {...props}
+        className={cn(
+          'dark:bg-background h-full flex-col hidden md:flex',
+          className,
+        )}
+      >
+        <div className="sticky top-0">
+          <div className="flex px-6 py-4 dark:bg-overlay bg-base-bg items-center gap-4">
+            {heading}

-          {/* Cannot save btn as variable since responsive variant don't work with compoundVariant */}
-          <Link to={closeBtnLink}>
-            <Button
-              iconOnly
-              variant="primary"
-              leftIcon={<CrossIcon />}
-              aria-label="close"
-            />
-          </Link>
+            {/* Cannot save btn as variable since responsive variant don't work with compoundVariant */}
+            <Link to={closeBtnLink}>
+              <Button
+                iconOnly
+                variant="primary"
+                leftIcon={<CrossIcon />}
+                aria-label="close"
+              />
+            </Link>
+          </div>
+          <WavyBorder />
        </div>
-        <WavyBorder />
-      </div>
-      <section className="px-6 h-full flex-1 py-6 overflow-y-auto">
-        <Outlet />
+
+        <section className="px-6 h-full flex-1 py-6 overflow-y-auto">
+          <Outlet />
+        </section>
      </section>
-    </section>
-  ) : (
-    // Mobile
-    // Setting modal={false} so even if modal is active on desktop, it doesn't block clicks
-    <Dialog.Root modal={false} open={true}>
-      <Dialog.Portal>
-        {/* Not using <Dialog.Overlay> since modal={false} disables it and its content will not show */}
-        <div className="bg-base-canvas fixed inset-0 md:hidden overflow-y-auto p-1">
-          <Dialog.Content className="min-h-full overflow-hidden rounded-2xl bg-base-bg shadow-card focus:outline-none">
-            {/* Heading */}
-            <div className="flex px-6 py-4 h-20 items-center gap-4">
-              {heading}
-              <Dialog.Close asChild>
-                <Link to={closeBtnLink}>
-                  <Button
-                    iconOnly
-                    variant="tertiary"
-                    leftIcon={<CrossIcon />}
-                    aria-label="close"
-                    size="sm"
-                  />
-                </Link>
-              </Dialog.Close>
-            </div>

-            {/* Border */}
-            <WavyBorder />
+      {/* Mobile */}
+      {/* Setting modal={false} so even if modal is active on desktop, it doesn't block clicks */}
+      <Dialog.Root modal={false} open={true}>
+        <Dialog.Portal>
+          {/* Not using <Dialog.Overlay> since modal={false} disables it and its content will not show */}
+          <div className="bg-base-canvas fixed inset-0 md:hidden overflow-y-auto p-1">
+            <Dialog.Content className="min-h-full overflow-hidden rounded-2xl bg-base-bg shadow-card focus:outline-none">
+              {/* Heading */}
+              <div className="flex px-6 py-4 h-20 items-center gap-4">
+                {heading}
+                <Dialog.Close asChild>
+                  <Link to={closeBtnLink}>
+                    <Button
+                      iconOnly
+                      variant="tertiary"
+                      leftIcon={<CrossIcon />}
+                      aria-label="close"
+                      size="sm"
+                    />
+                  </Link>
+                </Dialog.Close>
+              </div>

-            {/* Page content */}
-            <div className="px-4 py-6">
-              <Outlet />
-            </div>
-          </Dialog.Content>
-        </div>
-      </Dialog.Portal>
-    </Dialog.Root>
+              {/* Border */}
+              <WavyBorder />
+
+              {/* Page content */}
+              <div className="px-4 py-6">
+                <Outlet />
+              </div>
+            </Dialog.Content>
+          </div>
+        </Dialog.Portal>
+      </Dialog.Root>
+    </>
  );
 };
--- a/packages/frontend/src/pages/org-slug/projects/id/Overview.tsx
+++ b/packages/frontend/src/pages/org-slug/projects/id/Overview.tsx
@ -24,7 +24,6 @@ import { Domain, DomainStatus } from 'gql-client';
 import { AuctionCard } from 'components/projects/project/overview/Activity/AuctionCard';

 const COMMITS_PER_PAGE = 4;
-const PROJECT_UPDATE_WAIT_MS = 5000;

 const OverviewTabPanel = () => {
  const { octokit } = useOctokit();
@ -34,7 +33,8 @@ const OverviewTabPanel = () => {
  const [liveDomain, setLiveDomain] = useState<Domain>();

  const client = useGQLClient();
-  const { project, onUpdate } = useOutletContext<OutletContextType>();
+
+  const { project } = useOutletContext<OutletContextType>();

  useEffect(() => {
    setFetchingActivities(true);
@ -96,16 +96,7 @@ const OverviewTabPanel = () => {
    };

    fetchRepoActivity();
-  }, [project.repository]);
-
-  useEffect(() => {
-    onUpdate();
-    const timerId = setInterval(() => {
-      onUpdate();
-    }, PROJECT_UPDATE_WAIT_MS);
-
-    return () => clearInterval(timerId);
-  }, [onUpdate]);
+  }, [octokit, project]);

  useEffect(() => {
    const fetchLiveProdDomain = async () => {
--- a/packages/frontend/src/pages/org-slug/projects/id/Settings.tsx
+++ b/packages/frontend/src/pages/org-slug/projects/id/Settings.tsx
@ -10,7 +10,7 @@ import {
 } from 'components/shared/Tabs';
 import {
  BranchStrokeIcon,
-  //CollaboratorsIcon,
+  CollaboratorsIcon,
  GearIcon,
  GlobeIcon,
  SwitchIcon,
@ -37,11 +37,11 @@ const tabsData = [
    icon: <SwitchIcon />,
    value: 'environment-variables',
  },
-  //  {
-  //    label: 'Collaborators',
-  //    icon: <CollaboratorsIcon />,
-  //    value: 'collaborators',
-  //  },
+  {
+    label: 'Collaborators',
+    icon: <CollaboratorsIcon />,
+    value: 'collaborators',
+  },
 ];

 const SettingsTabPanel = () => {
--- a/packages/frontend/src/pages/org-slug/projects/id/settings/EnvironmentVariablesForm.tsx
+++ b/packages/frontend/src/pages/org-slug/projects/id/settings/EnvironmentVariablesForm.tsx
@ -73,17 +73,17 @@ const EnvironmentVariablesForm = () => {
      <div className="flex gap-2 p-2">
        <Checkbox
          label="Production"
-          labelProps={{ className: 'text-gray-900 dark:text-white' }}
+          labelProps={{ className: "text-gray-900 dark:text-white" }}
          {...register('environment.production')}
        />
        <Checkbox
          label="Preview"
-          labelProps={{ className: 'text-gray-900 dark:text-white' }}
+          labelProps={{ className: "text-gray-900 dark:text-white" }}
          {...register('environment.preview')}
        />
        <Checkbox
          label="Development"
-          labelProps={{ className: 'text-gray-900 dark:text-white' }}
+          labelProps={{ className: "text-gray-900 dark:text-white" }}
          {...register('environment.development')}
        />
      </div>
--- a/packages/frontend/src/pages/org-slug/projects/id/settings/General.tsx
+++ b/packages/frontend/src/pages/org-slug/projects/id/settings/General.tsx
@ -18,6 +18,7 @@ const GeneralTabPanel = () => {
  const client = useGQLClient();
  const { toast } = useToast();
  const { project, onUpdate } = useOutletContext<OutletContextType>();
+  console.log(project);

  const [transferOrganizations, setTransferOrganizations] = useState<
    SelectOption[]
--- a/packages/frontend/src/pages/org-slug/projects/id/settings/domains/add/Config.tsx
+++ b/packages/frontend/src/pages/org-slug/projects/id/settings/domains/add/Config.tsx
@ -63,7 +63,10 @@ const Config = () => {
  return (
    <ProjectSettingContainer headingText="Setup domain name">
      <p className="text-blue-gray-500">
-        Add the following records to your domain.
+        Add the following records to your domain.&nbsp;
+        <a href="https://www.namecheap.com/" target="_blank" rel="noreferrer">
+          <span className="underline">Go to NameCheap</span>
+        </a>
      </p>

      <Table>
@ -79,13 +82,13 @@ const Config = () => {
          <Table.Row>
            <Table.RowHeaderCell>A</Table.RowHeaderCell>
            <Table.Cell>@</Table.Cell>
-            <Table.Cell>IP.OF.THE.SP</Table.Cell>
+            <Table.Cell>56.49.19.21</Table.Cell>
          </Table.Row>

          <Table.Row>
            <Table.RowHeaderCell>CNAME</Table.RowHeaderCell>
-            <Table.Cell>subdomain</Table.Cell>
-            <Table.Cell>domain.of.the.sp</Table.Cell>
+            <Table.Cell>www</Table.Cell>
+            <Table.Cell>cname.snowballtools.xyz</Table.Cell>
          </Table.Row>
        </Table.Body>
      </Table>
--- a/packages/frontend/src/pages/org-slug/projects/id/settings/domains/add/index.tsx
+++ b/packages/frontend/src/pages/org-slug/projects/id/settings/domains/add/index.tsx
@ -49,6 +49,9 @@ const AddDomain = () => {
      <div className=" w-2/3 mx-auto">
        <div className="bg-blue-gray-50 dark:bg-overlay rounded-lg mt-6 mb-10">
          <div className="flex justify-start gap-3 p-5">
+            <i className="bg-gray-100 dark:bg-overlay dark:text-foreground w-12 h-12 rounded-lg">
+              ^
+            </i>
            <Typography
              className="my-auto w-1/3 dark:text-foreground"
              variant="h5"
--- a/packages/frontend/src/utils/constants.ts
+++ b/packages/frontend/src/utils/constants.ts
@ -12,4 +12,3 @@ export const VITE_WALLET_CONNECT_ID = import.meta.env.VITE_WALLET_CONNECT_ID;
 export const VITE_BUGSNAG_API_KEY = import.meta.env.VITE_BUGSNAG_API_KEY;
 export const VITE_LIT_RELAY_API_KEY = import.meta.env.VITE_LIT_RELAY_API_KEY;
 export const VITE_LACONICD_CHAIN_ID = import.meta.env.VITE_LACONICD_CHAIN_ID;
-export const VITE_WALLET_IFRAME_URL = import.meta.env.VITE_WALLET_IFRAME_URL;