feat: integrate signx

components/Modal/Modal.tsx

@@ -1,6 +1,7 @@
 import { HTMLAttributes, ReactNode, useEffect, useRef, useState } from 'react';
 import ReactDOM from 'react-dom';
 import cls from 'classnames';
+import { createRoot } from 'react-dom/client';
 
 import styles from './Modal.module.scss';
 import Cross from '@icons/cross.svg';
@@ -56,3 +57,29 @@ function Modal({ onClose, children, title, className, ...other }: ModalProps) {
 }
 
 export default Modal;
+
+/**
+ * Render a modal with the given content
+ * @param content The content to render in the modal
+ * @param onClose Function to execute when manually close the modal through clicking the close button or backdrop
+ * @returns Function to close the modal, only removing the React component, not executing the onClose function
+ */
+export const renderModal = (content: ReactNode, onClose: () => void) => {
+  const modalDiv = document.getElementById('custom-root') as HTMLElement;
+  const root = createRoot(modalDiv);
+
+  // Function to execute when manually close the modal
+  const handleManualClose = () => {
+    handleClose();
+    onClose();
+  };
+
+  const handleClose = () => {
+    root.unmount(); // Unmount the React component
+  };
+
+  // Render your Modal component into the div
+  root.render(<Modal onClose={handleManualClose}>{content}</Modal>);
+
+  return handleClose;
+};

components/SignX/SignX.module.scss

@@ -0,0 +1,44 @@
+.signx {
+  padding: 15px;
+
+  h2 {
+    color: var(--primary-color);
+    margin-bottom: 0;
+  }
+
+  p {
+    margin-top: 10px;
+  }
+
+  a {
+    color: var(--primary-color);
+    text-decoration: none;
+  }
+}
+
+.time {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  // margin-bottom: 10px;
+
+  p {
+    margin: 0;
+    padding: 0;
+    font-size: 12px;
+  }
+}
+
+.timeWrapper {
+  margin-bottom: 18px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+}
+
+.deeplink {
+  padding-top: 0px;
+  font-size: 12px;
+}

components/SignX/SignX.tsx

@@ -0,0 +1,101 @@
+import { FC, HTMLAttributes, useEffect, useRef } from 'react';
+import QRCode from 'react-qr-code';
+import { CountdownCircleTimer } from 'react-countdown-circle-timer';
+import { isMobile, isIOS, isMacOs } from 'react-device-detect';
+import { SIGN_X_CLEAN_DEEPLINK, convertDataToDeeplink } from '@ixo/signx-sdk';
+
+import styles from './SignX.module.scss';
+import { getCSSVariable } from '@utils/styles';
+
+type SignXProps = {
+  title: string;
+  subtitle?: string;
+  data: any;
+  timeout: number;
+  transactSequence?: number;
+  isNewSession?: boolean;
+} & HTMLAttributes<HTMLDivElement>;
+
+const SignX: FC<SignXProps> = ({ title, subtitle, data, timeout, transactSequence }) => {
+  const isNewSession = transactSequence === 1;
+  const firstLoad = useRef(false);
+  const timeoutFull = (timeout - 1000) / 1000;
+  const timeoutThird = timeoutFull / 3;
+  const deeplink = convertDataToDeeplink(isNewSession ? data : { type: SIGN_X_CLEAN_DEEPLINK });
+  const downloadLink =
+    isIOS || isMacOs
+      ? `https://apps.apple.com/app/impacts-x/id6444948058`
+      : `https://play.google.com/store/apps/details?id=com.ixo.mobile`;
+
+  useEffect(() => {
+    if (firstLoad.current) return;
+    firstLoad.current = true;
+
+    if (isMobile) {
+      console.log('isMobile');
+      setTimeout(() => {
+        const newWindow = window.open(deeplink, '_top', 'noopener,noreferrer');
+        if (newWindow) newWindow.opener = null;
+      });
+    }
+  }, []);
+
+  return (
+    <div className={styles.signx}>
+      <h2>{title}</h2>
+      {!isNewSession ? (
+        <p>
+          Please open your{' '}
+          <a href={downloadLink} rel='noopener noreferrer' target='_blank'>
+            Impacts X App
+          </a>{' '}
+          and sign transaction #{transactSequence}
+        </p>
+      ) : subtitle ? (
+        <p>{subtitle}</p>
+      ) : (
+        <p>
+          Scan QR with your{' '}
+          <a href={downloadLink} rel='noopener noreferrer' target='_blank'>
+            Impacts X App
+          </a>
+        </p>
+      )}
+      <div className={styles.timeWrapper}>
+        <CountdownCircleTimer
+          isPlaying
+          duration={timeoutFull}
+          colors={[getCSSVariable('--primary-color') || ('#004777' as any), '#F7B801', '#A30000']}
+          colorsTime={[timeoutFull, timeoutThird, 0]}
+          size={75}
+          strokeWidth={5}
+        >
+          {({ remainingTime, color }) => (
+            <div className={styles.time} style={{ color: color }}>
+              <div>{remainingTime}</div>
+              <p>seconds</p>
+            </div>
+          )}
+        </CountdownCircleTimer>
+      </div>
+      {isNewSession && (
+        <>
+          <QRCode value={JSON.stringify(data)} size={250} />
+          <p className={styles.deeplink}>
+            If you are on a mobile device please install the{' '}
+            <a href={downloadLink} rel='noopener noreferrer' target='_blank'>
+              Impacts X App
+            </a>{' '}
+            and then click{' '}
+            <a href={deeplink} rel='noopener noreferrer' target='_blank'>
+              here
+            </a>
+            .
+          </p>
+        </>
+      )}
+    </div>
+  );
+};
+
+export default SignX;

