feat: release v0.3.1

packages/extension/src/languages/en.json

@@ -2,9 +2,13 @@
   "main.account.chart.total-balance": "Total Balance",
   "main.account.chart.available-balance": "Available",
   "main.account.chart.staked-balance": "Staked",
+  "main.account.chart.reward-balance": "Rewards",
   "main.account.button.deposit": "Deposit",
+  "main.account.deposit.paragraph": "Add tokens to your wallet",
   "main.account.button.send": "Send",
   "main.account.tooltip.no-asset": "No token in your account. Deposit some tokens to send.",
+  "main.account.button.buy": "Buy",
+  "main.account.buy.paragraph": "Buy and add native tokens to your wallet",
 
   "main.modal.select-account.title": "Select your account",
   "main.modal.select-account.button.select": "Select Account",

packages/extension/src/languages/ko.json

@@ -2,9 +2,13 @@
   "main.account.chart.total-balance": "총 자산",
   "main.account.chart.available-balance": "전송 가능한 자산",
   "main.account.chart.staked-balance": "스테이킹된 자산",
+  "main.account.chart.reward-balance": "보상",
   "main.account.button.deposit": "입금",
   "main.account.button.send": "보내기",
   "main.account.tooltip.no-asset": "계정에 자산이 없습니다. 자산을 입금해주세요.",
+  "main.account.deposit.paragraph": "지갑에 토큰 추가",
+  "main.account.button.buy": "구입하다",
+  "main.account.buy.paragraph": "지갑에 기본 토큰 구매 및 추가",
 
   "main.modal.select-account.title": "계정을 선택하세요",
   "main.modal.select-account.button.select": "계정 선택",

packages/extension/src/pages/main/asset.module.scss

@@ -96,16 +96,33 @@
 }
 
 .progressDiv {
-  background-color: #11cdef;
+  background-color: #d43bf6;
   border-radius: 2px;
+  position: relative;
 }
 
