added stories for Token and SuccessConfetti

src/components/@shared/SuccessConfetti/index.stories.tsx

@@ -0,0 +1,23 @@
+import React from 'react'
+import { ComponentStory, ComponentMeta } from '@storybook/react'
+import SuccessConfetti, { SuccessConfettiProps } from '@shared/SuccessConfetti'
+
+export default {
+  title: 'Component/@shared/SuccessConfetti',
+  component: SuccessConfetti
+} as ComponentMeta<typeof SuccessConfetti>
+
+const Template: ComponentStory<typeof SuccessConfetti> = (
+  args: SuccessConfettiProps
+) => {
+  return <SuccessConfetti {...args} />
+}
+
+interface Props {
+  args: SuccessConfettiProps
+}
+
+export const Default: Props = Template.bind({})
+Default.args = {
+  success: 'Success'
+}

src/components/@shared/SuccessConfetti/index.tsx

@@ -23,15 +23,17 @@ const confettiConfig = {
   ]
 }
 
+export interface SuccessConfettiProps {
+  success: string
+  action?: ReactNode
+  className?: string
+}
+
 export default function SuccessConfetti({
   success,
   action,
   className
-}: {
+}: SuccessConfettiProps): ReactElement {
-  success: string
-  action?: ReactNode
-  className?: string
-}): ReactElement {
   // Have some confetti upon success
   useEffect(() => {
     if (!success || typeof window === 'undefined') return

src/components/@shared/Token/index.stories.tsx

@@ -0,0 +1,26 @@
+import React from 'react'
+import { ComponentStory, ComponentMeta } from '@storybook/react'
+import Token, { TokenProps } from '@shared/Token'
+import { locale, currency, prices } from '../../../../.storybook/__mockdata__'
+
+export default {
+  title: 'Component/@shared/Token',
+  component: Token
+} as ComponentMeta<typeof Token>
+
+const Template: ComponentStory<typeof Token> = (args: TokenProps) => {
+  return <Token {...args} />
+}
+
+interface Props {
+  args: TokenProps
+}
+
+export const Default: Props = Template.bind({})
+Default.args = {
+  symbol: 'ETH',
+  balance: '1',
+  locale,
+  currency,
+  prices
+}

src/components/@shared/Token/index.tsx

@@ -3,24 +3,29 @@ import styles from './index.module.css'
 import PriceUnit from '@shared/Price/PriceUnit'
 import Logo from '@shared/atoms/Logo'
 import Conversion from '@shared/Price/Conversion'
-import { useUserPreferences } from '@context/UserPreferences'
+import { Prices } from '@context/Prices'
-import { usePrices } from '@context/Prices'
+
+export interface TokenProps {
+  symbol: string
+  balance: string
+  conversion?: boolean
+  noIcon?: boolean
+  size?: 'small' | 'mini'
+  locale: string
+  currency: string
+  prices: Prices
+}
 
 export default function Token({
   symbol,
   balance,
   conversion,
   noIcon,
-  size
+  size,
-}: {
+  locale,
-  symbol: string
+  currency,
-  balance: string
+  prices
-  conversion?: boolean
+}: TokenProps): ReactElement {
-  noIcon?: boolean
-  size?: 'small' | 'mini'
-}): ReactElement {
-  const { locale, currency } = useUserPreferences()
-  const { prices } = usePrices()
   return (
     <>
       <div className={`${styles.token} ${size ? styles[size] : ''}`}>

src/components/Asset/AssetActions/Pool/Add/Output.tsx

@@ -4,6 +4,8 @@ import Token from '../../../../@shared/Token'
 import styles from './Output.module.css'
 import content from '../../../../../../content/price.json'
 import { usePool } from '@context/Pool'
+import { useUserPreferences } from '@context/UserPreferences'
+import { usePrices } from '@context/Prices'
 
 export default function Output({
   newPoolTokens,
@@ -14,6 +16,8 @@ export default function Output({
 }): ReactElement {
   const { help, titleIn } = content.pool.add.output
   const { poolInfo } = usePool()
+  const { locale, currency } = useUserPreferences()
+  const { prices } = usePrices()
 
   return (
     <>
@@ -22,8 +26,22 @@ export default function Output({
       </FormHelp>
       <div className={styles.output}>
         <p>{titleIn}</p>
-        <Token symbol="pool shares" balance={newPoolTokens} noIcon />
+        <Token
-        <Token symbol="% of pool" balance={newPoolShare} noIcon />
+          symbol="pool shares"
+          balance={newPoolTokens}
+          noIcon
+          locale={locale}
+          currency={currency}
+          prices={prices}
+        />
+        <Token
+          symbol="% of pool"
+          balance={newPoolShare}
+          noIcon
+          locale={locale}
+          currency={currency}
+          prices={prices}
+        />
       </div>
     </>
   )

src/components/Asset/AssetActions/Pool/Remove/index.tsx

@@ -22,6 +22,8 @@ import { useAsset } from '@context/Asset'
 import content from '../../../../../../content/price.json'
 import { usePool } from '@context/Pool'
 import { getMax } from './_utils'
+import { useUserPreferences } from '@context/UserPreferences'
+import { usePrices } from '@context/Prices'
 
 const slippagePresets = ['5', '10', '15', '25', '50']
 
@@ -32,6 +34,8 @@ export default function Remove({
 }): ReactElement {
   const { accountId, web3 } = useWeb3()
   const { isAssetNetwork } = useAsset()
+  const { locale, currency } = useUserPreferences()
+  const { prices } = usePrices()
   const { poolData, poolInfo, poolInfoUser, fetchAllData } = usePool()
 
   const [amountPercent, setAmountPercent] = useState('0')
@@ -193,11 +197,20 @@ export default function Remove({
             symbol={poolInfo?.baseTokenSymbol}
             balance={amountOcean}
             noIcon
+            locale={locale}
+            currency={currency}
+            prices={prices}
           />
         </div>
         <div>
           <p>{content.pool.remove.output.titleOutMinimum}</p>
-          <Token symbol={poolInfo?.baseTokenSymbol} balance={minOceanAmount} />
+          <Token
+            symbol={poolInfo?.baseTokenSymbol}
+            balance={minOceanAmount}
+            locale={locale}
+            currency={currency}
+            prices={prices}
+          />
         </div>
       </div>
       <div className={styles.slippage}>

src/components/Asset/AssetActions/Pool/Sections/index.tsx

@@ -93,6 +93,9 @@ export default function PoolSections() {
           symbol={poolInfo?.baseTokenSymbol}
           balance={poolInfoUser?.liquidity}
           conversion
+          locale={locale}
+          currency={currency}
+          prices={prices}
         />
       </PoolSection>
 
@@ -104,6 +107,9 @@ export default function PoolSections() {
           symbol={poolInfo?.baseTokenSymbol}
           balance={poolInfoOwner?.liquidity}
           conversion
+          locale={locale}
+          currency={currency}
+          prices={prices}
         />
       </PoolSection>
 
@@ -112,6 +118,9 @@ export default function PoolSections() {
           symbol={poolInfo?.baseTokenSymbol}
           balance={poolData?.baseTokenLiquidity.toString()}
           conversion
+          locale={locale}
+          currency={currency}
+          prices={prices}
         />
       </PoolSection>
 
@@ -132,18 +141,27 @@ export default function PoolSections() {
           balance={poolInfo?.liquidityProviderSwapFee}
           noIcon
           size="mini"
+          locale={locale}
+          currency={currency}
+          prices={prices}
         />
         <Token
           symbol="% market fee"
           balance={poolInfo?.publishMarketSwapFee}
           noIcon
           size="mini"
+          locale={locale}
+          currency={currency}
+          prices={prices}
         />
         <Token
           symbol="% OPC fee"
           balance={oceanCommunitySwapFee}
           noIcon
           size="mini"
+          locale={locale}
+          currency={currency}
+          prices={prices}
         />
       </PoolSection>
 

src/components/Asset/AssetActions/Trade/Output.tsx

@@ -7,6 +7,8 @@ import styles from './Output.module.css'
 import Decimal from 'decimal.js'
 import { FormTradeData } from './_types'
 import { usePool } from '@context/Pool'
+import { useUserPreferences } from '@context/UserPreferences'
+import { usePrices } from '@context/Prices'
 
 Decimal.set({ toExpNeg: -18, precision: 18, rounding: 1 })
 
@@ -19,6 +21,8 @@ export default function Output({
 }): ReactElement {
   const { isAssetNetwork } = useAsset()
   const { poolInfo } = usePool()
+  const { locale, currency } = useUserPreferences()
+  const { prices } = usePrices()
   const [outputWithSlippage, setOutputWithSlippage] = useState<string>('0')
   // Connect with form
   const { values }: FormikContextType<FormTradeData> = useFormikContext()
@@ -73,6 +77,9 @@ export default function Output({
               : poolInfo.datatokenSymbol
           }
           balance={outputWithSlippage}
+          locale={locale}
+          currency={currency}
+          prices={prices}
         />
       </div>
       <div>
@@ -88,6 +95,9 @@ export default function Output({
               : ''
           }`}
           balance={lpSwapFee}
+          locale={locale}
+          currency={currency}
+          prices={prices}
         />
       </div>
     </div>

src/components/Profile/History/PoolShares/Liquidity.tsx

@@ -55,6 +55,9 @@ export function Liquidity({
         symbol={row.poolShare.pool.baseToken.symbol}
         balance={liquidity}
         noIcon
+        locale={locale}
+        currency={currency}
+        prices={prices}
       />
     </div>
   )