Walletconnect quicksign

.github/workflows/pact.yaml

@@ -12,12 +12,29 @@ jobs:
     steps:
       - uses: actions/checkout@v2
 
+      - name: Ensure bash is installed
+        run: |
+          sudo apt-get update && sudo apt-get install -y bash
+          echo "Bash version:"
+          bash --version
+
+      - name: Install OpenSSL Compatibility
+        run: |
+          sudo apt-get update
+          sudo apt-get install -y libssl3 libssl-dev
+
       - name: Install pact
         run: |
           mkdir -p ${{ github.workspace }}/bin
           cd ${{ github.workspace }}/bin
-          wget https://github.com/kadena-io/pact/releases/download/v4.11.0/pact-4.11.0-linux-20.04.zip
-          unzip "pact*.zip"
+
+          # Download the latest Pact binary
+          wget https://github.com/kadena-io/pact/releases/download/v4.11.0/pact-4.11.0-linux-22.04.zip
+
+          # Extract the tar.gz file
+          unzip pact-4.11.0-linux-22.04.zip
+
+          # Ensure the binary is executable
           chmod +x pact
 
       - name: Install z3
@@ -27,26 +44,34 @@ jobs:
           architecture: "x64"
           distribution: "ubuntu-18.04"
 
-      - name: List files in pact directory
-        run: ls -la ${{ github.workspace }}/pact
+      - name: Verify Pact installation
+        run: |
+          file ${{ github.workspace }}/bin/pact
+          ${{ github.workspace }}/bin/pact --version || echo "PACT is not executable!"
 
-      - name: Verify pact installation
+      - name: Debug file paths and permissions
         run: |
-          ${{ github.workspace }}/bin/pact --version
+          ls -la ${{ github.workspace }}/pact
+          ls -la ${{ github.workspace }}/bin
 
-      - name: Make tests.sh executable
-        run: chmod +x ${{ github.workspace }}/pact/tests.sh
+      - name: Ensure tests.sh uses Bash
+        run: |
+          sed -i '1s|.*|#!/usr/bin/env bash|' ${{ github.workspace }}/pact/tests.sh
+          chmod +x ${{ github.workspace }}/pact/tests.sh
 
       - name: Run tests.sh script
         run: |
           cd ${{ github.workspace }}/pact
-          PACT_BIN=${{ github.workspace }}/bin/pact bash tests.sh > tests.log
+          PACT_BIN=${{ github.workspace }}/bin/pact
+          bash tests.sh > tests.log 2>&1
           echo "Output of tests.sh:"
-          cat tests.log
-          str=$(tail -1 tests.log | grep "All files loaded successfully.")
-          if [ -n "$str" ]; then
+          cat tests.log || echo "tests.log not found!"
+
+          # Check if the script succeeded
+          if grep -q "All files loaded successfully." tests.log; then
+              echo "✅ Pact tests passed"
               exit 0
           else
-              echo "Pact tests failed"
+              echo "❌ Pact tests failed"
               exit 1
           fi

web/package.json

@@ -41,10 +41,13 @@
                 "react-dom": "^18",
                 "react-feather": "^2.0.10",
                 "react-icons": "^5.3.0",
+                "react-markdown": "^9.0.3",
                 "react-spring": "^9.7.4",
                 "react-use-gesture": "^9.1.3",
                 "rebass": "^4.0.7",
                 "recharts": "^2.13.2",
+                "remark-breaks": "^4.0.0",
+                "remark-gfm": "^4.0.1",
                 "sharp": "^0.33.5",
                 "styled-components": "^6.1.13",
                 "svgo": "^3.2.0",

web/src/constants/kadenaHelper.ts

