const [dataAll, setDataAll] = useLocalStorage('localData', [
    {
        id: '',
        myName: '',
        roninAddress: '',
        manager: '',
        scholar: '',
        data: {
            slp: {
                total: '',
                claimableTotal: '',
                lastClaimedItemA: '',
                todaySoFar: '',
                yesterdaySLP: '',
            },
            leaderboard: {
                winRate: '',
                winTotal: '',
                drawTotal: '',
                loseTotal: '',
                elo: '',
                rank: '',
                name: '',
            },
        },
    },
]);

useEffect(() => {
        async function fetchData() {
            localStorage.setItem('localData', JSON.stringify(dataAll));
        }
        fetchData();
    }, [dataAll]);

{dataAll.map((singleData) => {
                        const id = singleData.id;
                        const myName = singleData.myName;
                        const manager = singleData.manager;
                        const scholar = singleData.scholar;
                        const roninAddress = singleData.roninAddress;
                        const totalSlp = singleData.data.slp.total;
                        const claimableTotal = singleData.data.slp.claimableTotal;
                        const lastClaimedItemAt = singleData.data.slp.lastClaimedItemAt;
                        const todaySoFar = singleData.data.slp.todaySoFar;
                        const yesterdaySLP = singleData.data.slp.yesterdaySLP;
                        // const winRate = singleData.data.leaderboard.winRate;
                        // const winTotal = singleData.data.leaderboard.winTotal;
                        // const drawTotal = singleData.data.leaderboard.drawTotal;
                        // const loseTotal = singleData.data.leaderboard.lostTotal;
                        const elo = singleData.data.leaderboard.elo;
                        const rank = singleData.data.leaderboard.rank;
                        const name = singleData.data.leaderboard.name;

                        const unixTimeStamp = lastClaimedItemAt;
                        const dateTimeFormat = 'MMMM Do, YYYY h:mm ss A';
                        const datetime = usertz.datetime(unixTimeStamp, dateTimeFormat);

                        const newUnixTimeStamp = lastClaimedItemAt   1209600;
                        const newdatetime = usertz.datetime(
                            newUnixTimeStamp,
                            dateTimeFormat
                        );

                        const totalSlpPrice = price * totalSlp;
                        const finaltotalSlpPrice = totalSlpPrice.toFixed(2);
                        return (
                            <Card
                                style={{
                                    width: '22rem',
                                    backgroundColor: '#4f4f4f',
                                    padding: '20px',
                                    marginTop: '30px',
                                    marginRight: '10px',
                                }}
                                key={singleData.id}
                            >
                                <Card.Body>
                                    <Card.Title className="text-center">{name}</Card.Title>
                                    Scholar: <span className="font-weight-bold">{myName}</span>
                                    <p className="address">
                                        {' '}
                                        <img src={ronin} alt="ronin" height="20px"></img>{' '}
                                        {roninAddress}
                                    </p>
                                    <Card.Subtitle className="mb-2 text-muted"></Card.Subtitle>
                                    <Row>
                                        <Card.Text
                                            as={Col}
                                            className="text-center bg-secondary rounded p-2 m-1 d-flex align-items-center justify-content-center"
                                        >
                                            <div>
                                                In-Game SLP
                                                <h2>
                                                    <span style={{ color: '#3cf0cb' }}>{totalSlp}</span>
                                                    <img height="35px" src={slp} alt={slp}></img>
                                                </h2>
                                                <p>USD {finaltotalSlpPrice}</p>
                                            </div>
                                        </Card.Text>
                                        <Card.Text
                                            as={Col}
                                            className="text-center bg-secondary rounded p-2 m-1 d-flex align-items-center justify-content-center"
                                        >
                                            <div>
                                                Claimable SLP
                                                <h2>
                                                    <span style={{ color: '#3cf0cb' }}>
                                                        {claimableTotal}
                                                        <img height="35px" src={slp} alt={slp}></img>
                                                    </span>
                                                </h2>
                                            </div>
                                        </Card.Text>
                                    </Row>
                                    Previos Claim: {datetime}
                                    <br />
                                    Next Claim: {newdatetime}
                                    <Card.Text className="bg-dark p-1">
                                        MMR ⚔️ : {elo}
                                        <br />
                                        Rank