Merge pull request #9487 from hicommonwealth/kaleemNeslit.9244.copy_w…

…allet_address

Kaleem neslit.9244.copy wallet address

packages/commonwealth/client/scripts/views/components/component_kit/new_designs/CWSelectList/CWSelectList.scss

@@ -33,6 +33,7 @@
         padding: 0 !important;
         max-height: 24px;
         line-height: 14px;
+        display: flex !important;
 
         &.cwsl__value-container--is-multi {
           max-height: initial !important;

packages/commonwealth/client/scripts/views/components/component_kit/new_designs/CWSelectList/CWSelectList.tsx

@@ -1,9 +1,10 @@
 import React, { useEffect, useState } from 'react';
 import { useFormContext } from 'react-hook-form';
-import type { GroupBase, Props } from 'react-select';
+import type { GroupBase, Props, SingleValueProps } from 'react-select';
 import Select from 'react-select';
 import { getClasses } from '../../helpers';
 import { ComponentType } from '../../types';
+import { CWSingleSelectItem } from '../CWSingleSelectItem/CWSingleSelectItem';
 import { MessageRow } from '../CWTextInput/MessageRow';
 import './CWSelectList.scss';
 import { DropdownIndicator } from './DropdownIndicator';
@@ -14,8 +15,18 @@ type CustomCWSelectListProps = {
   label?: string;
   hookToForm?: boolean;
   customError?: string;
+  // eslint-disable-next-line prettier/prettier
+  saveToClipboard?: (
+    id: string,
+    successNotification?: boolean,
+  ) => Promise<void>;
+  showCopyIcon?: boolean;
 };
 
+type OptionProps = {
+  value: string;
+  label: string;
+};
 export const CWSelectList = <
   Option,
   IsMulti extends boolean = false,
@@ -35,6 +46,8 @@ export const CWSelectList = <
     customError,
     components,
     isMulti,
+    showCopyIcon,
+    saveToClipboard,
   } = props;
   const formContext = useFormContext();
   const formFieldContext = hookToForm
@@ -124,6 +137,16 @@ export const CWSelectList = <
           DropdownIndicator,
           MultiValueRemove,
           Option: components?.Option || Option,
+          ...(showCopyIcon && {
+            // eslint-disable-next-line react/no-multi-comp
+            SingleValue: (singleValueProps: SingleValueProps<OptionProps>) => (
+              <CWSingleSelectItem
+                {...singleValueProps}
+                showCopyIcon={showCopyIcon}
+                saveToClipboard={saveToClipboard}
+              />
+            ),
+          }),
         }}
         className={getClasses<{
           className?: string;

packages/commonwealth/client/scripts/views/components/component_kit/new_designs/CWSingleSelectItem/CWSingleSelectItem.scss

@@ -0,0 +1,18 @@
+@import '../../../../../../styles/shared.scss';
+.CWSingleSelectItem {
+  display: flex;
+  width: 97%;
+  justify-content: space-between;
+  align-items: center;
+  padding-right: 4px;
+  cursor: pointer;
+
+  .inner-container {
+    display: flex;
+
+    .check-icon {
+      fill: $green-600;
+      margin-right: 8px;
+    }
+  }
+}

packages/commonwealth/client/scripts/views/components/component_kit/new_designs/CWSingleSelectItem/CWSingleSelectItem.tsx

@@ -0,0 +1,55 @@
+import { CopySimple } from '@phosphor-icons/react';
+import { formatAddressShort } from 'client/scripts/helpers';
+import React from 'react';
+import { SingleValueProps } from 'react-select';
+import { CWIcon } from '../../cw_icons/cw_icon';
+import './CWSingleSelectItem.scss';
+type CustomSingleValueProps = {
+  showCopyIcon?: boolean;
+  // eslint-disable-next-line prettier/prettier
+  saveToClipboard?: (
+    id: string,
+    successNotification?: boolean,
+  ) => Promise<void>;
+};
+
+type OptionProps = {
+  value: string;
+  label: string;
+};
+
+export const CWSingleSelectItem = (
+  props: SingleValueProps<OptionProps> & CustomSingleValueProps,
+) => {
+  const { data, showCopyIcon = false, saveToClipboard } = props;
+
+  const handleClickToCopy = async (event: React.MouseEvent) => {
+    event.stopPropagation();
+    if (saveToClipboard) {
+      await saveToClipboard(data.value, true);
+    }
+  };
+
+  return (
+    <div className="CWSingleSelectItem">
+      {showCopyIcon && (
+        <div className="inner-container">
+          <CWIcon
+            className="check-icon"
+            iconSize="small"
+            iconName="checkCircleFilled"
+          />
+          {formatAddressShort(data.label, 6)}
+        </div>
+      )}
+      {showCopyIcon && (
+        <CopySimple
+          size={20}
+          onMouseDown={(event) => {
+            void handleClickToCopy(event);
+          }}
+        />
+      )}
+    </div>
+  );
+};

packages/commonwealth/client/scripts/views/modals/ManageCommunityStakeModal/StakeExchangeForm/StakeExchangeForm.tsx

@@ -1,4 +1,5 @@
 import { commonProtocol } from '@hicommonwealth/shared';
+import { saveToClipboard } from 'client/scripts/utils/clipboard';
 import clsx from 'clsx';
 import { findDenominationIcon } from 'helpers/findDenomination';
 import { useBrowserAnalyticsTrack } from 'hooks/useBrowserAnalyticsTrack';
@@ -131,7 +132,7 @@ const StakeExchangeForm = ({
   const { trackAnalytics } = useBrowserAnalyticsTrack<BaseMixpanelPayload>({
     onAction: true,
   });
-
+  // eslint-disable-next-line @typescript-eslint/no-floating-promises
   const handleBuy = async () => {
     try {
       onSetModalState(ManageCommunityStakeModalState.Loading);
@@ -239,7 +240,7 @@ const StakeExchangeForm = ({
     onSetNumberOfStakeToExchange((prevState) => prevState + 1);
   };
 
-  const handleInput = (e) => {
+  const handleInput = (e: React.ChangeEvent<HTMLInputElement>) => {
     const inputValue = e.target.value;
     const numericValue = inputValue.replace(/[^0-9]/g, '');
     const parsed = parseInt(numericValue);
@@ -329,6 +330,8 @@ const StakeExchangeForm = ({
           isSearchable={false}
           options={addressOptions}
           onChange={onSetSelectedAddress}
+          saveToClipboard={saveToClipboard}
+          showCopyIcon={true}
         />
 
         <div className="current-balance-row">