Merge branch 'Thunnini/prepare-starknet' into develop

# Conflicts: # apps/extension/package.json # apps/extension/src/pages/main/index.tsx # apps/extension/src/pages/main/layouts/header.tsx # yarn.lock
chainapsis · Oct 14, 2024 · b9c7f38 · b9c7f38
2 parents c2d43ec + 6226ab8
commit b9c7f38
Show file tree

Hide file tree

Showing 163 changed files with 13,694 additions and 1,107 deletions.
diff --git a/apps/extension/package.json b/apps/extension/package.json
@@ -34,6 +34,7 @@
     "@keplr-wallet/crypto": "0.12.132",
     "@keplr-wallet/hooks": "0.12.132",
     "@keplr-wallet/hooks-internal": "0.12.132",
+    "@keplr-wallet/hooks-starknet": "0.12.132",
     "@keplr-wallet/ledger-cosmos": "0.12.132",
     "@keplr-wallet/popup": "0.12.132",
     "@keplr-wallet/proto-types": "0.12.132",
@@ -47,6 +48,7 @@
     "@keplr-wallet/stores-eth": "0.12.132",
     "@keplr-wallet/stores-ibc": "0.12.132",
     "@keplr-wallet/stores-internal": "0.12.132",
+    "@keplr-wallet/stores-starknet": "0.12.132",
     "@keplr-wallet/types": "0.12.132",
     "@keplr-wallet/unit": "0.12.132",
     "@keystonehq/animated-qr": "^0.8.6",
@@ -142,6 +144,7 @@
     "mobx-react-lite": "^3",
     "mobx-utils": "^6",
     "react": "^16.8.0 || ^17 || ^18",
-    "react-dom": "^16.8.0 || ^17 || ^18"
+    "react-dom": "^16.8.0 || ^17 || ^18",
+    "starknet": "^6"
   }
 }
