diff --git a/packages/commonwealth/client/scripts/views/components/component_kit/new_designs/CWSelectList/CWSelectList.scss b/packages/commonwealth/client/scripts/views/components/component_kit/new_designs/CWSelectList/CWSelectList.scss index c05809526db..425f32d65ce 100644 --- a/packages/commonwealth/client/scripts/views/components/component_kit/new_designs/CWSelectList/CWSelectList.scss +++ b/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; diff --git a/packages/commonwealth/client/scripts/views/components/component_kit/new_designs/CWSelectList/CWSelectList.tsx b/packages/commonwealth/client/scripts/views/components/component_kit/new_designs/CWSelectList/CWSelectList.tsx index ccc71e8216a..2f89b431ed6 100644 --- a/packages/commonwealth/client/scripts/views/components/component_kit/new_designs/CWSelectList/CWSelectList.tsx +++ b/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; + 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) => ( + + ), + }), }} className={getClasses<{ className?: string; diff --git a/packages/commonwealth/client/scripts/views/components/component_kit/new_designs/CWSingleSelectItem/CWSingleSelectItem.scss b/packages/commonwealth/client/scripts/views/components/component_kit/new_designs/CWSingleSelectItem/CWSingleSelectItem.scss new file mode 100644 index 00000000000..1e089db6dfb --- /dev/null +++ b/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; + } + } +} diff --git a/packages/commonwealth/client/scripts/views/components/component_kit/new_designs/CWSingleSelectItem/CWSingleSelectItem.tsx b/packages/commonwealth/client/scripts/views/components/component_kit/new_designs/CWSingleSelectItem/CWSingleSelectItem.tsx new file mode 100644 index 00000000000..8891d24c7e0 --- /dev/null +++ b/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; +}; + +type OptionProps = { + value: string; + label: string; +}; + +export const CWSingleSelectItem = ( + props: SingleValueProps & CustomSingleValueProps, +) => { + const { data, showCopyIcon = false, saveToClipboard } = props; + + const handleClickToCopy = async (event: React.MouseEvent) => { + event.stopPropagation(); + if (saveToClipboard) { + await saveToClipboard(data.value, true); + } + }; + + return ( +
+ {showCopyIcon && ( +
+ + {formatAddressShort(data.label, 6)} +
+ )} + {showCopyIcon && ( + { + void handleClickToCopy(event); + }} + /> + )} +
+ ); +}; diff --git a/packages/commonwealth/client/scripts/views/modals/ManageCommunityStakeModal/StakeExchangeForm/StakeExchangeForm.tsx b/packages/commonwealth/client/scripts/views/modals/ManageCommunityStakeModal/StakeExchangeForm/StakeExchangeForm.tsx index 68f1444df28..796f7d26e01 100644 --- a/packages/commonwealth/client/scripts/views/modals/ManageCommunityStakeModal/StakeExchangeForm/StakeExchangeForm.tsx +++ b/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({ 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) => { 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} />