Make IBCChannelConfig have multiple channels

chainapsis · Jul 5, 2023 · 267013b · 267013b
1 parent 44fd39c
commit 267013b
Show file tree

Hide file tree

Showing 6 changed files with 48 additions and 40 deletions.
diff --git a/packages/extension/src/hooks/use-ibc-channel-config-query-string.ts b/packages/extension/src/hooks/use-ibc-channel-config-query-string.ts
@@ -2,41 +2,33 @@ import { useEffectOnce } from "./use-effect-once";
 import { useEffect } from "react";
 import { useSearchParams } from "react-router-dom";
 import { IIBCChannelConfig } from "@keplr-wallet/hooks";
+import { toJS } from "mobx";
 
 export const useIBCChannelConfigQueryString = (
   channelConfig: IIBCChannelConfig
 ) => {
   const [searchParams, setSearchParams] = useSearchParams();
 
   useEffectOnce(() => {
-    const initialCounterpartyChainId = searchParams.get(
-      "initialCounterpartyChainId"
-    );
-    const initialPortId = searchParams.get("initialPortId");
-    const initialChannelId = searchParams.get("initialChannelId");
-    if (initialCounterpartyChainId && initialPortId && initialChannelId) {
-      channelConfig.setChannel({
-        counterpartyChainId: initialCounterpartyChainId,
-        portId: initialPortId,
-        channelId: initialChannelId,
-      });
+    const initialIBCChannels = searchParams.get("initialIBCChannels");
+    if (initialIBCChannels) {
+      const channels = JSON.parse(initialIBCChannels);
+      channelConfig.setChannels(channels);
     }
   });
 
   useEffect(() => {
     setSearchParams(
       (prev) => {
-        if (channelConfig.channel) {
+        if (channelConfig.channels.length > 0) {
           prev.set(
-            "initialCounterpartyChainId",
-            channelConfig.channel.counterpartyChainId
+            "initialIBCChannels",
+            // toJS는 당장은 필요없기는 한데... 나중에 deep observable이 될 가능성이 있기도하고
+            // 해서 나쁠께 없어서 해줌
+            JSON.stringify(toJS(channelConfig.channels))
           );
-          prev.set("initialPortId", channelConfig.channel.portId);
-          prev.set("initialChannelId", channelConfig.channel.channelId);
         } else {
-          prev.delete("initialCounterpartyChainId");
-          prev.delete("initialPortId");
-          prev.delete("initialChannelId");
+          prev.delete("initialIBCChannels");
         }
 
         return prev;
@@ -45,5 +37,5 @@ export const useIBCChannelConfigQueryString = (
         replace: true,
       }
     );
-  }, [channelConfig.channel, setSearchParams]);
+  }, [channelConfig.channels, setSearchParams]);
 };
diff --git a/packages/extension/src/pages/ibc-transfer/index.tsx b/packages/extension/src/pages/ibc-transfer/index.tsx
@@ -61,6 +61,10 @@ export const IBCTransferPage: FunctionComponent = observer(() => {
     chainStore.getChain(chainId).forceFindCurrency(coinMinimalDenom)
   );
 
+  if (ibcTransferConfigs.channelConfig.channels.length > 1) {
+    throw new Error("IBC channel config must have only one channel");
+  }
+
   const gasSimulator = useGasSimulator(
     new ExtensionKVStore("gas-simulator.ibc.transfer"),
     chainStore,
@@ -69,7 +73,7 @@ export const IBCTransferPage: FunctionComponent = observer(() => {
     ibcTransferConfigs.feeConfig,
     "native",
     () => {
-      if (!ibcTransferConfigs.channelConfig.channel) {
+      if (ibcTransferConfigs.channelConfig.channels.length === 0) {
         throw new Error("Channel not set yet");
       }
 
@@ -88,7 +92,7 @@ export const IBCTransferPage: FunctionComponent = observer(() => {
       }
 
       return accountInfo.cosmos.makeIBCTransferTx(
-        ibcTransferConfigs.channelConfig.channel,
+        ibcTransferConfigs.channelConfig.channels[0],
         ibcTransferConfigs.amountConfig.amount[0].toDec().toString(),
         ibcTransferConfigs.amountConfig.amount[0].currency,
         ibcTransferConfigs.recipientConfig.recipient
@@ -152,10 +156,10 @@ export const IBCTransferPage: FunctionComponent = observer(() => {
           if (isSelectChannelPhase) {
             setPhase("amount");
           } else {
-            if (ibcTransferConfigs.channelConfig.channel) {
+            if (ibcTransferConfigs.channelConfig.channels.length === 1) {
               try {
                 const tx = accountInfo.cosmos.makeIBCTransferTx(
-                  ibcTransferConfigs.channelConfig.channel,
+                  ibcTransferConfigs.channelConfig.channels[0],
                   ibcTransferConfigs.amountConfig.amount[0].toDec().toString(),
                   ibcTransferConfigs.amountConfig.amount[0].currency,
                   ibcTransferConfigs.recipientConfig.recipient

diff --git a/packages/extension/src/pages/ibc-transfer/select-channel/index.tsx b/packages/extension/src/pages/ibc-transfer/select-channel/index.tsx
@@ -45,18 +45,29 @@ export const IBCTransferSelectChannelView: FunctionComponent<{
     const intl = useIntl();
     const theme = useTheme();
 
+    if (channelConfig.channels.length > 1) {
+      throw new Error("IBC channel config must have only one channel");
+    }
+
     const [isOpenSelectChannel, setIsOpenSelectChannel] = useState(false);
     const [selectedChannelId, setSelectedChannelId] = useState<
       string | undefined
-    >(channelConfig.channel?.channelId);
+    >(
+      channelConfig.channels.length === 1
+        ? channelConfig.channels[0].channelId
+        : undefined
+    );
 
     useEffect(() => {
-      if (channelConfig.channel?.channelId !== selectedChannelId) {
+      if (
+        channelConfig.channels.length === 1 &&
+        channelConfig.channels[0].channelId !== selectedChannelId
+      ) {
         // channel이 다른 컴포넌트에서 바꼈을때를 대비해서
         // 여기서 selectedChannelId를 업데이트 해준다.
-        setSelectedChannelId(channelConfig.channel?.channelId);
+        setSelectedChannelId(channelConfig.channels[0].channelId);
       }
-    }, [channelConfig.channel?.channelId, selectedChannelId]);
+    }, [channelConfig.channels, selectedChannelId]);
 
     const sender = accountStore.getAccount(
       chainStore.getChain(chainId).chainId
@@ -148,10 +159,10 @@ export const IBCTransferSelectChannelView: FunctionComponent<{
                     .getTransferChannels(chainId)
                     .find((channel) => channel.channelId === key);
                   if (channel) {
-                    channelConfig.setChannel(channel);
+                    channelConfig.setChannels([channel]);
                     setSelectedChannelId(key);
                   } else {
-                    channelConfig.setChannel(undefined);
+                    channelConfig.setChannels([]);
                     setSelectedChannelId(undefined);
                   }
                 }

diff --git a/packages/hooks/src/ibc/channel.ts b/packages/hooks/src/ibc/channel.ts
@@ -5,27 +5,27 @@ import { useState } from "react";
 
 export class IBCChannelConfig implements IIBCChannelConfig {
   @observable.ref
-  protected _channel: Channel | undefined = undefined;
+  protected _channels: Channel[] = [];
 
   constructor() {
     makeObservable(this);
   }
 
-  get channel(): Channel | undefined {
-    return this._channel;
+  get channels(): Channel[] {
+    return this._channels;
   }
 
   @computed
   get error(): Error | undefined {
-    if (!this._channel) {
+    if (this._channels.length === 0) {
       return new ChannelNotSetError("Channel not set");
     }
     return undefined;
   }
 
   @action
-  setChannel(channel: Channel | undefined): void {
-    this._channel = channel;
+  setChannels(channels: Channel[]): void {
+    this._channels = [...channels];
   }
 }
 

diff --git a/packages/hooks/src/ibc/reciepient.ts b/packages/hooks/src/ibc/reciepient.ts
@@ -19,8 +19,9 @@ export class IBCRecipientConfig extends RecipientConfig {
   }
 
   override get chainId(): string {
-    return this.channelConfig.channel
-      ? this.channelConfig.channel.counterpartyChainId
+    return this.channelConfig.channels.length > 0
+      ? this.channelConfig.channels[this.channelConfig.channels.length - 1]
+          .counterpartyChainId
       : super.chainId;
   }
 }

diff --git a/packages/hooks/src/ibc/types.ts b/packages/hooks/src/ibc/types.ts
@@ -5,8 +5,8 @@ export interface Channel {
 }
 
 export interface IIBCChannelConfig {
-  channel: Channel | undefined;
-  setChannel(channel: Channel | undefined): void;
+  channels: Channel[];
+  setChannels(channels: Channel[]): void;
 
   error: Error | undefined;
 }