Merge pull request #166 from novasamatech/feat/ui_assets

Feat: Assets page

app/common/utils/chains.ts

@@ -1,6 +1,23 @@
+export const POLKADOT = '0x91b171bb158e2d3848fa23a9f1c25182fb8e20313b2c1eb49219da7a70ce90c3';
+export const KUSAMA = '0xb0a8d493285c2df73290dfb7e61f870f17b41801197a149ca93654499ea3dafe';
+export const POLKADOT_ASSET_HUB = '0x68d56f15f85d3136970ec16946040bc1752654e906147f7e43e9d539d7c3de2f';
+export const WESTEND = '0xe143f23803ac50e8f6f8e62695d1ce9e4e1d68aa36c1cd2cfd15340213f3423e';
+
 export const DEFAULT_CONNECTED_CHAINS: Record<ChainId, AssetId[]> = {
- '0x91b171bb158e2d3848fa23a9f1c25182fb8e20313b2c1eb49219da7a70ce90c3': [0], // POLKADOT
- '0xb0a8d493285c2df73290dfb7e61f870f17b41801197a149ca93654499ea3dafe': [0], // KUSAMA
- '0x68d56f15f85d3136970ec16946040bc1752654e906147f7e43e9d539d7c3de2f': [1], // DOT_ASSET_HUB
- '0xe143f23803ac50e8f6f8e62695d1ce9e4e1d68aa36c1cd2cfd15340213f3423e': [0], // WESTEND
+ [POLKADOT]: [0],
+ [KUSAMA]: [0],
+ [POLKADOT_ASSET_HUB]: [1],
+ [WESTEND]: [0],
+};
+
+export const DEFAULT_CHAINS_ORDER: Record<ChainId, Record<AssetId, number>> = {
+ [POLKADOT]: {
+ 0: 0, // DOT - index_0
+ },
+ [KUSAMA]: {
+ 0: 1, // KSM - index_1
+ },
+ [POLKADOT_ASSET_HUB]: {
+ 1: 2, // USDT - index_2
+ },
 };

app/components/Address/TruncateAddress.tsx

@@ -1,14 +1,14 @@
 // @ts-expect-error no types
 import MiddleEllipsis from 'react-middle-ellipsis';
 
-import { TextBase } from '@/components';
+import { TextBase } from '../Typography';
 
 type Props = {
  address?: string;
  className?: string;
 };
 
-const TruncateAddress = ({ address, className }: Props) => {
+export const TruncateAddress = ({ address, className }: Props) => {
  return (
  <span className={className}>
  <MiddleEllipsis>
@@ -19,4 +19,3 @@ const TruncateAddress = ({ address, className }: Props) => {
  </span>
  );
 };
-export default TruncateAddress;

app/components/AmountDetails/AmountDetails.tsx

@@ -2,8 +2,11 @@ import { type PropsWithChildren } from 'react';
 
 import { Input } from '@nextui-org/react';
 
-import { BodyText, Icon, LargeTitleText, TokenPrice } from '@/components';
-import { type IconNames } from '@/components/Icon/types';
+import { Icon } from '../Icon/Icon';
+import { TokenPrice } from '../Price/TokenPrice';
+import { BodyText, LargeTitleText } from '../Typography';
+
+import { AssetIcon } from '@/components';
 import { type Asset } from '@/types/substrate';
 
 //TODO: Change layout mobile text
@@ -33,13 +36,13 @@ export const AmountDetails = ({
 
  return (
  <>
- <div className="mb-6 mt-5 grid grid-cols-[40px,1fr,auto] gap-2 h-[40px] items-center">
- <Icon name={asset.symbol as IconNames} className="w-10 h-10" />
+ <div className="flex gap-x-2 items-center mb-6 mt-5 -ml-1.5">
+ <AssetIcon src={asset.icon} size={46} />
  <LargeTitleText>{asset.symbol}</LargeTitleText>
  <Input
  fullWidth={false}
  variant="underlined"
- className="mt-2.5 font-manrope h-full"
+ className="font-manrope w-max ml-auto mt-2.5 "
  classNames={{ input: ['text-right !text-large-title max-w-[7ch]'] }}
  value={amount}
  isInvalid={!isAmountValid}

app/components/Assets/AssetBalance.tsx

@@ -1,8 +1,12 @@
+import { Icon } from '../Icon/Icon';
+import { TokenPrice } from '../Price/TokenPrice';
+import { MediumTitle } from '../Typography';
+
 import { cnTw } from '@/common/utils/twMerge';
-import { AssetIcon, Icon, MediumTitle, TokenPrice } from '@/components';
 import { type Asset } from '@/types/substrate';
 
-import Balance from './Balance';
+import { AssetIcon } from './AssetIcon';
+import { Balance } from './Balance';
 
 type Props = {
  asset: Asset;
@@ -14,12 +18,12 @@ type Props = {
  animate?: boolean;
 };
 
-const AssetBalance = ({ balance, asset, className, showPrice, showArrow, animate }: Props) => {
+export const AssetBalance = ({ balance, asset, className, showPrice, showArrow, animate }: Props) => {
  const { icon, precision, symbol, priceId } = asset;
 
  return (
- <div className={cnTw('grid grid-cols-[40px,1fr,auto] items-center gap-x-3 grid-rows-[1fr,auto]', className)}>
- <AssetIcon src={icon} size={40} className="row-span-2" />
+ <div className={cnTw('grid grid-cols-[48px,1fr,auto] items-center gap-x-3 grid-rows-[1fr,auto]', className)}>
+ <AssetIcon src={icon} size={48} className="row-span-2" />
  <MediumTitle>{symbol}</MediumTitle>
  <MediumTitle className="flex items-center justify-self-end">
  <Balance balance={balance} precision={precision} animate={animate} />
@@ -29,5 +33,3 @@ const AssetBalance = ({ balance, asset, className, showPrice, showArrow, animate
  </div>
  );
 };
-
-export default AssetBalance;

app/components/Assets/AssetIcon.tsx

@@ -1,28 +1,36 @@
+import { useEffect } from 'react';
+
+import { Shimmering } from '../Shimmering/Shimmering';
+
 import { cnTw } from '@/common/utils';
 import { useToggle } from '@/common/utils/hooks';
-import { Shimmering } from '@/components';
 
 type Props = {
- src?: string;
+ src: string;
  size?: number;
  className?: string;
 };
 
-const AssetIcon = ({ src, size = 32, className }: Props) => {
+export const AssetIcon = ({ src, size = 32, className }: Props) => {
  const [isImgLoaded, toggleImgLoaded] = useToggle();
 
- return (
- <div className={cnTw('rounded-full', isImgLoaded && 'bg-icon-on-neutral', className)}>
- {!isImgLoaded && <Shimmering circle width={size} height={size} className={className} />}
- <img
- alt=""
- src={src}
- className={cnTw(!isImgLoaded && 'opacity-0')}
- style={{ width: size, height: size }}
- onLoad={toggleImgLoaded}
- />
- </div>
- );
-};
+ useEffect(() => {
+ const image = new Image();
+ image.src = src;
+ image.onload = toggleImgLoaded;
+ }, []);
 
-export default AssetIcon;
+ if (!isImgLoaded) {
+ return (
+ // Asset SVG icon has empty space between border and real icon
+ <div
+ className={cnTw('flex items-center justify-center', className)}
+ style={{ width: `${size}px`, height: `${size}px` }}
+ >
+ <Shimmering circle width={Math.round(size * 0.75)} />
+ </div>
+ );
+ }
+
+ return <img alt="" src={src} className={className} style={{ width: size, height: size }} />;
+};