@@ -8,6 +8,6 @@ export const GAS = {
 export const KADENA_TX_CONFIG = {
   TTL: 28800,
   GAS_LIMIT: 3000,
-  GAS_PRICE: 0.000001,
+  GAS_PRICE: 0.0000001,
   CHAIN_ID: KADENA_CHAIN_ID,
 };

web/src/features/bond/LockupsOverTimeBarChart.tsx

@@ -25,6 +25,21 @@ interface CustomTooltipProps extends TooltipProps<number, string> {
   label?: string;
 }
 
+const CustomTooltip: React.FC<CustomTooltipProps> = ({
+  active,
+  payload,
+  label,
+}) => {
+  if (active && payload && payload.length) {
+    return (
+      <div className={styles.analyticsTooltip}>
+        <p>{`${label} : ${payload[0].value.toLocaleString()} KDA`}</p>
+      </div>
+    );
+  }
+  return null;
+};
+
 const LockupsOverTimeBarChart: React.FC = () => {
   const lockupSummaryBar = useAppSelector(selectLockupSummaryBar) || [];
   const displayAmount = useAppSelector(selectDisplayAmount);
@@ -47,7 +62,7 @@ const LockupsOverTimeBarChart: React.FC = () => {
   if (!lockupSummaryBar) {
     return (
       <div>
-        <AppLoader true size="24px" stroke="#E27B38" />
+        <AppLoader size="24px" stroke="#E27B38" />
       </div>
     );
   }

web/src/features/layout/Head.tsx

@@ -36,27 +36,6 @@ export default function Head() {
     setHasMounted(true);
   }, []);
 
-  useEffect(() => {
-    if (
-      kda.connector?.constructor?.name === "WalletConnect" &&
-      gasStationEnabled
-    ) {
-      // Disable gas station for WalletConnect users if currently enabled
-      dispatch(toggleGasStation());
-
-      const popupShown = localStorage.getItem(popupShownKey);
-
-      if (!popupShown) {
-        addPopup({
-          reqKey: undefined,
-          msg: `Gas station disabled due to known issues with your provider.`,
-          status: "WARNING",
-        });
-        localStorage.setItem(popupShownKey, "true");
-      }
-    }
-  }, [kda.connector, dispatch]);
-
   return (
     <div
       className={`headerWrapper headerWrapperWithBorder ${

web/src/features/poll/CollapsiblePollDescription.tsx

@@ -0,0 +1,31 @@
+import PollDescription from "./PollDescription";
+import React from "react";
+
+const CollapsiblePollDescription: React.FC<{ description: string }> = ({
+  description,
+}) => {
+  const [expanded, setExpanded] = React.useState(false);
+  const maxLength = 300; // adjust as needed
+  const isLong = description.length > maxLength;
+  const displayedText =
+    !expanded && isLong ? description.slice(0, maxLength) + "..." : description;
+
+  return (
+    <div>
+      <PollDescription description={displayedText} />
+      {isLong && (
+        <span
+          className="cursor-pointer text-blue-500 ml-2"
+          onClick={(e) => {
+            e.stopPropagation();
+            setExpanded(!expanded);
+          }}
+        >
+          {expanded ? "Show less" : "Show more"}
+        </span>
+      )}
+    </div>
+  );
+};
+
+export default CollapsiblePollDescription;

web/src/features/poll/PollDescription.tsx

@@ -0,0 +1,42 @@
+import React from "react";
+import ReactMarkdown from "react-markdown";
+import remarkBreaks from "remark-breaks";
+import remarkGfm from "remark-gfm";
+
+interface PollDescriptionProps {
+  description: string;
+}
+
+const PollDescription: React.FC<PollDescriptionProps> = ({ description }) => {
+  return (
+    <div className="poll-description-markdown">
+      <ReactMarkdown
+        // Plugins for single-line breaks & GitHub-Flavored Markdown
+        remarkPlugins={[remarkBreaks, remarkGfm]}
+        // Override default rendering for certain elements
+        components={{
+          h1: ({ node, ...props }) => (
+            <h1 className="text-2xl font-bold my-4" {...props} />
+          ),
+          h2: ({ node, ...props }) => (
+            <h2 className="text-xl font-semibold my-3" {...props} />
+          ),
+          h3: ({ node, ...props }) => (
+            <h3 className="text-lg font-semibold my-2" {...props} />
+          ),
+          ul: ({ node, ...props }) => (
+            <ul className="list-disc list-inside my-2" {...props} />
+          ),
+          ol: ({ node, ...props }) => (
+            <ol className="list-decimal list-inside my-2" {...props} />
+          ),
+          li: ({ node, ...props }) => <li className="ml-4" {...props} />,
+        }}
+      >
+        {description}
+      </ReactMarkdown>
+    </div>
+  );
+};
+
+export default PollDescription;

web/src/features/poll/Polls.tsx

@@ -1,4 +1,5 @@
 import React, { useState, useEffect } from "react";
+import ReactMarkdown from "react-markdown";
 import { useAppDispatch, useAppSelector } from "@/app/hooks";
 import {
   fetchAllPolls,
@@ -30,6 +31,7 @@ import { Dropdown } from "@/features/components/Dropdown";
 import { getAllBondsAsync, selectAllBonds } from "../bond/bondSlice";
 import { Bond } from "../bond/types";
 import { OptionType } from "../components/Dropdown/types";
+import CollapsiblePollDescription from "./CollapsiblePollDescription";
 
 const Polls: React.FC = () => {
   const dispatch = useAppDispatch();
@@ -390,11 +392,13 @@ const Polls: React.FC = () => {
                   >
                     {p.poll.title}
                   </h2>
-                  <p
+                  <div
                     className={`${styles.cardItem} ${styles.limitedWidthPoll} text-justify`}
                   >
-                    {p.poll.description}
-                  </p>
+                    <CollapsiblePollDescription
+                      description={p.poll.description}
+                    />
+                  </div>
                 </div>
                 <div className="mt-auto flex justify-between space-x-2">
                   <button

web/src/features/poll/ProjectedQuorum.tsx

@@ -12,27 +12,48 @@ import {
 import { PollDTO } from "@/features/poll/types";
 import styles from "../../styles/main.module.css"; // Ensure your styles are imported
 
+// Define an array of colors for the dynamic gradient
+const COLORS = [
+  "#4A9079", // k-Green-default
+  "#E41968", // k-Pink-default
+  "#E27B38", // k-Orange-default
+  "#F0EAE6", // k-Cream-default
+  "#ACB4BA", // dark-blue-200
+  "#EDC4AB", // k-Ltorange-default
+  "#C4E9DD", // k-Green-200
+  "#FFA3C3", // lighter-pink
+  "#436270", // medium-blue
+  "#071D2F", // dark-blue-default
+];
+
 const QuorumProgressBar: FC<{ poll: PollDTO; pollingPower: number }> = ({
   poll,
   pollingPower,
 }) => {
-
-
-  const totalPreviousVotes = poll.pollOptions.reduce((acc, option) => acc + option.votesPollingPower, 0);
+  const totalPreviousVotes = poll.pollOptions.reduce(
+    (acc, option) => acc + option.votesPollingPower,
+    0,
+  );
   const quorum = poll.quorum;
   const previousPercentage = Math.min((totalPreviousVotes / quorum) * 100, 100);
-  const totalVotesPercentage = Math.min(((totalPreviousVotes + pollingPower) / quorum) * 100, 100);
-  const differencePercentage = Math.max(0, totalVotesPercentage - previousPercentage);
-
+  const totalVotesPercentage = Math.min(
+    ((totalPreviousVotes + pollingPower) / quorum) * 100,
+    100,
+  );
+  const differencePercentage = Math.max(
+    0,
+    totalVotesPercentage - previousPercentage,
+  );
 
+  // Data using numeric values for proper chart layout.
   const data = [
     {
       name: "Quorum Progress",
-      previous: previousPercentage.toFixed(2),
-      total: totalVotesPercentage.toFixed(2),
-      difference: differencePercentage.toFixed(2),
+      previous: previousPercentage,
+      difference: differencePercentage,
     },
   ];
+
   return (
     <div className="w-full flex flex-col justify-center items-center">
       <ResponsiveContainer width="100%" height={100}>
@@ -48,31 +69,41 @@ const QuorumProgressBar: FC<{ poll: PollDTO; pollingPower: number }> = ({
             bottom: 5,
           }}
         >
+          {/* Define the gradient for the previous votes */}
+          <defs>
+            <linearGradient id="quorumGradient" x1="0" y1="0" x2="1" y2="0">
+              {COLORS.map((color, index) => (
+                <stop
+                  key={index}
+                  offset={`${(index / (COLORS.length - 1)) * 100}%`}
+                  stopColor={color}
+                />
+              ))}
+            </linearGradient>
+          </defs>
           <XAxis type="number" domain={[0, 100]} hide />
           <YAxis type="category" dataKey="name" hide />
           <Tooltip
-            formatter={(value: any) => `${value}%`}
+            formatter={(value: any) => `${value.toFixed(2)}%`}
             contentStyle={{ backgroundColor: "#fff", borderColor: "#ccc" }}
             itemStyle={{ color: "#000" }}
           />
+          {/* Gradient for existing quorum progress */}
           <Bar
             stackId="a"
             dataKey="previous"
             isAnimationActive={false}
+            fill="url(#quorumGradient)"
           />
-          <Bar
-            stackId="a"
-            dataKey="difference"
-            className={differencePercentage > 0 ? styles.blink : ""}
-          />
+          {/* Light gray for the difference/projection */}
+          <Bar stackId="a" dataKey="difference" fill="#e0e0e0" />
         </BarChart>
       </ResponsiveContainer>
       <div className="mt-2 flex flex-col items-center">
         <div>Current Quorum: {previousPercentage.toFixed(2)}%</div>
-        <div>Quorum Impact: {`${differencePercentage.toFixed(2)}%`}</div>
+        <div>Quorum Impact: {differencePercentage.toFixed(2)}%</div>
         <div>
-          New Quorum: {(previousPercentage + differencePercentage).toFixed(2)}
-          %
+          New Quorum: {(previousPercentage + differencePercentage).toFixed(2)}%
         </div>
       </div>
     </div>