refactor: utilize alternative text color

PolkaGate · Jan 27, 2025 · 19f1dbf · 19f1dbf
1 parent 0a7409c
commit 19f1dbf
Show file tree

Hide file tree

Showing 35 changed files with 57 additions and 76 deletions.
diff --git a/packages/snap/src/listeners/onInstall.tsx b/packages/snap/src/listeners/onInstall.tsx
@@ -32,21 +32,21 @@ const WelcomeScreen: SnapComponent = () => {
       <Box direction='horizontal' alignment='space-between'>
         <Box direction='vertical' >
           <Heading size='md'>Welcome to Polkadot eco.!</Heading>
-          <Text color='muted'>
+          <Text color='alternative'>
             <Bold>To View the </Bold><Link href="metamask://snap/npm:@polkagate/snap/home">Home</Link> <Bold> Screen:</Bold>
           </Text>
         </Box>
         <Image src={polkadotMedium} />
       </Box>
 
       <Section>
-        <Text>
+        <Text color='alternative'>
           1.	Open MetaMask.
         </Text>
-        <Text>
+        <Text color='alternative'>
           2.	Navigate to the <Bold>Menu</Bold> and select <Bold>Snaps</Bold>.
         </Text>
-        <Text>
+        <Text color='alternative'>
           3.	Click on the <Bold>PolkaGate logo</Bold>.
         </Text>
       </Section>

diff --git a/packages/snap/src/ui/components/ActionRow.tsx b/packages/snap/src/ui/components/ActionRow.tsx
@@ -20,7 +20,7 @@ export const ActionRow: SnapComponent<Props> = ({ label, name, icon, disabled, t
     </Box>
     <Box direction="horizontal" alignment="end" center>
       {!!tag &&
-        <Text color="muted">
+        <Text color="alternative">
           {String(tag)}
         </Text>
       }

diff --git a/packages/snap/src/ui/components/Options.tsx b/packages/snap/src/ui/components/Options.tsx
@@ -40,7 +40,7 @@ export const OptionButton: SnapComponent<OptionProps> = ({ description, form, na
           {text}
         </Text>
         {!!description &&
-          <Text alignment='start' color='muted' size='sm'>
+          <Text alignment='start' color={isSelected ? 'alternative' : 'muted'} size='sm'>
             {description}
           </Text>}
       </Box>

diff --git a/packages/snap/src/ui/components/Row2.tsx b/packages/snap/src/ui/components/Row2.tsx
@@ -19,7 +19,7 @@ type Props = {
  *
  * @returns The Row 2 component.
  */
-export const Row2: SnapComponent<Props> = ({ alignment, label, labelColor = 'muted', extra, extraColor = 'muted', labelSize,valueSize,extraSize, value, valueColor = 'default' }) => (
+export const Row2: SnapComponent<Props> = ({ alignment, label, labelColor = 'muted', extra, extraColor = 'alternative', labelSize,valueSize,extraSize, value, valueColor = 'default' }) => (
   <Box alignment={alignment || "space-between"} direction="horizontal" center>
     <Text color={labelColor} size={labelSize}>
       {label}{alignment === 'start' ? ':' : ''}

diff --git a/packages/snap/src/ui/home/partials/TotalBalance.tsx b/packages/snap/src/ui/home/partials/TotalBalance.tsx
@@ -72,7 +72,7 @@ export const TotalBalance: SnapComponent<Props> = ({ hideBalance, balancesAll, p
           <Tooltip content='Locked balance'>
             <Icon name='lock' color='muted' />
           </Tooltip>
-          <Text alignment='end' color='muted'>
+          <Text alignment='end' color='alternative'>
             {hideBalance
               ? '••••••••'
               : `$${lockedCommified} USD`

diff --git a/packages/snap/src/ui/receive.tsx b/packages/snap/src/ui/receive.tsx
@@ -20,7 +20,7 @@ const ui = (formatted: string, genesisHash: HexString, logo: string, qrCode: str
         label='Receive'
         showHome
       />
-      <Text alignment="start" color='muted'>
+      <Text alignment="start" color='alternative'>
         Select a network to view your address & QR code
       </Text>
       <ChainSwitch genesisHash={genesisHash} logo={logo} />

diff --git a/packages/snap/src/ui/send/reviewSend.tsx b/packages/snap/src/ui/send/reviewSend.tsx
@@ -35,7 +35,7 @@ const ui = (
           <Heading size="lg">
             {`- ${amount} ${token}`}
           </Heading>
-          <Text color="muted">
+          <Text color="alternative">
             ${(Number(amount || 0) * price).toFixed(2)}
           </Text>
         </Box>

diff --git a/packages/snap/src/ui/showSpinner.tsx b/packages/snap/src/ui/showSpinner.tsx
@@ -8,7 +8,7 @@ export const ui = (label?: string, disabled?: boolean) => {
   return (
     <Box direction="vertical" alignment="center" center>
       <Image src={isWorking ? working : clock} />
-      <Text alignment="center" color="muted">
+      <Text alignment="center" color="alternative">
         {label ?? 'Processing, Please Wait!'}
       </Text>
       <Spinner />

diff --git a/packages/snap/src/ui/stake/components/PoolOption.tsx b/packages/snap/src/ui/stake/components/PoolOption.tsx
@@ -37,18 +37,20 @@ export const PoolOption: SnapComponent<Props> = ({
           <Row2
             alignment="start"
             label="Minimum stake"
+            labelColor={isSelected ? 'alternative' : 'muted'}
             labelSize="sm"
             valueSize="sm"
             value={`${minJoinBondInHuman || 1} ${token}`}
-            valueColor="muted"
+            valueColor={isSelected ? 'alternative' : 'muted'}
           />
           <Row2
             alignment="start"
             label="Rewards"
+            labelColor={isSelected ? 'alternative' : 'muted'}
             labelSize="sm"
             valueSize="sm"
             value='Claim manually'
-            valueColor="muted"
+            valueColor={isSelected ? 'alternative' : 'muted'}
           />
         </Box>
         <Box direction="vertical" alignment="start">

diff --git a/packages/snap/src/ui/stake/components/SoloOption.tsx b/packages/snap/src/ui/stake/components/SoloOption.tsx
@@ -34,23 +34,26 @@ export const SoloOption: SnapComponent<Props> = ({
           <Row2
             alignment="start"
             label="Minimum stake"
+            labelColor={isSelected ? 'alternative' : 'muted'}
             labelSize="sm"
             valueSize="sm"
             value={`${minimumActiveStakeInHuman} ${token}`}
-            valueColor="muted"
+            valueColor={isSelected ? 'alternative' : 'muted'}
+
           />
           <Row2
             alignment="start"
             label="Rewards"
+            labelColor={isSelected ? 'alternative' : 'muted'}
             labelSize="sm"
             valueSize="sm"
             value='Paid automatically'
-            valueColor="muted"
+            valueColor={isSelected ? 'alternative' : 'muted'}
           />
           {/* <Text color="muted" size='sm'>
           Reuse tokens in Governance
         </Text> */}
-          <Text color="muted" size="sm">
+          <Text color= {isSelected ? 'alternative' : 'muted'} size="sm">
             Advanced staking management
           </Text>
         </Box>
@@ -72,7 +75,7 @@ export const SoloOption: SnapComponent<Props> = ({
               </Text>
             </Box>
             <Box direction="horizontal" alignment="end" center>
-              <Text color="muted">
+              <Text color="alternative">
                 {String(stakingData?.solo?.validators?.length || 0)}
               </Text>
               <Button name='selectValidators' variant='primary'>

diff --git a/packages/snap/src/ui/stake/components/StakeAndEarn.tsx b/packages/snap/src/ui/stake/components/StakeAndEarn.tsx
@@ -31,7 +31,7 @@ export const StakeAndEarn: SnapComponent<Props> = ({ balancesAll, nonStakedChain
               <Box direction='horizontal' alignment='start' center>
                 <Image src={logo} />
                 <Box direction='vertical' alignment='start'>
-                  <Text>
+                  <Text color='alternative'>
                     <Bold> {toTitleCase(sanitizedChainName) || 'Unknown'}</Bold>
                   </Text>
                   {!!balance?.transferable && !balance.transferable.isZero() &&
@@ -46,7 +46,7 @@ export const StakeAndEarn: SnapComponent<Props> = ({ balancesAll, nonStakedChain
                   <Text color='success' alignment='end'>
                     <Bold>{`+${rate}%`}</Bold>
                   </Text>
-                  <Text color='muted' alignment='end' size='sm'>
+                  <Text color='alternative' alignment='end' size='sm'>
                     per year
                   </Text>
                 </Box>

diff --git a/packages/snap/src/ui/stake/components/StakeForm.tsx b/packages/snap/src/ui/stake/components/StakeForm.tsx
@@ -41,7 +41,7 @@ export const StakeForm: SnapComponent<Props> = ({ amount, decimal, formErrors, l
           </Heading>
         </Box>
         <Input name={name || 'stakeAmount'} type="number" placeholder={placeHolder} value={amount} />
-        <Text color="muted">
+        <Text color="alternative">
           ${(Number(amount || 0) * price).toFixed(2)}
         </Text>
       </Field>

diff --git a/packages/snap/src/ui/stake/components/StakedTokens.tsx b/packages/snap/src/ui/stake/components/StakedTokens.tsx
@@ -37,7 +37,7 @@ const ChainRow: SnapComponent<ChainRowProps> = ({ logo, netStaked, sanitizedChai
     <Box direction='horizontal' alignment='space-between'>
       <Box direction='horizontal' center>
         <Image src={logo || ''} />
-        <Text color='muted'>
+        <Text size='sm' color='alternative'>
           {sanitizedChainName.toUpperCase()}
         </Text>
       </Box>
@@ -48,7 +48,7 @@ const ChainRow: SnapComponent<ChainRowProps> = ({ logo, netStaked, sanitizedChai
         {hasDualStaking &&
           <Box direction='horizontal' alignment='end'>
             <Image src={type === 'Pool' ? poolSmall : soloSmall} />
-            <Text color='muted'>
+            <Text color='alternative'>
               {type.toUpperCase()}
             </Text>
           </Box>
@@ -123,7 +123,7 @@ const RateRow: SnapComponent<RateRowProps> = ({ amount }) => {
         <Text color='success' alignment='end'>
           {`+${amount}%`}
         </Text>
-        <Text color='muted' size='sm'>
+        <Text color='alternative' size='sm'>
           / year
         </Text>
       </Box>

diff --git a/packages/snap/src/ui/stake/components/UnstakeForm.tsx b/packages/snap/src/ui/stake/components/UnstakeForm.tsx
@@ -53,7 +53,7 @@ export const UnstakeForm: SnapComponent<Props> = ({
           </Heading>
         </Box>
         <Input name={name || 'unstakeAmount'} type="number" placeholder={placeHolder || "Enter amount to unstake"} value={amount} />
-        <Text color="muted">
+        <Text color="alternative">
           ${(Number(amount || 0) * price).toFixed(2)}
         </Text>
       </Field>

diff --git a/packages/snap/src/ui/stake/index.tsx b/packages/snap/src/ui/stake/index.tsx
@@ -55,7 +55,7 @@ const ui = (
           <Form name='testNetStaking'>
             <Box direction='horizontal' center>
               <Checkbox name="enableTestnetStaking" checked={isTestNetStakingEnabled} />
-              <Text color='muted'>
+              <Text color={isTestNetStakingEnabled ? 'alternative' : 'muted'}>
                 Show Test Networks
               </Text>
             </Box>

diff --git a/packages/snap/src/ui/stake/pool/claim/claim.tsx b/packages/snap/src/ui/stake/pool/claim/claim.tsx
@@ -35,7 +35,7 @@ const ui = (
           <Heading size="lg">
             {`${amountToHuman(amount, decimal, POOL_CLAIMABLE_DECIMAL, true)} ${token}`}
           </Heading>
-          <Text color="muted">
+          <Text color="alternative">
             ${(Number(amountToHuman(amount, decimal) || 0) * price).toFixed(2)}
           </Text>
         </Box>

diff --git a/packages/snap/src/ui/stake/pool/components/Rewards.tsx b/packages/snap/src/ui/stake/pool/components/Rewards.tsx
@@ -27,7 +27,7 @@ export const Rewards: SnapComponent<Props> = ({ amount, decimal, price, token, c
           <Heading size="md">
             {`${amountToHuman(amount || 0, decimal, 3, true)} ${token}`}
           </Heading>
-          <Text color="muted">
+          <Text color="alternative">
             ${`${(Number(amountToHuman(amount || 0, decimal)) * price).toFixed(2)}`}
           </Text>
         </Box>

diff --git a/packages/snap/src/ui/stake/pool/components/YourStake.tsx b/packages/snap/src/ui/stake/pool/components/YourStake.tsx
@@ -24,7 +24,7 @@ export const YourStake: SnapComponent<Props> = ({ amount, decimal, token, price
         <Heading size="lg">
           {`${amountToHuman(amount, decimal, STAKED_AMOUNT_DECIMAL_POINT, true)} ${token}`}
         </Heading>
-        <Text color="muted">
+        <Text color="alternative">
           ${`${(Number(amountToHuman(amount, decimal)) * price).toFixed(2)}`}
         </Text>
       </Box>

diff --git a/packages/snap/src/ui/stake/pool/redeem/poolRedeem.tsx b/packages/snap/src/ui/stake/pool/redeem/poolRedeem.tsx
@@ -35,7 +35,7 @@ const ui = (
           <Heading size="lg">
             {`${amountToHuman(amount, decimal, 4, true)} ${token}`}
           </Heading>
-          <Text color="muted">
+          <Text color="alternative">
             ${(Number(amountToHuman(amount, decimal) || 0) * price).toFixed(2)}
           </Text>
         </Box>

diff --git a/packages/snap/src/ui/stake/pool/stakeMore/poolStakeMore.tsx b/packages/snap/src/ui/stake/pool/stakeMore/poolStakeMore.tsx
@@ -4,7 +4,6 @@
 import { Box, Container, Footer, Button, Image, Section } from "@metamask/snaps-sdk/jsx";
 import { amountToHuman } from "../../../../util/amountToHuman";
 import { getBalances, getKeyPair } from "../../../../util";
-import { getSnapState } from "../../../../rpc/stateManagement";
 import { StakeForm } from "../../components/StakeForm";
 import { Row2 } from "../../../components/Row2";
 import { StakeFormErrors, StakingPoolContextType } from "../../types";
@@ -82,7 +81,7 @@ export async function poolStakeMore(
   context: StakingPoolContextType,
 ) {
 
-  const { address, amount, claimable, decimal, genesisHash, logos, price, rate, sanitizedChainName, stakingRates, token, transferable } = context;
+  const { address, amount, claimable, decimal, genesisHash, logos, price, token, transferable } = context;
   const _amount = formAmount !== undefined ? String(formAmount) : amount;
 
   const _address = address || (await getKeyPair(undefined, genesisHash)).address;
@@ -99,16 +98,6 @@ export async function poolStakeMore(
     _decimal = balances.decimal;
   }
 
-  let _price = price;
-  let _rate = rate;
-
-  if (_price === undefined || !_rate) {
-    const priceInfo = await getSnapState('priceInfo');
-
-    _price = priceInfo?.prices?.[sanitizedChainName]?.value || 0;
-    _rate = stakingRates?.[sanitizedChainName || ''] || 0;
-  }
-
   const fee = context.fee || await getPoolStakeMore(address, amountToMachine(amount, decimal) || BN_ZERO, genesisHash);
 
   await snap.request({
@@ -122,12 +111,11 @@ export async function poolStakeMore(
         genesisHash,
         fee: String(fee),
         logo: _logo,
-        price: _price!,
         transferable: _transferable!,
-        token: _token!,
+        token: _token,
       },
       id,
-      ui: ui(_amount, claimable, _decimal, formErrors, _logo, _token, _transferable, _price, fee),
+      ui: ui(_amount, claimable, _decimal, formErrors, _logo, _token, _transferable, price, fee),
     },
   });
 }
diff --git a/packages/snap/src/ui/stake/pool/stakeMore/poolStakeMoreReview.tsx b/packages/snap/src/ui/stake/pool/stakeMore/poolStakeMoreReview.tsx
@@ -27,7 +27,7 @@ const ui = (
           <Heading size="lg">
             {`${amount} ${token}`}
           </Heading>
-          <Text color="muted">
+          <Text color="alternative">
             ${(Number(amount || 0) * price).toFixed(2)}
           </Text>
         </Box>

diff --git a/packages/snap/src/ui/stake/pool/unstake/poolUnstakeReview.tsx b/packages/snap/src/ui/stake/pool/unstake/poolUnstakeReview.tsx
@@ -26,7 +26,7 @@ const ui = (
           <Heading size="lg">
             {`${amount} ${token}`}
           </Heading>
-          <Text color="muted">
+          <Text color="alternative">
             ${(Number(amount || 0) * price).toFixed(2)}
           </Text>
         </Box>

diff --git a/packages/snap/src/ui/stake/selectValidators.tsx b/packages/snap/src/ui/stake/selectValidators.tsx
@@ -3,7 +3,7 @@ import { getValidators } from './utils/getValidators';
 import { getValidatorsIdentities, Identities } from './utils/getValidatorIdentities';
 import { StakingInitContextType, ValidatorInfo } from './types';
 import { FlowHeader } from '../components/FlowHeader';
-import { ShowValidator } from './ShowValidator';
+import { ShowValidator } from './solo/components/ShowValidator';
 import { WentWrong } from '../components/WentWrong';
 
 const ui = (

diff --git a/packages/snap/src/ui/stake/solo/components/Rewards.tsx b/packages/snap/src/ui/stake/solo/components/Rewards.tsx
@@ -22,7 +22,7 @@ export const Rewards: SnapComponent<Props> = (({ amount, decimal, price, token }
         <Heading size="md">
           {`${amountToHuman(amount || '0', decimal, 3, true)} ${token}`}
         </Heading>
-        <Text color="muted">
+        <Text color="alternative">
           ${`${(Number(amountToHuman(amount || '0', decimal)) * price).toFixed(2)}`}
         </Text>
       </Box>

diff --git a/packages/snap/src/ui/stake/ShowValidator.tsx → ...i/stake/solo/components/ShowValidator.tsx b/packages/snap/src/ui/stake/ShowValidator.tsx → ...i/stake/solo/components/ShowValidator.tsx
@@ -1,8 +1,8 @@
 import { Box, Text, Tooltip, Icon, Checkbox, Avatar, SnapComponent } from '@metamask/snaps-sdk/jsx';
-import { Identity } from './utils/getValidatorIdentities';
+import { Identity } from '../../utils/getValidatorIdentities';
 import { BN } from '@polkadot/util';
 import type { AccountId } from '@polkadot/types/interfaces';
-import { ellipsis } from './utils/ellipsis';
+import { ellipsis } from '../../utils/ellipsis';
 
 interface Props {
   accountId: AccountId | string;

diff --git a/packages/snap/src/ui/stake/solo/pending_rewards/reviewPayout.tsx b/packages/snap/src/ui/stake/solo/pending_rewards/reviewPayout.tsx
@@ -28,7 +28,7 @@ const ui = (
           <Heading size="lg">
             {`${amountToHuman(selectedAmountToPayout, decimal, SOLO_REDEEMABLE_DECIMAL, true)} ${token}`}
           </Heading>
-          <Text color="muted">
+          <Text color="alternative">
             ${(Number(amountToHuman(selectedAmountToPayout, decimal) || 0) * price).toFixed(2)}
           </Text>
         </Box>

diff --git a/packages/snap/src/ui/stake/solo/redeem/index.tsx b/packages/snap/src/ui/stake/solo/redeem/index.tsx
@@ -35,7 +35,7 @@ const ui = (
           <Heading size="lg">
             {`${amountToHuman(amount, decimal, SOLO_REDEEMABLE_DECIMAL, true)} ${token}`}
           </Heading>
-          <Text color="muted">
+          <Text color="alternative">
             ${(Number(amountToHuman(amount, decimal) || 0) * price).toFixed(2)}
           </Text>
         </Box>

diff --git a/packages/snap/src/ui/stake/solo/rewards/index.tsx b/packages/snap/src/ui/stake/solo/rewards/index.tsx
@@ -28,7 +28,7 @@ const makePayee = (value: string | undefined): Payee | undefined => {
   return undefined;
 }
 
-const ui = (context: StakingSoloContextType, payee: Payee, fee: Balance, maybeNew: Payee | undefined, selectedRewardsDestinationOption: RewardsDestinationOptions) => {
+const ui = (context: StakingSoloContextType, payee: Payee, fee: Balance, maybeNew: Payee | undefined) => {
 
   const { address, genesisHash, decimal, price, token } = context;
 
@@ -106,7 +106,7 @@ export async function rewardsDestination(
         fee: fee,
       },
       id,
-      ui: ui(context, payee, fee, maybeNew, selectedRewardsDestinationOption),
+      ui: ui(context, payee, fee, maybeNew),
     },
   });
 }