diff --git a/apps/extension/src/components/contract-address-book-modal/index.tsx b/apps/extension/src/components/contract-address-book-modal/index.tsx
@@ -46,10 +46,13 @@ export const ContractAddressBookModal: FunctionComponent<{
   onSelect: (address: string) => void;
   close: () => void;
 }> = observer(({ isOpen, chainId, onSelect, close }) => {
-  const { queriesStore } = useStore();
+  const { chainStore, queriesStore, starknetQueriesStore } = useStore();
 
   const contracts =
-    queriesStore.get(chainId).tokenContracts.queryTokenContracts.tokenContracts;
+    "cosmos" in chainStore.getModularChain(chainId)
+      ? queriesStore.get(chainId).tokenContracts.queryTokenContracts
+          .tokenContracts
+      : starknetQueriesStore.get(chainId).queryTokenContracts.tokenContracts;
 
   const [search, setSearch] = useState("");
   const searchRef = useFocusOnMount<HTMLInputElement>();

diff --git a/apps/extension/src/components/dropdown/dropdown.tsx b/apps/extension/src/components/dropdown/dropdown.tsx
@@ -20,6 +20,7 @@ export const Dropdown: FunctionComponent<DropdownProps> = ({
   menuContainerMaxHeight,
   allowSearch,
   searchExcludedKeys,
+  direction = "down",
 }) => {
   const [isOpen, setIsOpen] = React.useState(false);
   const wrapperRef = useRef<HTMLInputElement>(null);
@@ -124,24 +125,36 @@ export const Dropdown: FunctionComponent<DropdownProps> = ({
             </Styles.Text>
           </Box>
           <Column weight={1} />
-          <ArrowDropDownIcon width="1.25rem" height="1.25rem" />
+          <Box
+            style={{
+              transform: direction === "up" ? "scaleY(-1)" : undefined,
+            }}
+          >
+            <ArrowDropDownIcon width="1.25rem" height="1.25rem" />
+          </Box>
         </Columns>
       </Styles.SelectedContainer>
-      <Styles.MenuContainer isOpen={isOpen && filteredItems.length > 0}>
+      <Styles.MenuContainer
+        isOpen={isOpen && filteredItems.length > 0}
+        direction={direction}
+        size={size}
+      >
         <Styles.MenuContainerScroll
           menuContainerMaxHeight={menuContainerMaxHeight}
         >
-          {filteredItems.map((item) => (
-            <Styles.MenuItem
-              key={item.key}
-              onClick={() => {
-                onSelect(item.key);
-                setIsOpen(false);
-              }}
-            >
-              {item.label}
-            </Styles.MenuItem>
-          ))}
+          <Styles.MenuItemsContainer direction={direction}>
+            {filteredItems.map((item) => (
+              <Styles.MenuItem
+                key={item.key}
+                onClick={() => {
+                  onSelect(item.key);
+                  setIsOpen(false);
+                }}
+              >
+                {item.label}
+              </Styles.MenuItem>
+            ))}
+          </Styles.MenuItemsContainer>
         </Styles.MenuContainerScroll>
       </Styles.MenuContainer>
     </Styles.Container>

diff --git a/apps/extension/src/components/dropdown/styles.ts b/apps/extension/src/components/dropdown/styles.ts
@@ -9,6 +9,15 @@ export const Styles = {
     position: relative;
   `,
 
+  DropdownContainer: styled.div<{
+    direction: "up" | "down";
+  }>`
+    display: flex;
+    flex-direction: ${(props) =>
+      props.direction === "down" ? "column" : "column-reverse"};
+    position: relative;
+  `,
+
   SelectedContainer: styled.div<{
     isOpen: boolean;
     size: string;
@@ -68,6 +77,8 @@ export const Styles = {
   `,
   MenuContainer: styled.div.withConfig<{
     isOpen: boolean;
+    direction: "up" | "down";
+    size: string;
   }>({
     shouldForwardProp: (prop) => {
       if (prop === "isOpen") {
@@ -77,10 +88,19 @@ export const Styles = {
     },
   })`
     position: absolute;
+    ${({ direction, size }) =>
+      direction === "down"
+        ? ""
+        : size === "small"
+        ? "bottom: 2.5rem;"
+        : "bottom: 3.25rem;"}
 
     width: 100%;
 
-    margin-top: 0.375rem;
+    ${({ direction }) =>
+      direction === "down"
+        ? "margin-top: 0.375rem"
+        : "margin-bottom: 0.375rem"};
 
     z-index: 1;
 
@@ -115,6 +135,13 @@ export const Styles = {
       }
     }};
   `,
+
+  MenuItemsContainer: styled.div<{ direction: "up" | "down" }>`
+    display: flex;
+    flex-direction: ${({ direction }) =>
+      direction === "down" ? "column" : "column-reverse"};
+  `,
+
   MenuContainerScroll: styled(SimpleBar).withConfig<{
     menuContainerMaxHeight?: string;
   }>({

diff --git a/apps/extension/src/components/dropdown/types.ts b/apps/extension/src/components/dropdown/types.ts
@@ -19,4 +19,6 @@ export interface DropdownProps {
 
   allowSearch?: boolean;
   searchExcludedKeys?: string[];
+
+  direction?: "up" | "down";
 }
diff --git a/apps/extension/src/components/image/index.tsx b/apps/extension/src/components/image/index.tsx
@@ -1,7 +1,8 @@
 import React, { FunctionComponent, useLayoutEffect, useState } from "react";
-import { AppCurrency, ChainInfo } from "@keplr-wallet/types";
+import { AppCurrency, ChainInfo, ModularChainInfo } from "@keplr-wallet/types";
 import { observer } from "mobx-react-lite";
 import { useStore } from "../../stores";
+import { ChainIdHelper } from "@keplr-wallet/cosmos";
 
 /**
  * 그냥 이미지 컴포넌트인데 오류 났을때 대체 이미지를 보여주는 기능이 있음
@@ -71,7 +72,7 @@ export const RawImageFallback: FunctionComponent<
 
 export const ChainImageFallback: FunctionComponent<
   Omit<React.ImgHTMLAttributes<HTMLImageElement>, "src" | "alt"> & {
-    chainInfo: ChainInfo;
+    chainInfo: ChainInfo | ModularChainInfo;
 
     size: string;
     alt?: string;
@@ -105,7 +106,7 @@ export const ChainImageFallback: FunctionComponent<
 
 export const CurrencyImageFallback: FunctionComponent<
   Omit<React.ImgHTMLAttributes<HTMLImageElement>, "src" | "alt"> & {
-    chainInfo: ChainInfo;
+    chainInfo: ChainInfo | ModularChainInfo;
     currency: AppCurrency;
 
     size: string;
@@ -167,7 +168,7 @@ export const CurrencyImageFallback: FunctionComponent<
             }
           } else {
             if (
-              chainStore.getChain(chainInfo.chainId).chainIdentifier ===
+              ChainIdHelper.parse(chainInfo.chainId).identifier ===
                 axelarChainIdentifier &&
               currency.coinMinimalDenom !== "uaxl"
             ) {

diff --git a/apps/extension/src/config.ts b/apps/extension/src/config.ts
@@ -1,7 +1,7 @@
 import { Bech32Address } from "@keplr-wallet/cosmos";
-import { ChainInfo } from "@keplr-wallet/types";
+import { ChainInfo, ModularChainInfo } from "@keplr-wallet/types";
 
-export const EmbedChainInfos: ChainInfo[] = [
+export const EmbedChainInfos: (ChainInfo | ModularChainInfo)[] = [
   {
     rpc: "https://rpc-cosmoshub.keplr.app",
     rest: "https://lcd-cosmoshub.keplr.app",
@@ -2414,6 +2414,84 @@ export const EmbedChainInfos: ChainInfo[] = [
     ],
     features: [],
   },
+  {
+    chainId: "starknet:SN_MAIN",
+    chainName: "Starknet",
+    chainSymbolImageUrl:
+      "https://keplr-ext-update-note-images.s3.amazonaws.com/token/starknet.png",
+    starknet: {
+      chainId: "starknet:SN_MAIN",
+      rpc: "https://rpc-starknet.keplr.app",
+      currencies: [
+        {
+          type: "erc20",
+          contractAddress:
+            "0x049d36570d4e46f48e99674bd3fcc84644ddd6b96f7c741b1562b82f9e004dc7",
+          coinDenom: "ETH",
+          coinMinimalDenom:
+            "erc20:0x049d36570d4e46f48e99674bd3fcc84644ddd6b96f7c741b1562b82f9e004dc7",
+          coinDecimals: 18,
+          coinGeckoId: "ethereum",
+          coinImageUrl:
+            "https://raw.githubusercontent.com/chainapsis/keplr-chain-registry/main/images/eip155:1/ethereum-native.png",
+        },
+        {
+          type: "erc20",
+          contractAddress:
+            "0x04718f5a0fc34cc1af16a1cdee98ffb20c31f5cd61d6ab07201858f4287c938d",
+          coinDenom: "STRK",
+          coinMinimalDenom:
+            "erc20:0x04718f5a0fc34cc1af16a1cdee98ffb20c31f5cd61d6ab07201858f4287c938d",
+          coinDecimals: 18,
+          coinGeckoId: "starknet",
+          coinImageUrl:
+            "https://keplr-ext-update-note-images.s3.amazonaws.com/token/starknet.png",
+        },
+      ],
+      ethContractAddress:
+        "0x049d36570d4e46f48e99674bd3fcc84644ddd6b96f7c741b1562b82f9e004dc7",
+      strkContractAddress:
+        "0x04718f5a0fc34cc1af16a1cdee98ffb20c31f5cd61d6ab07201858f4287c938d",
+    },
+  },
+  {
+    chainId: "starknet:SN_SEPOLIA",
+    chainName: "Starknet Sepolia",
+    chainSymbolImageUrl:
+      "https://keplr-ext-update-note-images.s3.amazonaws.com/token/starknet.png",
+    starknet: {
+      chainId: "starknet:SN_SEPOLIA",
+      rpc: "https://rpc-starknet-sepolia.keplr.app",
+      currencies: [
+        {
+          type: "erc20",
+          contractAddress:
+            "0x049d36570d4e46f48e99674bd3fcc84644ddd6b96f7c741b1562b82f9e004dc7",
+          coinDenom: "ETH",
+          coinMinimalDenom:
+            "erc20:0x049d36570d4e46f48e99674bd3fcc84644ddd6b96f7c741b1562b82f9e004dc7",
+          coinDecimals: 18,
+          coinImageUrl:
+            "https://raw.githubusercontent.com/chainapsis/keplr-chain-registry/main/images/eip155:1/ethereum-native.png",
+        },
+        {
+          type: "erc20",
+          contractAddress:
+            "0x04718f5a0fc34cc1af16a1cdee98ffb20c31f5cd61d6ab07201858f4287c938d",
+          coinDenom: "STRK",
+          coinMinimalDenom:
+            "erc20:0x04718f5a0fc34cc1af16a1cdee98ffb20c31f5cd61d6ab07201858f4287c938d",
+          coinDecimals: 18,
+          coinImageUrl:
+            "https://keplr-ext-update-note-images.s3.amazonaws.com/token/starknet.png",
+        },
+      ],
+      ethContractAddress:
+        "0x049d36570d4e46f48e99674bd3fcc84644ddd6b96f7c741b1562b82f9e004dc7",
+      strkContractAddress:
+        "0x04718f5a0fc34cc1af16a1cdee98ffb20c31f5cd61d6ab07201858f4287c938d",
+    },
+  },
 ];
 
 // The origins that are able to pass any permission that external webpages can have.

diff --git a/apps/extension/src/content-scripts/events.ts b/apps/extension/src/content-scripts/events.ts
@@ -51,6 +51,19 @@ export function initEvents(router: Router) {
                 },
               })
             );
+          case "keplr_starknetChainChanged":
+            return window.dispatchEvent(
+              new CustomEvent("keplr_starknetChainChanged", {
+                detail: {
+                  ...(
+                    msg as PushEventDataMsg<{
+                      origin: string;
+                      starknetChainId: string;
+                    }>
+                  ).data.data,
+                },
+              })
+            );
           case "keplr_ethSubscription":
             return window.dispatchEvent(
               new CustomEvent("keplr_ethSubscription", {

diff --git a/apps/extension/src/content-scripts/inject/injected-script.ts b/apps/extension/src/content-scripts/inject/injected-script.ts
@@ -1,18 +1,71 @@
 import { InjectedKeplr } from "@keplr-wallet/provider";
 import { injectKeplrToWindow } from "@keplr-wallet/provider";
+import { RpcProvider, WalletAccount } from "starknet";
 
 import manifest from "../../manifest.v2.json";
 
 const keplr = new InjectedKeplr(
   manifest.version,
   "extension",
-  undefined,
+  (state) => {
+    // XXX: RpcProvider와 Account를 starknetjs에서 바로 가져와서 씀으로 인해서
+    //      injected script의 크기가 커지는 문제가 있다.
+    //      일단 webpack의 tree shaking 덕분에 아직은 어느정도 허용할만한 수준의 용량이다.
+    //      이 코드에 의한 용량 문제에 대해서 고려해서 개발해야한다.
+    if (state.rpc) {
+      if (!keplr.starknet.provider) {
+        keplr.starknet.provider = new RpcProvider({
+          nodeUrl: state.rpc,
+        });
+      } else {
+        keplr.starknet.provider.channel.nodeUrl = state.rpc;
+      }
+    }
+
+    if (keplr.starknet.provider) {
+      if (state.selectedAddress) {
+        if (!keplr.starknet.account) {
+          keplr.starknet.account = new WalletAccount(
+            keplr.starknet.provider,
+            keplr.generateStarknetProvider()
+          );
+          keplr.starknet.account.address = state.selectedAddress;
+        } else {
+          keplr.starknet.account.address = state.selectedAddress;
+        }
+      } else {
+        keplr.starknet.account = undefined;
+      }
+    } else {
+      keplr.starknet.account = undefined;
+    }
+  },
+  (state) => {
+    if (state.selectedAddress) {
+      if (keplr.starknet.account) {
+        keplr.starknet.account.address = state.selectedAddress;
+      }
+    }
+  },
+  {
+    addMessageListener: (fn: (e: any) => void) =>
+      window.addEventListener("message", fn),
+    removeMessageListener: (fn: (e: any) => void) =>
+      window.removeEventListener("message", fn),
+    postMessage: (message) =>
+      window.postMessage(message, window.location.origin),
+  },
   undefined,
   {
     uuid: crypto.randomUUID(),
     name: process.env.KEPLR_EXT_EIP6963_PROVIDER_INFO_NAME,
     icon: process.env.KEPLR_EXT_EIP6963_PROVIDER_INFO_ICON,
     rdns: process.env.KEPLR_EXT_EIP6963_PROVIDER_INFO_RDNS,
+  },
+  {
+    id: "braavos",
+    name: "Braavos",
+    icon: process.env.KEPLR_EXT_STARKNET_PROVIDER_INFO_ICON,
   }
 );
 injectKeplrToWindow(keplr);

diff --git a/apps/extension/src/env.d.ts b/apps/extension/src/env.d.ts
@@ -8,5 +8,8 @@ declare namespace NodeJS {
     KEPLR_EXT_EIP6963_PROVIDER_INFO_NAME: string;
     KEPLR_EXT_EIP6963_PROVIDER_INFO_RDNS: string;
     KEPLR_EXT_EIP6963_PROVIDER_INFO_ICON: string;
+    KEPLR_EXT_STARKNET_PROVIDER_INFO_ID: string;
+    KEPLR_EXT_STARKNET_PROVIDER_INFO_NAME: string;
+    KEPLR_EXT_STARKNET_PROVIDER_INFO_ICON: string;
   }
 }