Merge pull request #54 from ringecosystem/jay/fix-issues-51-52-53

Fix ui issues

src/components/accountButton.tsx

@@ -6,6 +6,7 @@ import { useAccount, useDisconnect, useNetwork, useSwitchNetwork } from "wagmi";
 import { useTalisman, useTransfer } from "@/hooks";
 import { isValidAddress, parseCross, toShortAdrress, formatBalance, getAssetIconSrc } from "@/utils";
 import { WalletID } from "@/types";
+import AddressIdenticon from "./addressIdenticon";
 
 export default function AccountButton({ setSwitchWallet }: { setSwitchWallet: (x: boolean) => void }) {
   const { talismanAccounts } = useTalisman();
@@ -111,7 +112,7 @@ export default function AccountButton({ setSwitchWallet }: { setSwitchWallet: (x
       {subMenu && (
         <div className="absolute right-[-21px] top-[calc(100%+20px)] flex w-[290px] flex-col gap-[20px] rounded-[10px] bg-white p-[20px]">
           <div className="flex items-center gap-[10px]">
-            <span className="block h-[30px] w-[30px] bg-[url('/images/icons/assethub-icon.svg')] bg-contain bg-center bg-no-repeat" />
+            <AddressIdenticon address={connectedAddress?.toString() || ""} size={30} />
             <p className="text-[16px] font-bold leading-[24px]">
               {connectedAddress && toShortAdrress(connectedAddress.toString())}
             </p>

src/components/addressIdenticon.tsx

@@ -0,0 +1,20 @@
+import { isAddress } from "viem";
+import EVMIdenticon from "./evmIdenticon";
+import Identicon from "@polkadot/react-identicon";
+
+interface Props {
+  address: string;
+  size: number;
+}
+
+export default function AddressIdenticon({ address, size }: Props) {
+  return (
+    <div className="inline-flex shrink-0 items-center justify-center">
+      {isAddress(address) ? (
+        <EVMIdenticon diameter={size} address={address} />
+      ) : (
+        <Identicon size={size} value={address} theme="polkadot" />
+      )}
+    </div>
+  );
+}

src/components/appBox.tsx

@@ -1,11 +1,12 @@
 "use client";
 
-import { ChangeEventHandler, useCallback, useMemo, useRef, useState } from "react";
+import { ChangeEventHandler, useCallback, useMemo, useState } from "react";
 import Image from "next/image";
 import ChainSelectInput from "./chainSelectInput";
 import SuccessModal from "./successModal";
 import PendingModal from "./pendingModal";
 import {
+  formatAddressByChain,
   formatBalance,
   getAssetIconSrc,
   getAvailableSourceAsset,
@@ -34,7 +35,6 @@ export default function AppBox() {
 
   const {
     sender,
-    setSender,
     recipient,
     setRecipient,
     sourceAssetBalance,
@@ -120,17 +120,6 @@ export default function AppBox() {
     [sourceAsset, min, sourceAssetBalance, assetLimit, assetSupply, setTransferAmount],
   );
 
-  const senderAddressType = useMemo(() => sourceChain.addressType, [sourceChain]);
-
-  const handleSenderAddressChange = useCallback<ChangeEventHandler<HTMLInputElement>>(
-    (e) => {
-      const address = e.target.value;
-      const valid = address ? isValidAddress(address, senderAddressType) : true;
-      setSender({ valid, address });
-    },
-    [senderAddressType, setSender],
-  );
-
   const recipientAddressType = useMemo(() => targetChain.addressType, [targetChain]);
 
   const handleRecipientAddressChange = useCallback<ChangeEventHandler<HTMLInputElement>>(
@@ -350,10 +339,12 @@ export default function AppBox() {
           {sender ? (
             <input
               type="text"
-              disabled
-              value={sender ? sender.address : ""}
-              onChange={handleSenderAddressChange}
+              value={sender ? formatAddressByChain(sender.address, sourceChain) : ""}
               placeholder="Enter address"
+              onChange={(e) => {
+                e.stopPropagation();
+                e.preventDefault();
+              }}
               className="h-[24px] text-ellipsis whitespace-nowrap border-none bg-transparent text-[14px] font-[700] leading-[24px] outline-none"
             />
           ) : (

src/components/evmIdenticon.tsx

@@ -0,0 +1,10 @@
+import Jazzicon, { jsNumberForAddress } from "react-jazzicon";
+
+interface Props {
+  diameter: number;
+  address: string;
+}
+
+export default function EVMIdenticon({ diameter, address }: Props) {
+  return <Jazzicon diameter={diameter} seed={jsNumberForAddress(address)} />;
+}

src/components/header.tsx

@@ -19,7 +19,7 @@ export default function Header() {
   const [connected, setConnected] = useState(false);
   const { address: activeAddress } = useAccount();
   const { talismanAccounts, connectTalisman } = useTalisman();
-  const { activeSenderWallet, setSender, sourceChain, sender } = useTransfer();
+  const { activeSenderWallet, setSender, sourceChain, sender, setActiveSenderAccount } = useTransfer();
   const [switchWallet, setSwitchWallet] = useState<boolean>(false);
 
   const handleClose = useCallback(() => {
@@ -47,6 +47,14 @@ export default function Header() {
     [activeAddress, activeSenderWallet, talismanAccounts],
   );
 
+  useEffect(() => {
+    if (activeSenderWallet === WalletID.TALISMAN) {
+      setActiveSenderAccount(talismanAccounts.at(0));
+    } else {
+      setActiveSenderAccount(undefined);
+    }
+  }, [activeSenderWallet, talismanAccounts, setActiveSenderAccount]);
+
   useEffect(() => {
     if ((activeAddress || talismanAccounts.length > 0) && activeSenderWallet) {
       setConnected(true);

src/config/chains/assethub-polkadot-chain.ts

@@ -138,4 +138,5 @@ export const assethubPolkadotChain: ChainConfig = {
   endpoint: "wss://polkadot-asset-hub-rpc.polkadot.io",
   parachainId: ParachainID.ASSETHUB_POLKADOT,
   existential: { minBalance: bnToBn("500000000") }, // 0.05 DOT
+  ss58Prefix: 0,
 };

src/config/chains/assethub-rococo-chain.ts

@@ -76,4 +76,5 @@ export const assethubRococoChain: ChainConfig = {
    */
   endpoint: "wss://rococo-asset-hub-rpc.polkadot.io",
   parachainId: ParachainID.ASSETHUB_ROCOCO,
+  ss58Prefix: 42,
 };

src/config/chains/darwinia-chain.ts

@@ -168,4 +168,5 @@ export const darwiniaChain: ChainConfig = {
    */
   endpoint: "wss://rpc.darwinia.network",
   parachainId: ParachainID.DARWINIA,
+  ss58Prefix: 18,
 };

src/config/chains/hydradx-chain.ts

@@ -76,4 +76,5 @@ export const hydradxChain: ChainConfig = {
   // endpoint: "wss://rpc.hydradx.cloud",
   endpoint: "wss://hydradx-rpc.dwellir.com",
   parachainId: ParachainID.HYDRADX,
+  ss58Prefix: 63,
 };

src/config/chains/pangolin-chain.ts

@@ -76,4 +76,5 @@ export const pangolinChain: ChainConfig = {
    */
   endpoint: "wss://pangolin-rpc.darwinia.network",
   parachainId: ParachainID.PANGOLIN,
+  ss58Prefix: 0,
 };

src/types/chain.ts

@@ -45,4 +45,5 @@ export interface ChainConfig extends Chain {
   existential?: {
     minBalance: BN;
   };
+  ss58Prefix: number;
 }

src/utils/address.ts

@@ -1,4 +1,4 @@
-import { AddressType } from "@/types";
+import { AddressType, ChainConfig } from "@/types";
 import { decodeAddress, encodeAddress } from "@polkadot/keyring";
 import { hexToU8a, isHex } from "@polkadot/util";
 import { isAddress } from "viem";
@@ -22,3 +22,9 @@ export function isValidAddress(address: string, addressType: AddressType) {
 export function toShortAdrress(address: string) {
   return address.length > 16 ? `${address.slice(0, 5)}...${address.slice(-4)}` : address;
 }
+
+export function formatAddressByChain(address: string | undefined, chain: ChainConfig) {
+  return address && !isAddress(address) && chain.addressType === "substrate"
+    ? encodeAddress(address, chain.ss58Prefix)
+    : address;
+}