Merge branch 'chainapsis:master' into SN-1.15-support

scrtlabs · Oct 17, 2024 · 20e1021 · 20e1021
2 parents 318c0db + fde3f61
commit 20e1021
Show file tree

Hide file tree

Showing 213 changed files with 16,430 additions and 2,250 deletions.
diff --git a/.github/workflows/publish.yml b/.github/workflows/publish.yml
@@ -7,7 +7,7 @@ on:
 jobs:
   publish:
     name: Publish to npm and create release
-    runs-on: ubuntu-20.04
+    runs-on: ubuntu-20.04-l
     timeout-minutes: 30
     steps:
       - uses: actions/checkout@v3
@@ -55,7 +55,7 @@ jobs:
   check-firefox-archive:
     name: Test that docker can produce the same result for firefox
     needs: [publish]
-    runs-on: ubuntu-20.04
+    runs-on: ubuntu-20.04-l
     timeout-minutes: 30
     steps:
     - uses: actions/checkout@v3

diff --git a/apps/extension/package.json b/apps/extension/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@keplr-wallet/extension",
-  "version": "0.12.130",
+  "version": "0.12.140",
   "author": "chainapsis",
   "license": "Apache-2.0",
   "private": true,
@@ -26,29 +26,31 @@
     "@ethersproject/transactions": "^5.7.0",
     "@floating-ui/react": "^0.23.0",
     "@floating-ui/react-dom": "^1.3.0",
-    "@keplr-wallet/analytics": "0.12.130",
-    "@keplr-wallet/background": "0.12.130",
-    "@keplr-wallet/chain-validator": "0.12.130",
-    "@keplr-wallet/common": "0.12.130",
-    "@keplr-wallet/cosmos": "0.12.130",
-    "@keplr-wallet/crypto": "0.12.130",
-    "@keplr-wallet/hooks": "0.12.130",
-    "@keplr-wallet/hooks-internal": "0.12.130",
-    "@keplr-wallet/ledger-cosmos": "0.12.130",
-    "@keplr-wallet/popup": "0.12.130",
-    "@keplr-wallet/proto-types": "0.12.130",
-    "@keplr-wallet/provider": "0.12.130",
-    "@keplr-wallet/router": "0.12.130",
-    "@keplr-wallet/router-extension": "0.12.130",
-    "@keplr-wallet/simple-fetch": "0.12.130",
-    "@keplr-wallet/stores": "0.12.130",
-    "@keplr-wallet/stores-core": "0.12.130",
-    "@keplr-wallet/stores-etc": "0.12.130",
-    "@keplr-wallet/stores-eth": "0.12.130",
-    "@keplr-wallet/stores-ibc": "0.12.130",
-    "@keplr-wallet/stores-internal": "0.12.130",
-    "@keplr-wallet/types": "0.12.130",
-    "@keplr-wallet/unit": "0.12.130",
+    "@keplr-wallet/analytics": "0.12.140",
+    "@keplr-wallet/background": "0.12.140",
+    "@keplr-wallet/chain-validator": "0.12.140",
+    "@keplr-wallet/common": "0.12.140",
+    "@keplr-wallet/cosmos": "0.12.140",
+    "@keplr-wallet/crypto": "0.12.140",
+    "@keplr-wallet/hooks": "0.12.140",
+    "@keplr-wallet/hooks-internal": "0.12.140",
+    "@keplr-wallet/hooks-starknet": "0.12.140",
+    "@keplr-wallet/ledger-cosmos": "0.12.140",
+    "@keplr-wallet/popup": "0.12.140",
+    "@keplr-wallet/proto-types": "0.12.140",
+    "@keplr-wallet/provider": "0.12.140",
+    "@keplr-wallet/router": "0.12.140",
+    "@keplr-wallet/router-extension": "0.12.140",
+    "@keplr-wallet/simple-fetch": "0.12.140",
+    "@keplr-wallet/stores": "0.12.140",
+    "@keplr-wallet/stores-core": "0.12.140",
+    "@keplr-wallet/stores-etc": "0.12.140",
+    "@keplr-wallet/stores-eth": "0.12.140",
+    "@keplr-wallet/stores-ibc": "0.12.140",
+    "@keplr-wallet/stores-internal": "0.12.140",
+    "@keplr-wallet/stores-starknet": "0.12.140",
+    "@keplr-wallet/types": "0.12.140",
+    "@keplr-wallet/unit": "0.12.140",
     "@keystonehq/animated-qr": "^0.8.6",
     "@keystonehq/keystone-sdk": "^0.2.3",
     "@ledgerhq/devices": "^6.20.0",
@@ -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/bottom-tabs.tsx b/apps/extension/src/bottom-tabs.tsx
@@ -75,6 +75,8 @@ export const BottomTabsRouteProvider: FunctionComponent<
             flexDirection: "row",
             alignItems: "center",
             justifyContent: "space-evenly",
+
+            zIndex: 999999,
           }}
         >
           {tabs.map((tab, i) => {

diff --git a/apps/extension/src/components/collapsible-list/collapsible-list.tsx b/apps/extension/src/components/collapsible-list/collapsible-list.tsx
@@ -37,6 +37,8 @@ export const CollapsibleList: FunctionComponent<CollapsibleListProps> = ({
   lenAlwaysShown,
   hideNumInTitle,
   notRenderHiddenItems,
+  altViewMoreIntlTextId,
+  onCollapse,
 }) => {
   if (!lenAlwaysShown || lenAlwaysShown < 0) {
     lenAlwaysShown = items.length;
@@ -106,6 +108,9 @@ export const CollapsibleList: FunctionComponent<CollapsibleListProps> = ({
             e.preventDefault();
 
             setIsCollapsed(!isCollapsed);
+            if (onCollapse) {
+              onCollapse(!isCollapsed);
+            }
             if (!isCollapsed) {
               setNotRenderHiddenItemsIsClosing(true);
             }
@@ -116,7 +121,11 @@ export const CollapsibleList: FunctionComponent<CollapsibleListProps> = ({
             <Button2>
               {isCollapsed
                 ? intl.formatMessage(
-                    { id: "components.collapsible-list.view-more-tokens" },
+                    {
+                      id:
+                        altViewMoreIntlTextId ||
+                        "components.collapsible-list.view-more-tokens",
+                    },
                     { remain: hidden.length }
                   )
                 : intl.formatMessage({

diff --git a/apps/extension/src/components/collapsible-list/types.ts b/apps/extension/src/components/collapsible-list/types.ts
@@ -12,4 +12,8 @@ export interface CollapsibleListProps {
   // 이걸 키면 리스트가 길때 성능이 조금 더 좋아진다.
   // 하지만 부작용으로 펼칠때는 트랜지션없이 즉각적으로 펼쳐진다.
   notRenderHiddenItems?: boolean;
+
+  altViewMoreIntlTextId?: string;
+
+  onCollapse?: (isCollapsed: boolean) => void;
 }
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"
             ) {