CU-86a5j1veu-NEON3 - Swap - Implement Swap Details Page

package.json

@@ -29,13 +29,13 @@
     "playwright:report": "npx playwright show-report"
   },
   "dependencies": {
-    "@cityofzion/blockchain-service": "1.8.0",
+    "@cityofzion/blockchain-service": "1.10.0",
     "@cityofzion/bs-asteroid-sdk": "0.9.0",
-    "@cityofzion/bs-electron": "0.1.19",
-    "@cityofzion/bs-ethereum": "2.7.0",
-    "@cityofzion/bs-neo-legacy": "1.6.0",
-    "@cityofzion/bs-neo3": "1.8.2",
-    "@cityofzion/bs-swap": "0.1.1",
+    "@cityofzion/bs-electron": "0.1.21",
+    "@cityofzion/bs-ethereum": "2.7.2",
+    "@cityofzion/bs-neo-legacy": "1.6.2",
+    "@cityofzion/bs-neo3": "1.8.3",
+    "@cityofzion/bs-swap": "0.2.1",
     "@cityofzion/neon-core": "5.5.1",
     "@cityofzion/neon-js": "5.5.1",
     "@cityofzion/wallet-connect-sdk-wallet-core": "4.4.0",

src/renderer/src/components/Details.tsx

@@ -0,0 +1,90 @@
+import { cloneElement, ComponentProps } from 'react'
+import { MdOutlineContentCopy } from 'react-icons/md'
+import { StyleHelper } from '@renderer/helpers/StyleHelper'
+import { UtilsHelper } from '@renderer/helpers/UtilsHelper'
+
+import { IconButton } from './IconButton'
+import { Separator } from './Separator'
+
+type TRootProps = ComponentProps<'div'>
+const Root = ({ className, children, ...props }: TRootProps) => {
+  return (
+    <div
+      className={StyleHelper.mergeStyles('flex flex-col py-2.5 px-4 bg-asphalt rounded w-full', className)}
+      {...props}
+    >
+      {children}
+    </div>
+  )
+}
+
+type THeaderProps = {
+  label: string
+  icon?: JSX.Element
+} & ComponentProps<'div'>
+const Header = ({ label, icon, children, ...props }: THeaderProps) => {
+  return (
+    <div {...props}>
+      <div className="flex  items-center gap-2.5">
+        {icon && cloneElement(icon, { className: StyleHelper.mergeStyles('text-blue w-6 h-6', icon.props.className) })}
+
+        <span className="text-sm text-white">{label}</span>
+
+        {children}
+      </div>
+
+      <Separator className="mt-2.5 mb-5" />
+    </div>
+  )
+}
+type TBodyProps = ComponentProps<'div'>
+const Body = ({ className, children, ...props }: TBodyProps) => {
+  return (
+    <div className={StyleHelper.mergeStyles('flex flex-col gap-5', className)} {...props}>
+      {children}
+    </div>
+  )
+}
+
+type TPanelProps = { label: string } & ComponentProps<'div'>
+const Panel = ({ className, children, label, ...props }: TPanelProps) => {
+  return (
+    <div className={StyleHelper.mergeStyles('flex flex-col', className)} {...props}>
+      <div className="text-blue text-xs py-1.5 px-3.5 bg-gray-300/15 ">{label}</div>
+
+      {children}
+    </div>
+  )
+}
+
+type TItemProps = { label: string; copyable?: boolean } & ComponentProps<'div'>
+const Item = ({ label, children, copyable, className, ...props }: TItemProps) => {
+  const handleCopy = () => {
+    if (typeof children !== 'string') return
+    UtilsHelper.copyToClipboard(children)
+  }
+  return (
+    <div className={StyleHelper.mergeStyles('flex flex-col group', className)}>
+      <div className="flex flex-col gap-2.5 py-4 px-3" {...props}>
+        <span className="text-xs text-gray-100 uppercase">{label}</span>
+
+        <div className="flex gap-2.5 items-center">
+          {typeof children === 'string' ? <span className="text-sm text-white break-all">{children}</span> : children}
+
+          {copyable && (
+            <IconButton
+              icon={<MdOutlineContentCopy className="text-neon" />}
+              size="sm"
+              onClick={handleCopy}
+              compacted
+            />
+          )}
+        </div>
+      </div>
+
+      <Separator className="group-last:hidden" />
+    </div>
+  )
+}
+
+export const Details = { Root, Header, Body, Panel, Item }

src/renderer/src/components/GreyTokenSelect/GreyTokenSelectItem.tsx

@@ -1,5 +1,6 @@
 import { Fragment, useEffect, useState } from 'react'
 import defaultTokenLogo from '@renderer/assets/images/default-token-logo.png'
+import { NumberHelper } from '@renderer/helpers/NumberHelper'
 
 import { TGreyTokenSelectToken } from '.'
 
@@ -30,6 +31,10 @@ export const GreyTokenSelectItem = ({ token }: TProps) => {
         <span className="text-white text-sm text-left uppercase truncate">{token.symbol}</span>
         {token.network && <span className="text-gray-100 text-sm truncate uppercase">{` | ${token.network}`}</span>}
       </span>
+
+      {token.amount && (
+        <span className="text-1xs text-neon truncate">{NumberHelper.formatString(token.amount, 6)}</span>
+      )}
     </Fragment>
   )
 }

src/renderer/src/components/GreyTokenSelect/index.tsx

@@ -61,7 +61,9 @@ export const GreyTokenSelect = <T extends TGreyTokenSelectToken>({
     if (balance) {
       filtered = filtered.map(token => {
         const tokenHash = UtilsHelper.normalizeHash(token.hash!)
-        const tokenBalance = balance.tokensBalances.find(tokenBalance => tokenBalance.token.hash === tokenHash)
+        const tokenBalance = balance.tokensBalances.find(
+          tokenBalance => UtilsHelper.normalizeHash(tokenBalance.token.hash) === tokenHash
+        )
 
         return {
           ...token,
@@ -144,7 +146,7 @@ export const GreyTokenSelect = <T extends TGreyTokenSelectToken>({
                 position: 'relative',
               }}
             >
-              {rowVirtualizer.getVirtualItems().map(virtualItem => {
+              {rowVirtualizer.getVirtualItems().map((virtualItem, _, array) => {
                 const row = filteredTokensByText[virtualItem.index]
 
                 return (
@@ -162,7 +164,7 @@ export const GreyTokenSelect = <T extends TGreyTokenSelectToken>({
                       <GreyTokenSelectItem token={row} />
                     </div>
 
-                    <Separator />
+                    {virtualItem.index + 1 !== array.length && <Separator />}
                   </Command.Item>
                 )
               })}

src/renderer/src/components/Modal/SideModal.tsx

@@ -10,8 +10,9 @@ import { ModalContainer } from './ModalContainer'
 const widthBySizes: Partial<Record<TRouterSize, string>> = {
   md: '25.875rem',
   sm: '20.625rem',
-  xl: '62.5rem',
-  lg: '45rem',
+  lg: '32rem',
+  xl: '45rem',
+  '1xl': '62.5rem',
 }
 
 export const SideModal = () => {