Add Address book to xcm

package.json

@@ -38,15 +38,15 @@
     "@emotion/styled": "^11.10.4",
     "@ethersproject/address": "^5.7.0",
     "@ethersproject/providers": "^5.7.2",
-    "@galacticcouncil/apps": "^9.1.0",
+    "@galacticcouncil/apps": "9.3.0-pr162-7218742",
     "@galacticcouncil/math-lbp": "^1.0.0",
     "@galacticcouncil/math-liquidity-mining": "^1.0.0",
     "@galacticcouncil/math-omnipool": "^1.0.0",
     "@galacticcouncil/math-stableswap": "^1.0.0",
     "@galacticcouncil/math-staking": "^1.0.0",
     "@galacticcouncil/math-xyk": "^1.0.0",
     "@galacticcouncil/sdk": "^5.1.0",
-    "@galacticcouncil/ui": "^5.2.3",
+    "@galacticcouncil/ui": "5.3.0-pr162-7218742",
     "@galacticcouncil/xcm-cfg": "^5.7.1",
     "@galacticcouncil/xcm-core": "^5.4.0",
     "@galacticcouncil/xcm-sdk": "^7.0.0",

src/components/AddressBook/AddressBook.tsx

@@ -10,13 +10,30 @@ import { AddressBookInput } from "./input/AddressBookInput"
 import { AddressBookItem } from "./item/AddressBookItem"
 import { safeConvertAddressH160 } from "utils/evm"
 import { arraySearch } from "utils/helpers"
+import { Web3ConnectModeFilter } from "sections/web3-connect/modal/Web3ConnectModeFilter"
+import { WalletMode } from "sections/web3-connect/store/useWeb3ConnectStore"
 
-type Props = { onSelect: (address: string) => void }
+type Props = { onSelect: (address: string) => void; mode?: WalletMode }
 