components/Wallets/Wallets.tsx

@@ -49,6 +49,7 @@ const Wallets = ({ onSelected, className, ...other }: WalletsProps) => {
               onClick={() => onSelected(WALLET_TYPE.walletConnect)}
             />
           )}
+          <WalletCard name={WALLETS.signX.name} img={WALLETS.signX.img} onClick={() => onSelected(WALLET_TYPE.signX)} />
         </>
       ) : (
         <>

constants/config.json

@@ -10,6 +10,122 @@
   "about": "config.about",
   "termsAndConditions": "https://my.jambo.earth/legal/termsOfUse",
   "actions": [
+    {
+      "id": "eKXPPhewkJDLbE1bq1iboz",
+      "steps": [
+        {
+          "id": "select_token_and_amount",
+          "name": "Select token and amount"
+        },
+        {
+          "id": "get_receiver_address",
+          "name": "Get receiver address"
+        },
+        {
+          "id": "bank_MsgSend",
+          "name": "Review and sign"
+        }
+      ],
+      "name": "Send",
+      "description": "Crypto Send",
+      "image": "eKXPPhewkJDLbE1bq1iboa.png"
+    },
+    {
+      "id": "eKXPPhewkJDLbE1bq1ib78",
+      "steps": [
+        {
+          "id": "select_token_and_amount",
+          "name": "Select token and amount"
+        },
+        {
+          "id": "get_receiver_address",
+          "name": "Get receiver address"
+        },
+        {
+          "id": "bank_MsgMultiSend",
+          "name": "Review and sign"
+        }
+      ],
+      "name": "Multi Send",
+      "description": "Crypto Send",
+      "image": "eKXPPhewkJDLbE1bq1iboa.png"
+    },
+    {
+      "id": "eKXPPhewkJDLbE1bq1iboa",
+      "steps": [
+        {
+          "id": "get_validator_delegate",
+          "name": "Get validator address"
+        },
+        {
+          "id": "select_amount_delegate",
+          "name": "Define amount to delegate"
+        },
+        {
+          "id": "staking_MsgDelegate",
+          "name": "Review and sign"
+        }
+      ],
+      "name": "Delegate",
+      "description": "Delegate tokens on the IXO Network",
+      "image": "eKXPPhewkJDLbE1bq1iboa.png"
+    },
+    {
+      "id": "eKXPPhewkJDLbE1bq1ibob",
+      "steps": [
+        {
+          "id": "get_delegated_validator_undelegate",
+          "name": "Get delegation validator address"
+        },
+        {
+          "id": "select_amount_undelegate",
+          "name": "Define amount to undelegate"
+        },
+        {
+          "id": "staking_MsgUndelegate",
+          "name": "Review and sign"
+        }
+      ],
+      "name": "Undelegate",
+      "description": "Undelegate tokens on the IXO Network",
+      "image": "eKXPPhewkJDLbE1bq1ibob.png"
+    },
+    {
+      "id": "eKXPPhewkJDLbE1bq1iboc",
+      "steps": [
+        {
+          "id": "get_delegated_validator_redelegate",
+          "name": "Get delegation validator address"
+        },
+        {
+          "id": "select_amount_redelegate",
+          "name": "Define amount to redelegate"
+        },
+        {
+          "id": "get_validator_redelegate",
+          "name": "Get validator address"
+        },
+        {
+          "id": "staking_MsgRedelegate",
+          "name": "Review and sign"
+        }
+      ],
+      "name": "Redelegate",
+      "description": "Redelegate tokens on the IXO Network",
+      "image": "eKXPPhewkJDLbE1bq1iboc.png"
+    },
+    {
+      "id": "eKXPPhewkJDLbE1bq1ibod",
+      "steps": [
+        {
+          "id": "distribution_MsgWithdrawDelegatorReward",
+          "name": "Review and sign"
+        }
+      ],
+      "name": "Claim Rewards",
+      "description": "Claim rewards on your delegations.",
+      "image": "eKXPPhewkJDLbE1bq1ibod.png"
+    },
     {
       "id": "eKXPPhewkJDLbE1bq1iboe",
       "steps": [

constants/events.ts

@@ -3,4 +3,5 @@ export enum EVENT_LISTENER_TYPE {
   wc_sessionupdate = 'wc_sessionupdate',
   wc_sessiondelete = 'wc_sessiondelete',
   wc_sessionevent = 'wc_sessionevent',
+  wallet_logout = 'wallet_logout',
 }

constants/urls.ts

@@ -0,0 +1,5 @@
+export const SIGN_X_RELAYERS = {
+  devnet: 'https://signx.devnet.ixo.earth',
+  testnet: 'https://signx.testnet.ixo.earth',
+  mainnet: 'https://signx.ixo.earth',
+};

constants/wallet.ts

@@ -16,6 +16,11 @@ export const WALLETS = {
     img: '/images/wallets/wallet-connect.png',
     type: WALLET_TYPE.walletConnect,
   },
+  [WALLET_TYPE.signX]: {
+    name: 'SignX',
+    img: '/images/wallets/signX.png',
+    type: WALLET_TYPE.signX,
+  },
 };
 
 export const WalletConnectProjectId = process.env.NEXT_PUBLIC_WC_PROJECT_ID;

contexts/chain.tsx

@@ -60,7 +60,9 @@ export const ChainProvider = ({ children }: HTMLAttributes<HTMLDivElement>) => {
     try {
       const chainInfo = getChainInfoByChainId(chains, currentChain.chainId);
       if (!chainInfo) throw new Error('Unable to create query client - no chain info');
-      const queryClient = await createQueryClient(chainInfo.rpc);
+      const queryClient = await createQueryClient(
+        currentChain.chainId === 'ixo-5' ? 'https://impacthub.ixo.world/rpc/' : chainInfo.rpc,
+      );
       queryClientRef.current = queryClient;
     } catch (error) {
       if (queryClientRef.current) queryClientRef.current = undefined;

contexts/gov.tsx

@@ -5,7 +5,7 @@ import { PROPOSAL_DATA, PROPOSAL_STATE } from 'types/proposals';
 import useWalletContext from '@hooks/useWalletContext';
 import useChainContext from '@hooks/useChainContext';
 import { timestampToDate } from '@utils/timestamp';
-import { queryVote } from '@utils/query';
+import { queryProposals, queryVote } from '@utils/query';
 
 type GovContextType = {
   proposals: PROPOSAL_STATE;
@@ -43,12 +43,15 @@ const GovProvider = ({ children }: GovProviderProps) => {
       proposalsLoading.current = true;
       setProposals((prevState) => ({ ...prevState, loading: proposalsLoading.current }));
       if (!queryClient) throw new Error('QueryClient is not defined');
-      const proposalsResponse = await queryClient.cosmos.gov.v1beta1.proposals({
-        proposalStatus: cosmos.gov.v1beta1.ProposalStatus.PROPOSAL_STATUS_UNSPECIFIED,
-        voter: '',
-        depositor: '',
-      });
-      const proposalData = (proposalsResponse?.proposals ?? []).map((proposal) => {
+      const proposalsResponse = await queryProposals(
+        queryClient,
+        cosmos.gov.v1beta1.ProposalStatus.PROPOSAL_STATUS_UNSPECIFIED,
+        '',
+        '',
+        0,
+        50,
+      );
+      const proposalData = proposalsResponse.map((proposal) => {
         try {
           if (!proposal.content) throw new Error('No content');
           const content = cosmos.gov.v1beta1.TextProposal.decode(proposal.content.value);

contexts/theme.tsx

@@ -36,6 +36,7 @@ export const ThemeProvider = ({ children }: HTMLAttributes<HTMLDivElement>) => {
         {children}
 
         <div id='modal-root'></div>
+        <div id='custom-root'></div>
       </div>
     </ThemeContext.Provider>
   );