Merge pull request #1415 from jordan-ae/self-assign

humansinstitute · web-flow · commit 8d2b541d8e42 · 2025-04-07T13:06:19.000+08:00
Add Self Assignment Component to Bounty Modal
diff --git a/src/people/interfaces.ts b/src/people/interfaces.ts
@@ -265,6 +265,7 @@ export interface WantedSummaryProps {
   owner_id?: string;
   markPaidOrUnpaid?: ReactNode;
   isEditButtonDisable?: boolean;
+  stakeMin?: number;
 }
 
 export type LocalPaymeentState = 'UNKNOWN' | 'PAID' | 'UNPAID';
@@ -342,6 +343,8 @@ export interface CodingBountiesProps extends WantedSummaryProps {
   assigneeLabel?: { [key: string]: any };
   actionButtons?: boolean | JSX.Element;
   unlock_code?: string;
+  stake_min?: number;
+  is_stakable?: boolean;
 }
 
 export interface CodingViewProps extends WantedSummaryProps {
@@ -443,6 +446,8 @@ export interface WantedViews2Props extends WantedViewsProps {
   fromBountyPage?: boolean;
   activeWorkspace?: string;
   isBountyLandingPage?: boolean;
+  is_stakable?: boolean;
+  stake_min?: number;
 }
 
 export interface AboutViewProps {
diff --git a/src/people/widgetViews/WantedView.tsx b/src/people/widgetViews/WantedView.tsx
@@ -125,6 +125,8 @@ function WantedView(props: WantedViews2Props) {
       return (
         <MobileView
           {...props}
+          is_stakable={props.is_stakable}
+          stake_min={props.stake_min}
           labels={labels}
           key={ticketUrl}
           saving={saving ?? false}
diff --git a/src/people/widgetViews/summaries/WantedSummary.tsx b/src/people/widgetViews/summaries/WantedSummary.tsx
@@ -60,7 +60,8 @@ function WantedSummary(props: WantedSummaryProps) {
     feature_uuid,
     phase_uuid,
     id,
-    isEditButtonDisable
+    isEditButtonDisable,
+    stakeMin
   } = props;
   const titleString = one_sentence_summary || title || '';
   const bountyPath = `/bounty/${id}`;
@@ -621,6 +622,7 @@ function WantedSummary(props: WantedSummaryProps) {
           isEditButtonDisable={isEditButtonDisable}
           phase_uuid={phase_uuid}
           feature_uuid={feature_uuid}
+          stakeMin={stakeMin}
         />
       );
     }
diff --git a/src/people/widgetViews/summaries/wantedSummaries/CodingBounty.tsx b/src/people/widgetViews/summaries/wantedSummaries/CodingBounty.tsx
@@ -61,7 +61,7 @@ import {
 } from './style';
 import { getTwitterLink } from './lib';
 import CodingMobile from './CodingMobile';
-import { BountyEstimates } from './Components';
+import { BountyEstimates, SelfAssignButton } from './Components';
 import CodingBountyProofModal from './CodingBountyProofModal';
 let interval;
 
@@ -123,7 +123,9 @@ function MobileView(props: CodingBountiesProps) {
     isEditButtonDisable,
     completed,
     payment_failed,
-    payment_pending
+    payment_pending,
+    stake_min,
+    is_stakable
   } = props;
   const color = colors['light'];
 
@@ -147,6 +149,8 @@ function MobileView(props: CodingBountiesProps) {
   const [menuOpen, setMenuOpen] = useState<number | null>(null);
   const textareaRef = useRef<HTMLTextAreaElement>(null);
   const bountyID = id?.toString() || '';
+  const [showComingSoonModal, setShowComingSoonModal] = useState(false);
+  const [featureFlags, setFeatureFlags] = useState<any>({});
 
   useEffect(() => {
     if (textareaRef.current) {
@@ -415,7 +419,7 @@ function MobileView(props: CodingBountiesProps) {
 
   const makePayment = async () => {
     setPaymentLoading(true);
-    // If the bounty has a commitment fee, add the fee to the user payment
+    // If the bounty has a commitment fee, add the fee to the user's payment
     const price = Number(props.price);
     // if there is an workspace and the workspace's
     // buudget is sufficient keysend to the user immediately
@@ -717,6 +721,25 @@ function MobileView(props: CodingBountiesProps) {
   let pillColor = color.statusAssigned;
   let pillText = 'assigned';
 
+  useEffect(() => {
+    const fetchFeatureFlags = async () => {
+      try {
+        const response = await main.getFeatureFlags();
+        if (response?.success) {
+          setFeatureFlags(
+            response.data.reduce((acc: any, flag: any) => {
+              acc[flag.name] = flag.enabled;
+              return acc;
+            }, {})
+          );
+        }
+      } catch (error) {
+        console.error('Error fetching feature flags:', error);
+      }
+    };
+    fetchFeatureFlags();
+  }, [main]);
+
   if (isMobile) {
     return (
       <CodingMobile
@@ -847,6 +870,14 @@ function MobileView(props: CodingBountiesProps) {
                 />
               )}
 
+              {featureFlags.staking && is_stakable && (
+                <SelfAssignButton
+                  onClick={() => setShowComingSoonModal(true)}
+                  stakeMin={stake_min || 0}
+                  EstimatedSessionLength={props.estimated_session_length || ''}
+                />
+              )}
+
               {isOpenProofModal && (
                 <CodingBountyProofModal
                   closeModal={() => setIsOpenProofModal(false)}
@@ -1291,6 +1322,13 @@ function MobileView(props: CodingBountiesProps) {
                     completion_date={props.estimated_completion_date}
                     session_length={props.estimated_session_length}
                   />
+                  {featureFlags.staking && is_stakable && (
+                    <SelfAssignButton
+                      onClick={() => setShowComingSoonModal(true)}
+                      stakeMin={stake_min || 0}
+                      EstimatedSessionLength={props.estimated_session_length || ''}
+                    />
+                  )}
                   <div className="buttonSet">
                     <ButtonSet
                       githubShareAction={() => {
@@ -1889,6 +1927,13 @@ function MobileView(props: CodingBountiesProps) {
                   completion_date={props.estimated_completion_date}
                   session_length={props.estimated_session_length}
                 />
+                {featureFlags.staking && is_stakable && (
+                  <SelfAssignButton
+                    onClick={() => setShowComingSoonModal(true)}
+                    stakeMin={stake_min || 0}
+                    EstimatedSessionLength={props.estimated_session_length || ''}
+                  />
+                )}
                 <ButtonSet
                   showGithubBtn={!!ticket_url}
                   githubShareAction={() => {
@@ -1979,6 +2024,13 @@ function MobileView(props: CodingBountiesProps) {
                   completion_date={props.estimated_completion_date}
                   session_length={props.estimated_session_length}
                 />
+                {featureFlags.staking && is_stakable && (
+                  <SelfAssignButton
+                    onClick={() => setShowComingSoonModal(true)}
+                    stakeMin={stake_min || 0}
+                    EstimatedSessionLength={props.estimated_session_length || ''}
+                  />
+                )}
                 <ButtonSet
                   showGithubBtn={!!ticket_url}
                   githubShareAction={() => {
@@ -2002,6 +2054,61 @@ function MobileView(props: CodingBountiesProps) {
           </AssigneeProfile>
         </NormalUser>
       )}
+      {showComingSoonModal && (
+        <Modal
+          visible={true}
+          envStyle={{
+            borderRadius: '12px',
+            background: color.pureWhite,
+            padding: '32px 24px',
+            width: '400px',
+            maxWidth: '90vw',
+            boxShadow: '0px 8px 24px rgba(0, 0, 0, 0.1)'
+          }}
+          bigCloseImage={() => setShowComingSoonModal(false)}
+          bigCloseImageStyle={{
+            top: '-12px',
+            right: '-12px',
+            background: color.pureWhite,
+            borderRadius: '50%',
+            boxShadow: '0 2px 4px rgba(0, 0, 0, 0.1)',
+            padding: '4px'
+          }}
+        >
+          <div
+            style={{
+              display: 'flex',
+              flexDirection: 'column',
+              alignItems: 'center',
+              textAlign: 'center',
+              gap: '16px'
+            }}
+          >
+            <EuiText
+              style={{
+                fontSize: '24px',
+                fontWeight: 600,
+                color: color.grayish.G100,
+                marginBottom: '8px'
+              }}
+            >
+              Staking Coming Soon!
+            </EuiText>
+            <Button
+              color="primary"
+              onClick={() => setShowComingSoonModal(false)}
+              text="Got It!"
+              style={{
+                width: '120px',
+                height: '40px',
+                fontSize: '16px',
+                fontWeight: 600,
+                borderRadius: '8px'
+              }}
+            />
+          </div>
+        </Modal>
+      )}
       <EuiGlobalToastList toasts={toasts} dismissToast={removeToast} toastLifeTimeMs={6000} />
     </div>
   );
diff --git a/src/people/widgetViews/summaries/wantedSummaries/Components.tsx b/src/people/widgetViews/summaries/wantedSummaries/Components.tsx
@@ -272,3 +272,64 @@ export const ICanHelpButton = ({ onClick }: ICanHelpButtonProps) => {
     />
   );
 };
+
+type SelfAssignButtonProps = {
+  onClick: () => void;
+  stakeMin: number;
+  EstimatedSessionLength: string;
+};
+
+export const SelfAssignButton = ({
+  onClick,
+  stakeMin,
+  EstimatedSessionLength
+}: SelfAssignButtonProps) => {
+  const color = colors['light'];
+
+  return (
+    <div style={{ width: '100%', marginTop: '16px' }}>
+      <IconButton
+        text={'Self Assign'}
+        endingIcon={'arrow_forward'}
+        width={'100%'}
+        height={48}
+        onClick={onClick}
+        color="primary"
+        hovercolor={color.button_secondary.hover}
+        activecolor={color.button_secondary.active}
+        shadowcolor={color.button_secondary.shadow}
+        iconSize={'16px'}
+        iconStyle={{
+          top: '16px',
+          right: '14px'
+        }}
+        textStyle={{
+          width: '100%',
+          display: 'flex',
+          justifyContent: 'center',
+          fontFamily: 'Barlow'
+        }}
+      />
+
+      <div
+        style={{
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'center',
+          marginTop: 16,
+          marginBottom: 8
+        }}
+      >
+        <span style={{ fontSize: 12, color: color.grayish.G100 }}>
+          Deposit this amount to Self Assign
+        </span>
+        <span style={{ fontSize: 16, fontWeight: 600 }}>{stakeMin?.toLocaleString()} SAT</span>
+      </div>
+
+      <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
+        <span style={{ fontSize: 12, color: color.grayish.G100 }}>Time to Complete</span>
+        <span style={{ fontSize: 16, fontWeight: 600 }}>{EstimatedSessionLength}</span>
+      </div>
+    </div>
+  );
+};
diff --git a/src/people/widgetViews/summaries/wantedSummaries/__tests__/CodingBounty.spec.tsx b/src/people/widgetViews/summaries/wantedSummaries/__tests__/CodingBounty.spec.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable no-empty */
 import '@testing-library/jest-dom';
 import {
   fireEvent,
@@ -20,6 +21,9 @@ jest.mock('remark-gfm', () => ({}));
 
 jest.mock('rehype-raw', () => ({}));
 
+jest.mock('remark-gfm', () => ({}));
+jest.mock('rehype-raw', () => ({}));
+
 describe('MobileView component', () => {
   beforeEach(() => {
     const mockIntersectionObserver = jest.fn();
@@ -515,4 +519,46 @@ describe('MobileView component', () => {
       });
     })();
   });
+
+  it('does not render Self Assignment Component when isStakable is false', async () => {
+    const mockGetFeatureFlags = jest.spyOn(mainStore, 'getFeatureFlags').mockResolvedValue({
+      success: true,
+      data: [{ name: 'staking', enabled: true }]
+    });
+
+    const props = {
+      ...defaultProps,
+      isStakable: false,
+      stakeMin: 1000
+    };
+
+    render(<MobileView {...props} />);
+
+    await waitFor(() => {
+      expect(screen.queryByText('Self Assign')).not.toBeInTheDocument();
+    });
+
+    mockGetFeatureFlags.mockRestore();
+  });
+
+  it('does not render Self Assignment Component when staking feature flag is false', async () => {
+    const mockGetFeatureFlags = jest.spyOn(mainStore, 'getFeatureFlags').mockResolvedValue({
+      success: true,
+      data: [{ name: 'staking', enabled: false }]
+    });
+
+    const props = {
+      ...defaultProps,
+      isStakable: true,
+      stakeMin: 1000
+    };
+
+    render(<MobileView {...props} />);
+
+    await waitFor(() => {
+      expect(screen.queryByText('Self Assign')).not.toBeInTheDocument();
+    });
+
+    mockGetFeatureFlags.mockRestore();
+  });
 });
diff --git a/src/people/widgetViews/summaries/wantedSummaries/__tests__/Components.spec.tsx b/src/people/widgetViews/summaries/wantedSummaries/__tests__/Components.spec.tsx
