1  import { Trans } from '@lingui/macro';
  2  import { Box, Divider, FormLabel, Typography } from '@mui/material';
  3  import FormControl from '@mui/material/FormControl';
  4  import MenuItem from '@mui/material/MenuItem';
  5  import Select from '@mui/material/Select';
  6  import * as React from 'react';
  7  import { Reward } from 'src/helpers/types';
  8  
  9  import { FormattedNumber } from '../../primitives/FormattedNumber';
 10  import { TokenIcon } from '../../primitives/TokenIcon';
 11  
 12  export type RewardsSelectProps = {
 13    rewards: Reward[];
 14    setSelectedReward: (key: string) => void;
 15    selectedReward: string;
 16  };
 17  
 18  export const RewardsSelect = ({
 19    rewards,
 20    selectedReward,
 21    setSelectedReward,
 22  }: RewardsSelectProps) => {
 23    return (
 24      <FormControl sx={{ mb: 1, width: '100%' }}>
 25        <FormLabel sx={{ mb: 1, color: 'text.secondary' }}>
 26          <Trans>Reward(s) to claim</Trans>
 27        </FormLabel>
 28  
 29        <Select
 30          value={selectedReward}
 31          onChange={(e) => setSelectedReward(e.target.value)}
 32          sx={{
 33            width: '100%',
 34            height: '44px',
 35            borderRadius: '6px',
 36            borderColor: 'divider',
 37            outline: 'none !important',
 38            color: 'text.primary',
 39            '.MuiOutlinedInput-input': {
 40              backgroundColor: 'transparent',
 41            },
 42            '&:hover .MuiOutlinedInput-notchedOutline, .MuiOutlinedInput-notchedOutline': {
 43              borderColor: 'divider',
 44              outline: 'none !important',
 45              borderWidth: '1px',
 46            },
 47            '&.Mui-focused .MuiOutlinedInput-notchedOutline': {
 48              borderColor: 'divider',
 49              borderWidth: '1px',
 50            },
 51            '.MuiSelect-icon': { color: 'text.primary' },
 52          }}
 53          native={false}
 54          renderValue={(reward) => {
 55            if (reward === 'all') {
 56              return (
 57                <Typography color="text.primary">
 58                  <Trans>Claim all rewards</Trans>
 59                </Typography>
 60              );
 61            }
 62            const selected = rewards.find((r) => r.symbol === reward) as Reward;
 63            return (
 64              <Box sx={{ display: 'flex', alignItems: 'center' }}>
 65                <TokenIcon symbol={selected.symbol} sx={{ mr: 2, fontSize: '16px' }} />
 66                <Typography color="text.primary">{selected.symbol}</Typography>
 67              </Box>
 68            );
 69          }}
 70        >
 71          <MenuItem value={'all'}>
 72            <Typography variant="subheader1">
 73              <Trans>Claim all rewards</Trans>
 74            </Typography>
 75          </MenuItem>
 76          <Divider />
 77          {rewards.map((reward) => (
 78            <MenuItem value={reward.symbol} key={`reward-token-${reward.symbol}`}>
 79              <Box sx={{ display: 'flex', alignItems: 'center' }}>
 80                <TokenIcon symbol={reward.symbol} sx={{ fontSize: '24px', mr: 3 }} />
 81                <Typography variant="subheader1" sx={{ mr: 1 }}>
 82                  {reward.symbol}
 83                </Typography>
 84                <Typography
 85                  component="span"
 86                  sx={{ display: 'inline-flex', alignItems: 'center' }}
 87                  variant="caption"
 88                  color="text.muted"
 89                >
 90                  ~
 91                </Typography>
 92                <FormattedNumber
 93                  value={Number(reward.balanceUsd)}
 94                  variant="caption"
 95                  compact
 96                  symbol="USD"
 97                  symbolsColor="text.muted"
 98                  color="text.muted"
 99                />
100              </Box>
101            </MenuItem>
102          ))}
103        </Select>
104      </FormControl>
105    );
106  };