7.2.0 (#114)

* Suggest network UI * Settings for custom chains * Cleanup test env * cleanup * fix scrolling * fix card scrolling * add custom sign mode on sign and post * St 347 kado multichain fiat integration (#111) * feat: extension kado fiat ramp --------- Co-authored-by: Joshua Brigati <[email protected]> Co-authored-by: Alessandro Candeago <[email protected]> Co-authored-by: Mike <[email protected]>
stationmoney · Apr 11, 2023 · 4ef44f1 · 4ef44f1
1 parent e82091b
commit 4ef44f1
Show file tree

Hide file tree

Showing 15 changed files with 140 additions and 66 deletions.
diff --git a/src/components/feedback/Modal.module.scss b/src/components/feedback/Modal.module.scss
@@ -33,6 +33,11 @@
     padding: 48px 20px;
     width: calc(100% - 40px);
   }
+
+  &.minimal {
+    width: fit-content !important;
+    padding: 0 !important;
+  }
 }
 
 .close {

diff --git a/src/config/constants.ts b/src/config/constants.ts
@@ -21,10 +21,13 @@ export const SETUP = "https://setup-station.terra.money/"
 export const MARS_TEST_EXPLORER = "https://testnet-explorer.marsprotocol.io"
 export const MARS_EXPLORER = "https://explorer.marsprotocol.io"
 
+/* website: fiat ramp */
+export const FIAT_RAMP = "https://app.kado.money/"
+export const KADO_API_KEY = "c22391a1-594f-4354-a742-187adb1b91bf"
+
 /* website: stake */
 export const TERRA_VALIDATORS =
   "https://github.com/terra-money/validator-profiles/tree/master/validators/"
-
 export const STAKE_ID = "https://stake.id/#/validator/"
 
 /* ledger */

diff --git a/src/extension/RequestContainer.tsx b/src/extension/RequestContainer.tsx
@@ -75,12 +75,14 @@ const RequestContainer = ({ children }: PropsWithChildren<{}>) => {
             ...parseDefault(postRequest),
             tx: parseTx(postRequest),
             requestType: "post",
+            signMode: postRequest.signMode,
           })
         } else if (signRequest) {
           setTx({
             ...parseDefault(signRequest),
             tx: parseTx(signRequest),
             requestType: "sign",
+            signMode: signRequest.signMode,
           })
         } else if (bytesRequest) {
           setTx({

diff --git a/src/extension/modules/ConfirmNewChain.module.scss b/src/extension/modules/ConfirmNewChain.module.scss
@@ -18,7 +18,6 @@
 .chain__card {
   margin-top: 1rem;
   margin-bottom: 2.4rem;
-
   .header {
     @include flex(space-between);
     padding: var(--card-padding);

diff --git a/src/extension/modules/ConfirmTx.tsx b/src/extension/modules/ConfirmTx.tsx
@@ -66,7 +66,7 @@ const ConfirmTx = (props: TxRequest | SignBytesRequest) => {
     setSubmitting(true)
 
     if ("tx" in props) {
-      const { requestType, tx } = props
+      const { requestType, tx, signMode } = props
       const txOptions = tx
 
       try {
@@ -80,7 +80,7 @@ const ConfirmTx = (props: TxRequest | SignBytesRequest) => {
           if (openURL) openURL()
           else navigate({ pathname, search })
         } else {
-          const result = await auth[requestType](txOptions, password)
+          const result = await auth[requestType](txOptions, password, signMode)
           const response = { result, success: true }
           actions.tx(requestType, props, response, nextPassword)
         }

diff --git a/src/extension/modules/Front.tsx b/src/extension/modules/Front.tsx
@@ -38,7 +38,6 @@ const Front = () => {
   if (chain) {
     return <ConfirmNewChain {...chain} />
   }
-
   if (tx) {
     return <ConfirmTx {...tx} />
   }

diff --git a/src/extension/utils.ts b/src/extension/utils.ts
@@ -1,5 +1,11 @@
 import { useCallback } from "react"
-import { CreateTxOptions, Fee, Msg, Tx } from "@terra-money/feather.js"
+import {
+  CreateTxOptions,
+  Fee,
+  Msg,
+  SignatureV2,
+  Tx,
+} from "@terra-money/feather.js"
 import { useChainID, useNetwork } from "data/wallet"
 import { isNil } from "ramda"
 import extension from "extensionizer"
@@ -48,6 +54,7 @@ export interface PrimitiveTxRequest
   chainID?: string
   fee?: string
   memo?: string
+  signMode?: SignatureV2.SignMode
 }
 
 export interface PrimitiveSignBytesRequest
@@ -78,6 +85,7 @@ export type RequestType = "sign" | "post" | "signBytes"
 export interface TxRequest extends DefaultRequest {
   tx: CreateTxOptions
   requestType: "sign" | "post"
+  signMode?: SignatureV2.SignMode
 }
 
 export interface SignBytesRequest extends DefaultRequest {

diff --git a/src/pages/wallet/Asset.tsx b/src/pages/wallet/Asset.tsx
@@ -40,7 +40,7 @@ const Asset = (props: Props) => {
       className={styles.asset}
       key={token}
       onClick={() =>
-        setRoute({ path: Path.coin, denom: token, previusPage: route })
+        setRoute({ path: Path.coin, denom: token, previousPage: route })
       }
     >
       <section className={styles.details}>

diff --git a/src/pages/wallet/AssetList.module.scss b/src/pages/wallet/AssetList.module.scss
@@ -2,9 +2,9 @@
 
 .assetlist {
   background-color: var(--card-bg-muted);
-  padding-top: 1.6rem;
   padding-inline: 10px;
   grid-area: list;
+
   display: grid;
   grid-template-areas: "title" "list";
   grid-template-rows: min-content auto;
@@ -14,7 +14,7 @@
 .assetlist__title {
   @include flex(space-between);
   padding-inline: 10px;
-  margin-bottom: 10px;
+  margin: 10px;
   grid-area: title;
 }
 
@@ -23,11 +23,3 @@
   grid-area: list;
   padding-bottom: 1.6rem;
 }
-
-.assetlist__add {
-  padding: 0.6rem 0.4rem;
-  width: 100%;
-  button {
-    width: 100%;
-  }
-}
diff --git a/src/pages/wallet/AssetList.tsx b/src/pages/wallet/AssetList.tsx
@@ -1,5 +1,5 @@
 import { FormError } from "components/form"
-import { Button } from "components/general"
+import { InternalButton } from "components/general"
 import { useBankBalance, useIsWalletEmpty } from "data/queries/bank"
 import { useExchangeRates } from "data/queries/coingecko"
 import { useNativeDenoms } from "data/token"
@@ -8,7 +8,6 @@ import { useTranslation } from "react-i18next"
 import ManageTokens from "./ManageTokens"
 import Asset from "./Asset"
 import styles from "./AssetList.module.scss"
-import AddIcon from "@mui/icons-material/Add"
 import { useTokenFilters } from "utils/localStorage"
 import { toInput } from "txs/utils"
 import {
@@ -113,18 +112,13 @@ const AssetList = () => {
     <article className={styles.assetlist}>
       <div className={styles.assetlist__title}>
         <h3>Assets</h3>
-      </div>
-      <div className={styles.assetlist__list}>{render()}</div>
-      <div className={styles.assetlist__add}>
         <ManageTokens>
           {(open) => (
-            <Button onClick={open}>
-              <AddIcon />
-              {t("Manage tokens")}
-            </Button>
+            <InternalButton onClick={open}>{t("Manage tokens")}</InternalButton>
           )}
         </ManageTokens>
       </div>
+      <div className={styles.assetlist__list}>{render()}</div>
     </article>
   )
 }

diff --git a/src/pages/wallet/AssetPage.module.scss b/src/pages/wallet/AssetPage.module.scss
@@ -3,9 +3,9 @@
 .details {
   @include flex(center);
   flex-direction: column;
+  width: 100%;
 
-  padding: 1.8rem 1rem;
-  padding-top: 2.6rem;
+  padding: 1.6rem;
   height: fit-content;
   background-color: var(--card-bg);
   grid-area: details;
@@ -48,8 +48,9 @@
 .actions {
   @include flex(space-between);
   background-color: var(--card-bg);
-  padding: 1rem;
+  padding-top: 0.6rem;
   gap: 0.6rem;
+  width: 100%;
 
   button {
     min-width: 0;

diff --git a/src/pages/wallet/AssetPage.tsx b/src/pages/wallet/AssetPage.tsx
@@ -75,7 +75,7 @@ const AssetPage = () => {
             setRoute({
               path: Path.send,
               denom,
-              previusPage: route,
+              previousPage: route,
             })
           }
         >
@@ -85,7 +85,7 @@ const AssetPage = () => {
           onClick={() =>
             setRoute({
               path: Path.receive,
-              previusPage: route,
+              previousPage: route,
             })
           }
         >

diff --git a/src/pages/wallet/NetWorth.module.scss b/src/pages/wallet/NetWorth.module.scss
@@ -1,32 +1,55 @@
+@import "mixins";
+
 .networth {
+  @include flex-column;
   padding: 1.6rem;
   border-bottom: var(--border-width) solid var(--card-border);
 
   p {
     color: var(--text-muted);
+    font-size: 14px;
+    line-height: 140%;
   }
 
   h1 {
-    font-weight: 600;
-    font-size: 22pt;
+    font-size: 32px;
+    line-height: 150%;
+    margin-top: 4px;
   }
 
   grid-area: details;
   height: fit-content;
   background-color: var(--card-bg);
 }
-
 .networth__buttons {
   display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 10px;
-  margin-top: 20px;
+  gap: 48px;
+  justify-content: center;
+  margin-top: 28px;
+  width: 100%;
+
+  .button__wrapper {
+    @include flex-column;
+    gap: 8px;
+  }
 
   button {
     min-width: 0;
-    width: 100%;
-    padding-block: 20px;
-    height: fit-content;
+    border-radius: 50%;
+    width: 60px;
+    height: 60px;
+    padding: 16px;
+    @include flex;
+  }
+}
+
+.icon {
+  font-size: 24px;
+
+  &.send {
+    transform: rotate(-90deg);
+  }
+  &.receive {
+    transform: rotate(90deg);
   }
 }