-.progress {
+.progressAvailable {
   background-color: #5e72e4;
   height: 20px;
   border-radius: 2px;
   transition: 1s ease;
   transition-delay: 0.5s;
+  z-index: 2;
+  position: absolute;
+}
+
+.progressStake {
+  background-color: #11cdef;
+  height: 20px;
+  border-radius: 2px;
+  transition: 1.5s ease;
+  transition-delay: 0.5s;
+  position: static;
+  z-index: 1;
+}
+
+.hr {
+  margin: $main-card-padding 0;
 }
 
 .emptyState {
@@ -121,6 +138,11 @@
     font-size: 20px;
   }
 
+  .buyButton {
+    margin-top: 8px;
+    width: 100%;
+  }
+
   img {
     width: 170px;
     height: 170px;

packages/extension/src/pages/main/asset.tsx

@@ -8,6 +8,7 @@ import styleAsset from "./asset.module.scss";
 import { TxButtonView } from "./tx-button";
 import walletIcon from "../../public/assets/icon/wallet.png";
 import buyIcon from "../../public/assets/icon/buy.png";
+import { DepositView } from "./deposit";
 
 export const ProgressBar = ({
   width,
@@ -16,34 +17,52 @@ export const ProgressBar = ({
   width: number;
   data: number[];
 }) => {
-  const [value, setValue] = useState(0);
+  const [values, setValues] = useState([0, 0]);
 
   useEffect(() => {
-    const total = data[0] + data[1];
-    const percentage = data[0] / total;
-    setValue(percentage * width);
-  }, [width, data[0], data[1]]);
+    const total = data[0] + data[1] + data[2];
+    const percentageAvailable = data[0] / total;
+    const percentageStake = data[1] / total;
+    setValues([percentageAvailable * width, percentageStake * width]);
+  }, [width, data[0], data[1], data[2]]);
 
   return (
     <div>
       <div className={styleAsset.progressDiv} style={{ width }}>
-        <div style={{ width: `${value}px` }} className={styleAsset.progress} />
+        <div
+          style={{ width: `${values[0]}px` }}
+          className={styleAsset.progressAvailable}
+        />
+        <div
+          style={{ width: `${values[0] + values[1]}px` }}
+          className={styleAsset.progressStake}
+        />
       </div>
     </div>
   );
 };
 
-const EmptyState: FunctionComponent = () => {
+const EmptyState = ({ denom, chainId }: { denom: string; chainId: string }) => {
   return (
     <div className={styleAsset.emptyState}>
       <h1 className={styleAsset.title}>No funds added</h1>
       <img src={walletIcon} alt="no fund" />
       <p className={styleAsset.desc}>
         That’s okay, you can deposit tokens to your address or buy some.
       </p>
-      <button>
-        <img src={buyIcon} alt="buy tokens" /> Buy Tokens
-      </button>
+      <button>Deposit {denom}</button>
+      {chainId == "fetchhub-4" && (
+        <a
+          href={"https://indacoin.io/buy-fetch.ai-with-card"}
+          target="_blank"
+          rel="noopener noreferrer"
+          className={styleAsset.buyButton}
+        >
+          <button>
+            <img src={buyIcon} alt="buy tokens" /> Buy Tokens
+          </button>
+        </a>
+      )}
     </div>
   );
 };
@@ -75,12 +94,22 @@ export const AssetView: FunctionComponent = observer(() => {
     .getQueryBech32Address(accountInfo.bech32Address)
     .total.upperCase(true);
 
+  const rewards = queries.cosmos.queryRewards.getQueryBech32Address(
+    accountInfo.bech32Address
+  );
+
+  const stakableReward = rewards.stakableReward;
+
   const stakedSum = delegated.add(unbonding);
 
-  const total = stakable.add(stakedSum);
+  const total = stakable.add(stakedSum).add(stakableReward);
 
   const stakablePrice = priceStore.calculatePrice(stakable, fiatCurrency);
   const stakedSumPrice = priceStore.calculatePrice(stakedSum, fiatCurrency);
+  const stakableRewardPrice = priceStore.calculatePrice(
+    stakableReward,
+    fiatCurrency
+  );
 
   const totalPrice = priceStore.calculatePrice(total, fiatCurrency);
 
@@ -93,14 +122,22 @@ export const AssetView: FunctionComponent = observer(() => {
     stakedSumPrice
       ? parseFloat(stakedSumPrice.toDec().toString())
       : parseFloat(stakedSum.toDec().toString()),
+    stakableRewardPrice
+      ? parseFloat(stakableRewardPrice.toDec().toString())
+      : parseFloat(stakableReward.toDec().toString()),
   ];
 
   const hasBalance = totalPrice
     ? !totalPrice.toDec().isZero()
     : !total.toDec().isZero();
 
   if (!hasBalance) {
-    return <EmptyState />;
+    return (
+      <EmptyState
+        denom={chainStore.current.stakeCurrency.coinDenom}
+        chainId={chainStore.current.chainId}
+      />
+    );
   }
 
   return (
@@ -174,9 +211,25 @@ export const AssetView: FunctionComponent = observer(() => {
               {stakedSum.shrink(true).maxDecimals(6).toString()}
             </div>
           </div>
+          <div className={styleAsset.legend}>
+            <div className={styleAsset.label} style={{ color: "#D43BF6" }}>
+              <FormattedMessage id="main.account.chart.reward-balance" />
+            </div>
+            <div style={{ minWidth: "16px" }} />
+            <div
+              className={styleAsset.value}
+              style={{
+                color: "#525f7f",
+              }}
+            >
+              {stakableReward.shrink(true).maxDecimals(6).toString()}
+            </div>
+          </div>
         </div>
       </div>
       <TxButtonView />
+      <hr className={styleAsset.hr} />
+      <DepositView />
     </React.Fragment>
   );
 });

packages/extension/src/pages/main/deposit.module.scss

@@ -0,0 +1,44 @@
+@import "../../styles/var";
+
+.container-inner {
+  display: flex;
+  flex-direction: row;
+
+  height: 48px;
+  justify-content: center;
+  align-items: center;
+
+  .paragraph-main {
+    line-height: 1.35;
+  }
+
+  .paragraph-sub {
+    line-height: 1.35;
+    color: #8898aa;
+  }
+
+  .vertical {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .button {
+    min-width: 76px;
+    padding: 6px 10px 4px;
+  }
+}
+
+.deposit-modal {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+
+  .qrcode {
+    margin-bottom: 20px;
+  }
+}
+
+.hr {
+  margin: $main-card-padding 0;
+}