-export const AddressBook = ({ onSelect }: Props) => {
+export const AddressBook = ({ onSelect, mode = WalletMode.Default }: Props) => {
   const { t } = useTranslation()
   const [search, setSearch] = useState("")
-  const { addresses } = useAddressStore()
+  const { addresses: allAddresses } = useAddressStore()
+  const [filter, setFilter] = useState(mode)
+
+  const addresses = useMemo(() => {
+    if (filter === WalletMode.Substrate) {
+      return allAddresses.filter(
+        (address) => address.provider === "polkadot-js",
+      )
+    }
+
+    if (filter === WalletMode.EVM) {
+      return allAddresses.filter((address) => address.provider === "metamask")
+    }
+
+    return allAddresses
+  }, [allAddresses, filter])
 
   const items = useMemo(
     () => (search ? arraySearch(addresses, search) : addresses),
@@ -37,7 +54,16 @@ export const AddressBook = ({ onSelect }: Props) => {
         onAdd={() => setSearch("")}
         canAdd={canAdd}
       />
-      <Spacer size={14} />
+      {mode === WalletMode.Default ? (
+        <div sx={{ py: 14 }}>
+          <Web3ConnectModeFilter
+            active={filter}
+            onSetActive={(mode) => setFilter(mode)}
+          />
+        </div>
+      ) : (
+        <Spacer size={14} />
+      )}
       {!items.length ? (
         <AddressBookEmpty canAdd={canAdd} />
       ) : (

src/sections/xcm/XcmPage.tsx

@@ -14,6 +14,7 @@ import { useStore } from "state/store"
 import { useWeb3ConnectStore } from "sections/web3-connect/store/useWeb3ConnectStore"
 import {
   DEFAULT_DEST_CHAIN,
+  getAddressBookMode,
   getDefaultSrcChain,
   getDesiredWalletMode,
   getNotificationToastTemplates,
@@ -24,6 +25,11 @@ import { genesisHashToChain } from "utils/helpers"
 import { Asset } from "@galacticcouncil/sdk"
 import { useRpcProvider } from "providers/rpcProvider"
 import { ExternalAssetUpdateModal } from "sections/trade/modal/ExternalAssetUpdateModal"
+import { AddressBook } from "components/AddressBook/AddressBook"
+import { Modal } from "components/Modal/Modal"
+import { ModalContents } from "components/Modal/contents/ModalContents"
+import { TransferState } from "@galacticcouncil/apps/build/types/app/xcm/types"
+import { AnyChain } from "@galacticcouncil/xcm-core"
 
 type WalletChangeDetail = {
   srcChain: string
@@ -41,6 +47,9 @@ export const XcmApp = createComponent({
     onCheckAssetDataClick: "gc:external:checkData" as EventName<
       CustomEvent<Asset>
     >,
+    onAddressBookClick: "gc:address-book:open" as EventName<
+      CustomEvent<TransferState>
+    >,
   },
 })
 
@@ -61,6 +70,7 @@ export function XcmPage() {
   const { account } = useAccount()
   const { createTransaction } = useStore()
   const [tokenCheck, setTokenCheck] = React.useState<Asset | null>(null)
+  const [openAddressBook, setOpenAddressBook] = React.useState(false)
 
   const [incomingSrcChain, setIncomingSrcChain] = React.useState("")
   const [srcChain, setSrcChain] = React.useState(
@@ -70,6 +80,18 @@ export function XcmPage() {
   const rawSearch = useSearch<SearchGenerics>()
   const search = XcmAppSearch.safeParse(rawSearch)
 
+  const srcChainDefault =
+    search.success && search.data.srcChain ? search.data.srcChain : srcChain
+
+  const destChainDefault =
+    search.success && search.data.destChain
+      ? search.data.destChain
+      : DEFAULT_DEST_CHAIN
+
+  const [dstChain, setDstChain] = React.useState<AnyChain | undefined>(
+    undefined,
+  )
+
   const { toggle: toggleWeb3Modal } = useWeb3ConnectStore()
 
   const rpcUrlList = useActiveRpcUrlList()
@@ -113,20 +135,13 @@ export function XcmPage() {
     })
   }
 
-  const srcChainDefault =
-    search.success && search.data.srcChain ? search.data.srcChain : srcChain
-
-  const destChainDefault =
-    search.success && search.data.destChain
-      ? search.data.destChain
-      : DEFAULT_DEST_CHAIN
-
   const assetDefault =
     search.success && search.data.asset
       ? search.data.asset
       : srcChain === "ethereum"
         ? "eth"
         : undefined
+
   const ss58Prefix = genesisHashToChain(account?.genesisHash).prefix
 
   const blacklist = import.meta.env.VITE_ENV === "production" ? "acala-evm" : ""
@@ -137,6 +152,7 @@ export function XcmPage() {
         ref={(r) => {
           if (r) {
             r.setAttribute("assetCheckEnabled", "")
+            r.setAttribute("addressBookEnabled", "")
           }
         }}
         srcChain={srcChainDefault}
@@ -152,6 +168,10 @@ export function XcmPage() {
         ss58Prefix={ss58Prefix}
         blacklist={blacklist}
         onCheckAssetDataClick={(e) => setTokenCheck(e.detail)}
+        onAddressBookClick={(e) => {
+          setOpenAddressBook(true)
+          setDstChain(e.detail.destChain)
+        }}
       />
       {isLoaded && tokenCheck && (
         <ExternalAssetUpdateModal
@@ -160,6 +180,24 @@ export function XcmPage() {
           onClose={() => setTokenCheck(null)}
         />
       )}
+      {openAddressBook && (
+        <Modal open>
+          <ModalContents
+            onClose={() => setOpenAddressBook(false)}
+            contents={[
+              {
+                title: "Select destination address",
+                content: (
+                  <AddressBook
+                    onSelect={() => null}
+                    mode={getAddressBookMode(dstChain)}
+                  />
+                ),
+              },
+            ]}
+          />
+        </Modal>
+      )}
     </SContainer>
   )
 }

src/sections/xcm/XcmPage.utils.tsx

@@ -1,7 +1,7 @@
 import { SubmittableExtrinsic } from "@polkadot/api/promise/types"
 import { isEvmAccount } from "utils/evm"
 import { XCallEvm } from "@galacticcouncil/xcm-sdk"
-import { SubstrateApis } from "@galacticcouncil/xcm-core"
+import { AnyChain, SubstrateApis } from "@galacticcouncil/xcm-core"
 import { chainsMap } from "@galacticcouncil/xcm-cfg"
 import { TxInfo } from "@galacticcouncil/apps"
 import { isAnyParachain } from "utils/helpers"
@@ -92,3 +92,13 @@ export function getDesiredWalletMode(chainKey: string) {
 
   return WalletMode.Substrate
 }
+
+export const getAddressBookMode = (chain?: AnyChain) => {
+  if (!chain) return WalletMode.Default
+
+  if (chain.isEvmChain()) return WalletMode.EVM
+
+  if (chain.isParachain()) return WalletMode.Substrate
+
+  if (chain.isEvmParachain()) return WalletMode.Default
+}