fix: apply comments

Author: Ikari-Shinji-re

package.json

@@ -36,10 +36,10 @@
     "dev:queue-manager": "node ./scripts/dev-watch/command.mjs --project @rango-dev/queue-manager-demo",
     "dev:widget:type-checker": "node ./scripts/dev-ts-check/command.mjs --project @rango-dev/widget-app",
     "dev:widget:dev-server": "yarn --cwd ./widget/app/ dev",
-    "dev:widget": "concurrently \"yarn dev:widget:dev-server\" \"yarn dev:widget:type-checker\"",
+    "dev:widget": "npm-run-all --parallel dev:widget:dev-server dev:widget:type-checker",
     "dev:playground:type-checker": "node ./scripts/dev-ts-check/command.mjs --project @rango-dev/widget-playground",
     "dev:playground:dev-server": "yarn --cwd ./widget/playground/ dev",
-    "dev:playground": "concurrently \"yarn dev:playground:dev-server\" \"yarn dev:playground:type-checker\"",
+    "dev:playground": "npm-run-all --parallel dev:playground:dev-server dev:playground:type-checker",
     "lint": "nx run-many --target=lint",
     "format": "nx run-many --target=format",
     "publish": "node ./scripts/publish/command.mjs",
@@ -81,7 +81,6 @@
     "buffer": "^5.5.0",
     "chalk": "^5.2.0",
     "command-line-args": "^5.2.1",
-    "concurrently": "^9.2.0",
     "conventional-changelog-angular": "^5.0.13",
     "conventional-changelog-cli": "^2.2.2",
     "conventional-commits-filter": "^2.0.7",
@@ -104,6 +103,7 @@
     "globals": "^15.14.0",
     "happy-dom": "^14.12.0",
     "lint-staged": "^13.2.2",
+    "npm-run-all": "^4.1.5",
     "nx": "16.2.1",
     "os-browserify": "^0.3.0",
     "parcel": "^2.11.0",

widget/embedded/src/containers/Inputs/SourceInput/SourceInput.tsx

@@ -1,10 +1,10 @@
 import type { PropTypes } from './SourceInput.types';
 
+import { i18n } from '@lingui/core';
 import { Divider, SwapInput } from '@rango-dev/ui';
 import { useWallets } from '@rango-dev/wallets-react';
 import BigNumber from 'bignumber.js';
 import React from 'react';
-import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
 
 import { SwitchFromAndToButton } from '../../../components/SwitchFromAndTo';
@@ -29,11 +29,11 @@ import { FromContainer, swapInputStyles } from './SourceInput.styles';
 export function SourceInput(props: PropTypes) {
   const { onClickToken } = props;
   const {
-    selectedWallets: { source: selectedSourceWallet },
     connectedWallets,
     getBalanceFor,
     fetchStatus: fetchingMetaStatus,
   } = useAppStore();
+  const sourceWallet = useAppStore().sourceWallet();
   const {
     fromToken,
     fromBlockchain,
@@ -43,16 +43,14 @@ export function SourceInput(props: PropTypes) {
     setInputAmount,
     sanitizeInputAmount,
   } = useQuoteStore();
-  const { t } = useTranslation();
   const { getWalletInfo } = useWallets();
   const navigate = useNavigate();
-  const relatedWallet = selectedSourceWallet
+  const relatedWallet = sourceWallet
     ? {
-        ...selectedSourceWallet,
-        image: getWalletInfo(selectedSourceWallet.type).img,
+        ...sourceWallet,
+        image: getWalletInfo(sourceWallet.walletType).img,
       }
-    : null;
-
+    : undefined;
   const fetchingBalance = fromToken
     ? isFetchingBalance(connectedWallets, fromToken.blockchain)
     : false;
@@ -97,7 +95,7 @@ export function SourceInput(props: PropTypes) {
   return (
     <FromContainer>
       <SwapInputLabel
-        label={t('From')}
+        label={i18n.t('From')}
         onClickWallet={onClickWallet}
         relatedWallet={relatedWallet}
       />

widget/embedded/src/containers/Inputs/SwapInputLabel.types.ts

@@ -1,9 +1,7 @@
+import type { ConnectedWallet } from '../../store/slices/wallets';
+
 export type PropTypes = {
   label: string;
   onClickWallet: () => void;
-  relatedWallet: {
-    address: string;
-    type: string;
-    image: string;
-  } | null;
+  relatedWallet?: ConnectedWallet & { image?: string };
 };

widget/embedded/src/hooks/useUpdateSelectedWalelts.ts/useUpdateSelectedWallets.ts

@@ -14,10 +14,9 @@ import { useQuoteStore } from '../../store/quote';
  */
 export function useUpdateSelectedWallets() {
   const { fromToken } = useQuoteStore();
-  const { checkAndUpdateSelectedWalletsIfNeeded, connectedWallets } =
-    useAppStore();
+  const { checkAndUpdateSelectedWalletIfNeeded } = useAppStore();
 
   useEffect(() => {
-    checkAndUpdateSelectedWalletsIfNeeded(connectedWallets);
-  }, [fromToken]);
+    checkAndUpdateSelectedWalletIfNeeded('source');
+  }, [fromToken?.blockchain, fromToken?.address, fromToken?.symbol]);
 }

widget/embedded/src/pages/SourceWalletPage.tsx

@@ -31,7 +31,8 @@ export const ListContainer = styled('div', {
 export function SourceWalletPage() {
   const { t } = useTranslation();
   const { fromBlockchain } = useQuoteStore();
-  const { selectedWallets, setWalletsAsSelected } = useAppStore();
+  const { connectedWallets, setSourceWallet } = useAppStore();
+  const sourceWallet = useAppStore().sourceWallet();
   const navigate = useNavigate();
   const location = useLocation();
   const sourceBlockchain = fromBlockchain?.name;
@@ -50,8 +51,8 @@ export function SourceWalletPage() {
 
   const isSelected = (walletType: string, blockchain: string) => {
     return (
-      selectedWallets.source?.blockchain === blockchain &&
-      selectedWallets.source?.type === walletType
+      sourceWallet?.chain === blockchain &&
+      sourceWallet?.walletType === walletType
     );
   };
 
@@ -76,13 +77,14 @@ export function SourceWalletPage() {
               //
             }}
             selectWallet={(wallet) => {
-              setWalletsAsSelected({
-                source: {
+              setSourceWallet(
+                {
                   address: wallet.address,
                   blockchain: wallet.chain,
                   type: wallet.walletType,
                 },
-              });
+                connectedWallets
+              );
             }}
           />
         </ListContainer>