Merge pull request #28 from dhedge/feat/trading-settings-disclosure-c…

…omponents

feat: add trading widget settings and withdraw disclosure components

packages/core-ui-kit/src/hooks/trading/deposit/use-projected-earnings.ts

@@ -7,15 +7,9 @@ import {
 } from 'hooks/state'
 import { useAssetPrice } from 'hooks/trading'
 
-import type { ApyCurrency } from 'types'
+import type { ApyCurrency, UseProjectedEarningsResult } from 'types'
 import { formatByCurrency, isZeroAddress } from 'utils'
 
-interface UseProjectedEarningsResult {
-  dailyEarnings: string | null
-  yearlyEarnings: string | null
-  showEarnings: boolean
-}
-
 const USD_PRICE = 1
 
 const calculateProjectedEarnings = ({

packages/core-ui-kit/src/types/trading-panel.types.ts

@@ -57,3 +57,9 @@ export interface TokenSelectorPayload {
 }
 
 export type ApyCurrency = 'USD' | 'ETH'
+
+export interface UseProjectedEarningsResult {
+  dailyEarnings: string | null
+  yearlyEarnings: string | null
+  showEarnings: boolean
+}

packages/trading-widget/.storybook/main.ts

@@ -14,9 +14,9 @@ const config: StorybookConfig = {
     },
   },
   // TODO: check if it is needed for storybook launch
-  // typescript: {
-  //   reactDocgen: false,
-  // },
+  typescript: {
+    reactDocgen: false,
+  },
   async viteFinal(config) {
     return mergeConfig(config, {
       plugins: [viteTsConfigPaths()],

packages/trading-widget/.storybook/preview.tsx

@@ -1,15 +1,98 @@
 import '../src/styles/index.css'
 
+import { TradingPanelProvider } from '@dhedge/core-ui-kit'
+import {
+  BRIDGED_USDC_OPTIMISM,
+  DAI_OPTIMISM,
+  SUSD_OPTIMISM,
+  optimism,
+} from '@dhedge/core-ui-kit/const'
+import type {
+  PoolConfig,
+  TradingPanelContextConfig,
+} from '@dhedge/core-ui-kit/types'
 import type { Preview } from '@storybook/react'
 
-import { Providers } from '../src/providers'
+const USDY_OPTIMISM: PoolConfig = {
+  chainId: optimism.id,
+  symbol: 'USDy',
+  address: '0x1ec50880101022c11530a069690f5446d1464592',
+  depositParams: {
+    method: 'depositWithCustomCooldown',
+    customTokens: [],
+  },
+  withdrawParams: {
+    customTokens: [
+      BRIDGED_USDC_OPTIMISM,
+      {
+        ...SUSD_OPTIMISM,
+        intermediateToken: BRIDGED_USDC_OPTIMISM,
+        method: 'withdrawSUSD',
+      },
+      DAI_OPTIMISM,
+    ],
+  },
+}
+
+const DEMO_INITIAL_STATE: TradingPanelContextConfig['initialState'] = {
+  poolConfigMap: {
+    [USDY_OPTIMISM.address]: USDY_OPTIMISM,
+  },
+  poolAddress: USDY_OPTIMISM.address,
+  poolFallbackData: {
+    address: USDY_OPTIMISM.address,
+    apy: {
+      value: 10,
+      currency: 'USD',
+    },
+  },
+}
+
+const DEMO_ACTIONS: TradingPanelContextConfig['actions'] = {
+  onTransactionError: (...args) => {
+    console.log({
+      onTransactionError: args,
+    })
+  },
+  onTransactionSuccess: (...args) => {
+    console.log({
+      onTransactionSuccess: args,
+    })
+  },
+  onTransactionEstimationError: (...args) => {
+    console.log({
+      onTransactionEstimationError: args,
+    })
+  },
+  onTokenSelector: (...args) => {
+    console.log({
+      onTokenSelector: args,
+    })
+  },
+  onLog: (...args) => {
+    console.log({
+      onLog: args,
+    })
+  },
+  onSimulateTransaction: (...args) => {
+    console.log({
+      onSimulateTransaction: args,
+    })
+
+    return Promise.resolve(null)
+  },
+}
 
 const preview: Preview = {
   decorators: [
     (Story) => (
-      <Providers>
+      <TradingPanelProvider
+        isDev
+        initialState={DEMO_INITIAL_STATE}
+        actions={DEMO_ACTIONS}
+      >
         <Story />
-      </Providers>
+      </TradingPanelProvider>
     ),
   ],
 }

packages/trading-widget/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "test-trading-widget",
+  "name": "@dhedge/trading-widget",
   "version": "0.0.1",
   "dependencies": {
     "@dhedge/core-ui-kit": "*"

packages/trading-widget/src/components/common/badge/token-badge/token-badge.tsx

@@ -0,0 +1,51 @@
+import classNames from 'classnames'
+import type { FC, HTMLAttributes, ReactElement } from 'react'
+
+import { useTranslationContext } from 'providers/translation-provider'
+import type { TokenIconSize } from 'types'
+
+import { TokenIcon } from '../../icon/token-icon/token-icon'
+import { Skeleton } from '../../skeleton/skeleton'
+
+interface TokenBadgeProps {
+  symbol: string
+  iconSymbols: string[]
+  size?: TokenIconSize
+  symbolClasses?: HTMLAttributes<HTMLDivElement>['className']
+  CustomIcon?: ReactElement
+  customTitle?: string
+  className?: string
+}
+
+export const TokenBadge: FC<TokenBadgeProps> = ({
+  symbol,
+  iconSymbols,
+  size,
+  symbolClasses = 'dtw-text-sm dtw-font-medium',
+  CustomIcon,
+  customTitle,
+  className,
+}) => {
+  const t = useTranslationContext()
+  const title = customTitle || (symbol === 'all' ? t.allAssets : symbol)
+
+  return (
+    <div
+      className={classNames(
+        'dtw-flex dtw-w-full dtw-items-center dtw-space-x-1.5',
+        className,
+      )}
+    >
+      {CustomIcon ?? (
+        <TokenIcon
+          size={size}
+          symbols={iconSymbols}
+          className="dtw-flex-shrink-0"
+        />
+      )}
+      <div className={symbolClasses} title={title}>
+        {title || <Skeleton className="dtw-w-[70px]" />}
+      </div>
+    </div>
+  )
+}

packages/trading-widget/src/components/common/balance/balance.tsx

@@ -0,0 +1,19 @@
+import type { FC } from 'react'
+
+interface BalanceProps {
+  balance: string
+  price: string | null
+}
+
+export const Balance: FC<BalanceProps> = ({ balance, price }) => (
+  <div className="dtw-flex dtw-items-center dtw-justify-between">
+    <span className="dtw-text-[length:var(--panel-balance-font-size,var(--panel-font-size-lg))] dtw-leading-[var(--panel-balance-line-height,var(--panel-line-height-lg))] dtw-text-[color:var(--panel-balance-content-color,var(--panel-content-color))]">
+      {balance}
+    </span>
+    {price && (
+      <span className="dtw-text-[color:var(--panel-balance-price-content-color,var(--panel-secondary-content-color))] dtw-text-[length:var(--panel-balance-price-font-size,var(--panel-font-size))] dtw-leading-[var(--panel-balance-price-line-height,var(--panel-line-height))]">
+        {price}
+      </span>
+    )}
+  </div>
+)

packages/trading-widget/src/components/common/button/action-button/action-button.tsx

@@ -31,7 +31,7 @@ const HIGHLIGHTED_CLASSNAMES = [
 export const ActionButton: FC<PropsWithChildren<ActionButtonProps>> = ({
   children,
   onClick,
-  highlighted = false,
+  highlighted = true,
   disabled = false,
   className,
   type,
@@ -47,6 +47,7 @@ export const ActionButton: FC<PropsWithChildren<ActionButtonProps>> = ({
       'disabled:dtw-opacity-50',
       'dtw-py-2',
       'dtw-px-5',
+      'dtw-w-full',
       {
         [HIGHLIGHTED_CLASSNAMES.join(' ')]: highlighted,
         [NON_HIGHLIGHTED_CLASSNAMES.join(' ')]: !highlighted,

packages/trading-widget/src/components/common/button/disabled-button-with-prompt/disabled-button-with-prompt.tsx

@@ -22,7 +22,7 @@ export const DisabledButtonWithPrompt: FC<
         <div className="dtw-py-1 dtw-text-center dtw-text-xs">{promptText}</div>
       </div>
       <InfoTooltip text={promptText}>
-        <ActionButton disabled highlighted>
+        <ActionButton disabled>
           <div className="dtw-flex dtw-items-center dtw-justify-center dtw-gap-2">
             <LockClosedIcon className="dtw-h-5" />
             <span>{children}</span>

packages/trading-widget/src/components/common/button/icon-button/icon-button.tsx

@@ -0,0 +1,31 @@
+import classNames from 'classnames'
+import type { ComponentProps, FC, FunctionComponent } from 'react'
+
+interface IconButtonProps {
+  Icon: FunctionComponent<Omit<ComponentProps<'svg'>, 'ref'>>
+  onClick?: () => void
+  className?: string
+  containerClassName?: string
+}
+
+export const IconButton: FC<IconButtonProps> = ({
+  Icon,
+  onClick,
+  className = 'dtw-h-7 dtw-w-7',
+  containerClassName,
+}) => (
+  <div
+    className={classNames(
+      'dtw-group dtw-w-fit dtw-cursor-pointer dtw-self-end dtw-rounded-lg dtw-p-1 hover:dtw-bg-gray-700',
+      containerClassName,
+    )}
+    onClick={onClick}
+  >
+    <Icon
+      className={classNames(
+        'dtw-text-themeGray group-hover:dtw-text-white',
+        className,
+      )}
+    />
+  </div>
+)

packages/trading-widget/src/components/common/button/max-balance-button/max-balance-button.tsx

@@ -0,0 +1,18 @@
+import type { FC } from 'react'
+import { useTranslationContext } from 'providers/translation-provider'
+
+interface MaxBalanceButtonProps {
+  onClick: () => void
+}
+
+export const MaxBalanceButton: FC<MaxBalanceButtonProps> = ({ onClick }) => {
+  const t = useTranslationContext()
+  return (
+    <button
+      className="dtw-cursor-pointer dtw-text-[color:var(--panel-input-button-content-color,var(--panel-content-color))] dtw-rounded-[var(--panel-input-button-radius,var(--panel-radius))] dtw-bg-[var(--panel-input-button-bg,var(--panel-secondary-color))] dtw-border dtw-border-[var(--panel-input-button-border-color,var(--panel-accent-to-color))] dtw-px-[var(--panel-input-button-px)] dtw-text-[length:var(--panel-input-button-font-size,var(--panel-font-size-xs))] dtw-leading-[var(--panel-input-button-line-height,var(--panel-line-height-xs))] hover:dtw-opacity-[var(--panel-action-hover-opacity)] dtw-opacity-[var(--panel-action-opacity)]"
+      onClick={onClick}
+    >
+      {t.max}
+    </button>
+  )
+}