landing page cards show 24h prices from API

This commit is contained in:
Maximilian Schneider 2021-07-17 14:53:44 +02:00
parent 12fb89b7e4
commit ab301ddefb
6 changed files with 629 additions and 248 deletions

View File

@ -19,8 +19,8 @@ const CommunitySection = () => {
and contribute.{' '}
</p>
<div className="flex flex-row justify-center">
<Button>Joine the discord</Button>
<Link>Explore the docs</Link>
<Button>Joine the discord</Button>
<Link>Explore the docs</Link>
</div>
</div>
</div>
@ -29,165 +29,281 @@ const CommunitySection = () => {
<div className="max-w-7xl mx-auto">
<div className="grid grid-cols-2 gap-8 md:grid-cols-6 lg:grid-cols-4">
<div className="col-span-1 flex md:col-span-2 lg:col-span-1">
<div className="flex flex-col bg-th-fgd-4 py-8 px-8 h-auto w-auto shadow-md rounded-xl">
<svg
width="31"
height="31"
viewBox="0 0 31 31"
fill="none"
xmlns="http://www.w3.org/2000/svg">
<path d="M15.5 2.90625C15.5 1.30117 16.8012 0 18.4062 0C20.0113 0 21.3125 1.30117 21.3125 2.90625V3.875C21.3125 4.94505 22.1799 5.8125 23.25 5.8125H29.0625C30.1326 5.8125 31 6.67995 31 7.75V13.5625C31 14.6326 30.1326 15.5 29.0625 15.5H28.0938C26.4887 15.5 25.1875 16.8012 25.1875 18.4062C25.1875 20.0113 26.4887 21.3125 28.0938 21.3125H29.0625C30.1326 21.3125 31 22.1799 31 23.25V29.0625C31 30.1326 30.1326 31 29.0625 31H23.25C22.1799 31 21.3125 30.1326 21.3125 29.0625V28.0938C21.3125 26.4887 20.0113 25.1875 18.4062 25.1875C16.8012 25.1875 15.5 26.4887 15.5 28.0938V29.0625C15.5 30.1326 14.6326 31 13.5625 31H7.75C6.67995 31 5.8125 30.1326 5.8125 29.0625V23.25C5.8125 22.1799 4.94505 21.3125 3.875 21.3125H2.90625C1.30117 21.3125 0 20.0113 0 18.4062C0 16.8012 1.30117 15.5 2.90625 15.5H3.875C4.94505 15.5 5.8125 14.6326 5.8125 13.5625V7.75C5.8125 6.67995 6.67995 5.8125 7.75 5.8125H13.5625C14.6326 5.8125 15.5 4.94505 15.5 3.875V2.90625Z"
<svg
width="31"
height="31"
viewBox="0 0 31 31"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M15.5 2.90625C15.5 1.30117 16.8012 0 18.4062 0C20.0113 0 21.3125 1.30117 21.3125 2.90625V3.875C21.3125 4.94505 22.1799 5.8125 23.25 5.8125H29.0625C30.1326 5.8125 31 6.67995 31 7.75V13.5625C31 14.6326 30.1326 15.5 29.0625 15.5H28.0938C26.4887 15.5 25.1875 16.8012 25.1875 18.4062C25.1875 20.0113 26.4887 21.3125 28.0938 21.3125H29.0625C30.1326 21.3125 31 22.1799 31 23.25V29.0625C31 30.1326 30.1326 31 29.0625 31H23.25C22.1799 31 21.3125 30.1326 21.3125 29.0625V28.0938C21.3125 26.4887 20.0113 25.1875 18.4062 25.1875C16.8012 25.1875 15.5 26.4887 15.5 28.0938V29.0625C15.5 30.1326 14.6326 31 13.5625 31H7.75C6.67995 31 5.8125 30.1326 5.8125 29.0625V23.25C5.8125 22.1799 4.94505 21.3125 3.875 21.3125H2.90625C1.30117 21.3125 0 20.0113 0 18.4062C0 16.8012 1.30117 15.5 2.90625 15.5H3.875C4.94505 15.5 5.8125 14.6326 5.8125 13.5625V7.75C5.8125 6.67995 6.67995 5.8125 7.75 5.8125H13.5625C14.6326 5.8125 15.5 4.94505 15.5 3.875V2.90625Z"
fill="url(#paint0_linear)"
/>
<defs>
<linearGradient id="paint0_linear" x1="-15.5" y1="-5.8125" x2="53.2813" y2="31" gradientUnits="userSpaceOnUse">
<stop stopColor="#E54033"/>
<stop offset="0.520833" stopColor="#FECA1A"/>
<stop offset="1" stopColor="#AFD803"/>
</linearGradient>
</defs>
</svg>
<p className="text-lg font-bold py-6 pb-2">Open by default</p>
<div className="flex flex-col">
<p className="text-md text-gray-500 pb-2">All pieces of the mango protocol puzzle are completely open source. Run it, mod it, improve it, we are a community driven organization.</p>
<LinkLeft>Find us on github</LinkLeft>
</div>
</div>
/>
<defs>
<linearGradient
id="paint0_linear"
x1="-15.5"
y1="-5.8125"
x2="53.2813"
y2="31"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#E54033" />
<stop offset="0.520833" stopColor="#FECA1A" />
<stop offset="1" stopColor="#AFD803" />
</linearGradient>
</defs>
</svg>
<p className="text-lg font-bold py-6 pb-2">
Open by default
</p>
<div className="flex flex-col">
<p className="text-md text-gray-500 pb-2">
All pieces of the mango protocol puzzle are completely
open source. Run it, mod it, improve it, we are a
community driven organization.
</p>
<LinkLeft>Find us on github</LinkLeft>
</div>
</div>
</div>
<div className="col-span-1 flex justify-center md:col-span-2 lg:col-span-1">
<div className="flex flex-col bg-th-fgd-4 py-8 px-8 h-auto w-auto shadow-md rounded-xl">
<svg
width="31"
height="32"
viewBox="0 0 31 32"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path fill-rule="evenodd" clip-rule="evenodd" d="M0.321833 5.96983C6.15035 5.89006 11.4609 3.6468 15.5 0C19.5391 3.6468 24.8497 5.89006 30.6782 5.96983C30.8898 7.24175 31 8.54838 31 9.88098C31 20.0928 24.5302 28.7803 15.5 32C6.46976 28.7803 0 20.0928 0 9.88098C0 8.54838 0.110173 7.24175 0.321833 5.96983ZM22.6825 13.2174C23.4392 12.4541 23.4392 11.2166 22.6825 10.4534C21.9259 9.6901 20.6991 9.6901 19.9425 10.4534L13.5625 16.8892L11.0575 14.3623C10.3009 13.599 9.07412 13.599 8.31748 14.3623C7.56084 15.1256 7.56084 16.3631 8.31748 17.1263L12.1925 21.0353C12.9491 21.7986 14.1759 21.7986 14.9325 21.0353L22.6825 13.2174Z"
fill="url(#paint0_linear)"/>
<defs>
<linearGradient id="paint0_linear" x1="-46.5" y1="-11.7268" x2="31.4001" y2="38.4685" gradientUnits="userSpaceOnUse">
<stop stop-color="#E54033"/>
<stop offset="0.520833" stop-color="#FECA1A"/>
<stop offset="1" stop-color="#AFD803"/>
</linearGradient>
</defs>
</svg>
<p className="text-lg font-bold py-6 pb-2">Liquidator Program</p>
<div className="flex flex-col">
<p className="text-md text-gray-500 pb-2">Liquidators are an important part in a trading ecosystem, help ensure the protocol funds stay safe even when borrowers default.</p>
<LinkLeft>Become a liquidator</LinkLeft>
</div>
</div>
<svg
width="31"
height="32"
viewBox="0 0 31 32"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M0.321833 5.96983C6.15035 5.89006 11.4609 3.6468 15.5 0C19.5391 3.6468 24.8497 5.89006 30.6782 5.96983C30.8898 7.24175 31 8.54838 31 9.88098C31 20.0928 24.5302 28.7803 15.5 32C6.46976 28.7803 0 20.0928 0 9.88098C0 8.54838 0.110173 7.24175 0.321833 5.96983ZM22.6825 13.2174C23.4392 12.4541 23.4392 11.2166 22.6825 10.4534C21.9259 9.6901 20.6991 9.6901 19.9425 10.4534L13.5625 16.8892L11.0575 14.3623C10.3009 13.599 9.07412 13.599 8.31748 14.3623C7.56084 15.1256 7.56084 16.3631 8.31748 17.1263L12.1925 21.0353C12.9491 21.7986 14.1759 21.7986 14.9325 21.0353L22.6825 13.2174Z"
fill="url(#paint0_linear)"
/>
<defs>
<linearGradient
id="paint0_linear"
x1="-46.5"
y1="-11.7268"
x2="31.4001"
y2="38.4685"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#E54033" />
<stop offset="0.520833" stopColor="#FECA1A" />
<stop offset="1" stopColor="#AFD803" />
</linearGradient>
</defs>
</svg>
<p className="text-lg font-bold py-6 pb-2">
Liquidator Program
</p>
<div className="flex flex-col">
<p className="text-md text-gray-500 pb-2">
Liquidators are an important part in a trading
ecosystem, help ensure the protocol funds stay safe even
when borrowers default.
</p>
<LinkLeft>Become a liquidator</LinkLeft>
</div>
</div>
</div>
<div className="col-span-1 flex justify-center md:col-span-2 lg:col-span-1">
<div className="flex flex-col bg-th-fgd-4 py-8 px-8 h-auto w-auto shadow-md rounded-xl">
<svg
width="32"
height="32"
viewBox="0 0 32 32"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M16 0C17.1045 0 17.9999 0.89543 17.9999 2V4.64593L25.9086 7.80949L29.1052 6.21115C30.0931 5.71717 31.2945 6.11762 31.7884 7.10557C32.2824 8.09353 31.8819 9.29488 30.894 9.78885L28.4278 11.022L31.904 21.8614C32.1451 22.613 31.9215 23.436 31.3334 23.9624C29.9194 25.228 28.0473 26 25.9997 26C23.9521 26 22.08 25.228 20.666 23.9624C20.0779 23.436 19.8544 22.613 20.0954 21.8614L23.526 11.1645L17.9999 8.95407V28H21.9998C23.1044 28 23.9998 28.8954 23.9998 30C23.9998 31.1046 23.1044 32 21.9998 32H10.0002C8.89562 32 8.00022 31.1046 8.00022 30C8.00022 28.8954 8.89562 28 10.0002 28H14.0001V8.95407L8.47403 11.1645L11.9046 21.8614C12.1456 22.613 11.9221 23.436 11.334 23.9624C9.91997 25.228 8.04788 26 6.00027 26C3.95267 26 2.08058 25.228 0.666592 23.9624C0.0784726 23.436 -0.145058 22.613 0.0959823 21.8614L3.57223 11.022L1.10598 9.78885C0.118051 9.29488 -0.282387 8.09353 0.211578 7.10557C0.705543 6.11762 1.90686 5.71717 2.89479 6.21115L6.09139 7.80949L14.0001 4.64593V2C14.0001 0.89543 14.8955 0 16 0ZM6.00027 16.549L4.36384 21.6515C4.863 21.8757 5.41635 22 6.00027 22C6.5842 22 7.13755 21.8757 7.6367 21.6515L6.00027 16.549ZM25.9997 16.549L24.3633 21.6515C24.8624 21.8757 25.4158 22 25.9997 22C26.5837 22 27.137 21.8757 27.6362 21.6515L25.9997 16.549Z"
fill="url(#paint0_linear)"
/>
<defs>
<linearGradient
id="paint0_linear"
x1="-19.5"
y1="-1.3609e-06"
x2="85.5"
y2="70"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#E54033" />
<stop offset="0.505208" stopColor="#FECA1A" />
<stop
offset="1"
stopColor="#111827"
stopOpacity="0"
/>
<stop offset="1" stopColor="#AFD803" />
</linearGradient>
</defs>
</svg>
<div className="flex flex-col bg-th-fgd-4 py-8 px-8 h-auto w-auto shadow-md rounded-xl">
<svg
width="32"
height="32"
viewBox="0 0 32 32"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path fill-rule="evenodd" clip-rule="evenodd" d="M16 0C17.1045 0 17.9999 0.89543 17.9999 2V4.64593L25.9086 7.80949L29.1052 6.21115C30.0931 5.71717 31.2945 6.11762 31.7884 7.10557C32.2824 8.09353 31.8819 9.29488 30.894 9.78885L28.4278 11.022L31.904 21.8614C32.1451 22.613 31.9215 23.436 31.3334 23.9624C29.9194 25.228 28.0473 26 25.9997 26C23.9521 26 22.08 25.228 20.666 23.9624C20.0779 23.436 19.8544 22.613 20.0954 21.8614L23.526 11.1645L17.9999 8.95407V28H21.9998C23.1044 28 23.9998 28.8954 23.9998 30C23.9998 31.1046 23.1044 32 21.9998 32H10.0002C8.89562 32 8.00022 31.1046 8.00022 30C8.00022 28.8954 8.89562 28 10.0002 28H14.0001V8.95407L8.47403 11.1645L11.9046 21.8614C12.1456 22.613 11.9221 23.436 11.334 23.9624C9.91997 25.228 8.04788 26 6.00027 26C3.95267 26 2.08058 25.228 0.666592 23.9624C0.0784726 23.436 -0.145058 22.613 0.0959823 21.8614L3.57223 11.022L1.10598 9.78885C0.118051 9.29488 -0.282387 8.09353 0.211578 7.10557C0.705543 6.11762 1.90686 5.71717 2.89479 6.21115L6.09139 7.80949L14.0001 4.64593V2C14.0001 0.89543 14.8955 0 16 0ZM6.00027 16.549L4.36384 21.6515C4.863 21.8757 5.41635 22 6.00027 22C6.5842 22 7.13755 21.8757 7.6367 21.6515L6.00027 16.549ZM25.9997 16.549L24.3633 21.6515C24.8624 21.8757 25.4158 22 25.9997 22C26.5837 22 27.137 21.8757 27.6362 21.6515L25.9997 16.549Z" fill="url(#paint0_linear)"/>
<defs>
<linearGradient id="paint0_linear" x1="-19.5" y1="-1.3609e-06" x2="85.5" y2="70" gradientUnits="userSpaceOnUse">
<stop stop-color="#E54033"/>
<stop offset="0.505208" stop-color="#FECA1A"/>
<stop offset="1" stop-color="#111827" stop-opacity="0"/>
<stop offset="1" stop-color="#AFD803"/>
</linearGradient>
</defs>
</svg>
<p className="text-lg font-bold py-6 pb-2">Market Making</p>
<div className="flex flex-col">
<p className="text-md text-gray-500 pb-2">Learn about market making on the mango protocol and earn $MNGO in return for providing liquidaty and stability to the mango markets.</p>
<LinkLeft>Become a market maker</LinkLeft>
</div>
</div>
<p className="text-lg font-bold py-6 pb-2">Market Making</p>
<div className="flex flex-col">
<p className="text-md text-gray-500 pb-2">
Learn about market making on the mango protocol and earn
$MNGO in return for providing liquidaty and stability to
the mango markets.
</p>
<LinkLeft>Become a market maker</LinkLeft>
</div>
</div>
</div>
<div className="col-span-1 flex justify-center md:col-span-2 lg:col-span-1">
<div className="flex flex-col bg-th-fgd-4 py-8 px-8 h-auto w-auto shadow-md rounded-xl">
<svg
width="32"
height="32"
viewBox="0 0 32 32"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M18 2C18 0.895431 17.1046 0 16 0C14.8954 0 14 0.895431 14 2V4C14 5.10457 14.8954 6 16 6C17.1046 6 18 5.10457 18 4V2Z"
fill="url(#paint0_linear)"
/>
<path
d="M27.3136 7.51461C28.0947 6.73356 28.0947 5.46723 27.3136 4.68619C26.5326 3.90514 25.2662 3.90514 24.4852 4.68619L23.071 6.1004C22.2899 6.88145 22.2899 8.14778 23.071 8.92883C23.852 9.70988 25.1184 9.70988 25.8994 8.92883L27.3136 7.51461Z"
fill="url(#paint1_linear)"
/>
<path
d="M32 16C32 17.1046 31.1046 18 30 18H28C26.8954 18 26 17.1046 26 16C26 14.8954 26.8954 14 28 14H30C31.1046 14 32 14.8954 32 16Z"
fill="url(#paint2_linear)"
/>
<path
d="M6.10038 8.92886C6.88143 9.70991 8.14776 9.70991 8.9288 8.92886C9.70985 8.14781 9.70985 6.88148 8.9288 6.10044L7.51459 4.68622C6.73354 3.90517 5.46721 3.90517 4.68616 4.68622C3.90511 5.46727 3.90512 6.7336 4.68616 7.51465L6.10038 8.92886Z"
fill="url(#paint3_linear)"
/>
<path
d="M6 16C6 17.1046 5.10457 18 4 18H2C0.895431 18 -2.38419e-07 17.1046 0 16C0 14.8954 0.895431 14 2 14H4C5.10457 14 6 14.8954 6 16Z"
fill="url(#paint4_linear)"
/>
<path
d="M12 28V26H20V28C20 30.2091 18.2091 32 16 32C13.7909 32 12 30.2091 12 28Z"
fill="url(#paint5_linear)"
/>
<path
d="M20.0018 24C20.031 23.3193 20.4152 22.7074 20.9536 22.2823C22.8091 20.8172 24 18.5477 24 16C24 11.5817 20.4183 8 16 8C11.5817 8 8 11.5817 8 16C8 18.5477 9.1909 20.8172 11.0464 22.2823C11.5848 22.7074 11.969 23.3193 11.9982 24H20.0018Z"
fill="url(#paint6_linear)"
/>
<defs>
<linearGradient
id="paint0_linear"
x1="-41"
y1="-41"
x2="29"
y2="32"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#E54033" />
<stop offset="0.583333" stopColor="#FECA1A" />
<stop offset="1" stopColor="#AFD803" />
</linearGradient>
<linearGradient
id="paint1_linear"
x1="-41"
y1="-41"
x2="29"
y2="32"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#E54033" />
<stop offset="0.583333" stopColor="#FECA1A" />
<stop offset="1" stopColor="#AFD803" />
</linearGradient>
<linearGradient
id="paint2_linear"
x1="-41"
y1="-41"
x2="29"
y2="32"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#E54033" />
<stop offset="0.583333" stopColor="#FECA1A" />
<stop offset="1" stopColor="#AFD803" />
</linearGradient>
<linearGradient
id="paint3_linear"
x1="-41"
y1="-41"
x2="29"
y2="32"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#E54033" />
<stop offset="0.583333" stopColor="#FECA1A" />
<stop offset="1" stopColor="#AFD803" />
</linearGradient>
<linearGradient
id="paint4_linear"
x1="-41"
y1="-41"
x2="29"
y2="32"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#E54033" />
<stop offset="0.583333" stopColor="#FECA1A" />
<stop offset="1" stopColor="#AFD803" />
</linearGradient>
<linearGradient
id="paint5_linear"
x1="-41"
y1="-41"
x2="29"
y2="32"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#E54033" />
<stop offset="0.583333" stopColor="#FECA1A" />
<stop offset="1" stopColor="#AFD803" />
</linearGradient>
<linearGradient
id="paint6_linear"
x1="-41"
y1="-41"
x2="29"
y2="32"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#E54033" />
<stop offset="0.583333" stopColor="#FECA1A" />
<stop offset="1" stopColor="#AFD803" />
</linearGradient>
</defs>
</svg>
<div className="flex flex-col bg-th-fgd-4 py-8 px-8 h-auto w-auto shadow-md rounded-xl">
<svg
width="32"
height="32"
viewBox="0 0 32 32"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path d="M18 2C18 0.895431 17.1046 0 16 0C14.8954 0 14 0.895431 14 2V4C14 5.10457 14.8954 6 16 6C17.1046 6 18 5.10457 18 4V2Z" fill="url(#paint0_linear)"/>
<path d="M27.3136 7.51461C28.0947 6.73356 28.0947 5.46723 27.3136 4.68619C26.5326 3.90514 25.2662 3.90514 24.4852 4.68619L23.071 6.1004C22.2899 6.88145 22.2899 8.14778 23.071 8.92883C23.852 9.70988 25.1184 9.70988 25.8994 8.92883L27.3136 7.51461Z" fill="url(#paint1_linear)"/>
<path d="M32 16C32 17.1046 31.1046 18 30 18H28C26.8954 18 26 17.1046 26 16C26 14.8954 26.8954 14 28 14H30C31.1046 14 32 14.8954 32 16Z" fill="url(#paint2_linear)"/>
<path d="M6.10038 8.92886C6.88143 9.70991 8.14776 9.70991 8.9288 8.92886C9.70985 8.14781 9.70985 6.88148 8.9288 6.10044L7.51459 4.68622C6.73354 3.90517 5.46721 3.90517 4.68616 4.68622C3.90511 5.46727 3.90512 6.7336 4.68616 7.51465L6.10038 8.92886Z" fill="url(#paint3_linear)"/>
<path d="M6 16C6 17.1046 5.10457 18 4 18H2C0.895431 18 -2.38419e-07 17.1046 0 16C0 14.8954 0.895431 14 2 14H4C5.10457 14 6 14.8954 6 16Z" fill="url(#paint4_linear)"/>
<path d="M12 28V26H20V28C20 30.2091 18.2091 32 16 32C13.7909 32 12 30.2091 12 28Z" fill="url(#paint5_linear)"/>
<path d="M20.0018 24C20.031 23.3193 20.4152 22.7074 20.9536 22.2823C22.8091 20.8172 24 18.5477 24 16C24 11.5817 20.4183 8 16 8C11.5817 8 8 11.5817 8 16C8 18.5477 9.1909 20.8172 11.0464 22.2823C11.5848 22.7074 11.969 23.3193 11.9982 24H20.0018Z" fill="url(#paint6_linear)"/>
<defs>
<linearGradient id="paint0_linear" x1="-41" y1="-41" x2="29" y2="32" gradientUnits="userSpaceOnUse">
<stop stop-color="#E54033"/>
<stop offset="0.583333" stop-color="#FECA1A"/>
<stop offset="1" stop-color="#AFD803"/>
</linearGradient>
<linearGradient id="paint1_linear" x1="-41" y1="-41" x2="29" y2="32" gradientUnits="userSpaceOnUse">
<stop stop-color="#E54033"/>
<stop offset="0.583333" stop-color="#FECA1A"/>
<stop offset="1" stop-color="#AFD803"/>
</linearGradient>
<linearGradient id="paint2_linear" x1="-41" y1="-41" x2="29" y2="32" gradientUnits="userSpaceOnUse">
<stop stop-color="#E54033"/>
<stop offset="0.583333" stop-color="#FECA1A"/>
<stop offset="1" stop-color="#AFD803"/>
</linearGradient>
<linearGradient id="paint3_linear" x1="-41" y1="-41" x2="29" y2="32" gradientUnits="userSpaceOnUse">
<stop stop-color="#E54033"/>
<stop offset="0.583333" stop-color="#FECA1A"/>
<stop offset="1" stop-color="#AFD803"/>
</linearGradient>
<linearGradient id="paint4_linear" x1="-41" y1="-41" x2="29" y2="32" gradientUnits="userSpaceOnUse">
<stop stop-color="#E54033"/>
<stop offset="0.583333" stop-color="#FECA1A"/>
<stop offset="1" stop-color="#AFD803"/>
</linearGradient>
<linearGradient id="paint5_linear" x1="-41" y1="-41" x2="29" y2="32" gradientUnits="userSpaceOnUse">
<stop stop-color="#E54033"/>
<stop offset="0.583333" stop-color="#FECA1A"/>
<stop offset="1" stop-color="#AFD803"/>
</linearGradient>
<linearGradient id="paint6_linear" x1="-41" y1="-41" x2="29" y2="32" gradientUnits="userSpaceOnUse">
<stop stop-color="#E54033"/>
<stop offset="0.583333" stop-color="#FECA1A"/>
<stop offset="1" stop-color="#AFD803"/>
</linearGradient>
</defs>
</svg>
<p className="text-lg font-bold py-6 pb-2">Want to help build?</p>
<div className="flex flex-col">
<p className="text-md text-gray-500 pb-2">We are happy to onboard new contributs! Mango is community driven effort to build comercially viable decentralized trading products.</p>
<LinkLeft>Become a contributor</LinkLeft>
</div>
</div>
<p className="text-lg font-bold py-6 pb-2">
Want to help build?
</p>
<div className="flex flex-col">
<p className="text-md text-gray-500 pb-2">
We are happy to onboard new contributs! Mango is
community driven effort to build comercially viable
decentralized trading products.
</p>
<LinkLeft>Become a contributor</LinkLeft>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
</div>
</div>

104
components/MarketCard.tsx Normal file
View File

@ -0,0 +1,104 @@
import moment from 'moment'
import { useEffect, useMemo, useState } from 'react'
import { AreaChart, Area, ReferenceLine, XAxis, YAxis, Tooltip } from 'recharts'
import tailwindConfig from '../tailwind.config.js'
import PercentPill from './PercentPill'
interface MarketCardProps {
name: string
icon: string
decimals: number
}
interface CandleResponse {
t: number[]
c: number[]
o: number[]
h: number[]
l: number[]
}
const MarketCard = (props: MarketCardProps) => {
const [candles, setCandles] = useState({ t: [], c: [], o: [], h: [], l: [] })
useEffect(() => {
const loadCandles = async () => {
const symbol = props.name
const resolution = '60'
const from = moment().subtract(24, 'hours').format('X')
const to = moment().format('X')
const query = new URLSearchParams({
symbol,
resolution,
from,
to,
}).toString()
const response = await fetch(
`https://serum-history.herokuapp.com/tv/history?${query}`
)
setCandles(await response.json())
}
loadCandles()
}, [props.name])
const price = candles.c.length > 0 ? candles.c[candles.c.length - 1] : 0
const change =
candles.o.length > 0 ? ((price - candles.c[0]) / candles.c[0]) * 100 : 0
const graph =
candles.t.length > 0
? candles.t.map((t, i) => ({
t,
p: candles.c[i] - Math.min(...candles.l),
}))
: []
const formatUsd = (val: number) => {
const significance = Math.pow(10, props.decimals)
const roundedVal = Math.round(val * significance) / significance
return new Intl.NumberFormat('en-US').format(roundedVal)
}
const colors = tailwindConfig.theme.extend.colors
return (
<div className="col-span-1 flex md:col-span-2 lg:col-span-1">
<a href="#">
<div className="flex flex-row bg-th-fgd-4 rounded-lg py-4 px-4 h-auto w-auto">
<div className="pr-4 border-r-2 border-white border-opacity-10">
<img className="h-6" src={props.icon} alt={props.name} />
<p className="text-gray-500 font-bold py-1">{props.name}</p>
<div className="flex flex-row">
<p className="font-bold text-xl pr-2">${formatUsd(price)}</p>
<PercentPill value={change} />
</div>
</div>
<div className="flex align-middle pl-4">
{graph.length > 0 && (
<AreaChart width={90} height={90} data={graph}>
<ReferenceLine
y={0}
stroke={colors[`secondary-${change > 0 ? 1 : 2}`].light}
strokeDasharray="3 3"
strokeOpacity={0.6}
/>
<Area
isAnimationActive={false}
type="monotone"
dataKey="p"
stroke={colors[`secondary-${change > 0 ? 1 : 2}`].light}
fill={colors[`secondary-${change > 0 ? 1 : 2}`].dark}
fillOpacity={0.1}
/>
<XAxis dataKey="t" hide />
<YAxis dataKey="p" hide />
</AreaChart>
)}
</div>
</div>
</a>
</div>
)
}
export default MarketCard

View File

@ -1,7 +1,17 @@
const PercentPill = () => {
interface PercentPillProps {
value: number
className?: string
}
const PercentPill = (props: PercentPillProps) => {
const bg = props.value > 0 ? 'bg-green-500' : 'bg-red-500'
const displayValue = props.value.toFixed(props.value > 10 ? 0 : 1)
return (
<div className="inline-flex h-6 mt-1 items-center px-3 py-2 text-white text-sm uppercase font-bold bg-mango-red rounded-full">
<p>-3%</p>
<div
className={`${props.className} ${bg} inline-flex text-xs h-6 mt-1 items-center px-2 py-1 uppercase font-bold rounded-full`}
>
<p>{displayValue}%</p>
</div>
)
}

View File

@ -1,4 +1,4 @@
import PercentPill from '../components/PercentPill'
import MarketCard from './MarketCard'
import Button from './Button'
import GradientText from './GradientText'
import Link from './Link'
@ -11,101 +11,34 @@ const TradeSection = () => {
<section className="py-12 px-3 lg:mt-0 md: mt-0 sm:mt-28 ">
<div className="max-w-7xl mx-auto">
<div className="grid grid-cols-2 gap-8 md:grid-cols-6 lg:grid-cols-4">
<div className="col-span-1 flex md:col-span-2 lg:col-span-1">
<a href="#">
<div className="flex flex-row bg-th-fgd-4 shadow-md rounded-xl py-6 px-8 h-auto w-auto">
<div className="pr-6 border-r-4 border-white border-opacity-10">
<img
className="h-6"
src="../token/icon-btc.svg"
alt="BTC"
/>
<p className="text-gray-500 font-bold py-1">BTC/USD</p>
<div className="flex flex-row">
<p className="font-bold text-xl pr-2">$32,234.23</p>
<PercentPill />
</div>
</div>
<div className="flex align-middle pl-6">
<img className="h-auto" src="../graph_red.svg" alt="" />
</div>
</div>
</a>
</div>
<div className="col-span-1 flex justify-center md:col-span-2 lg:col-span-1">
<a href="#">
<div className="flex flex-row bg-th-fgd-4 shadow-md rounded-xl py-6 px-8 h-auto w-auto">
<div className="pr-6 border-r-4 border-white border-opacity-10">
<img
className="h-6"
src="../token/icon-eth.svg"
alt="ETH"
/>
<p className="text-gray-500 font-bold py-1">ETH/USD</p>
<div className="flex flex-row">
<p className="font-bold text-xl pr-2">$2,234.23</p>
<PercentPill />
</div>
</div>
<div className="flex align-middle pl-6">
<img
className="h-auto"
src="../graph_green.svg"
alt=""
/>
</div>
</div>
</a>
</div>
<div className="col-span-1 flex justify-center md:col-span-2 lg:col-span-1">
<a href="#">
<div className="flex flex-row bg-th-fgd-4 shadow-md rounded-xl py-6 px-8 h-auto w-auto">
<div className="pr-6 border-r-4 border-white border-opacity-10">
<img
className="h-6"
src="../token/icon-sol.svg"
alt="SOL"
/>
<p className="text-gray-500 font-bold py-1">SOL/USD</p>
<div className="flex flex-row">
<p className="font-bold text-xl pr-2">$34.23</p>
<PercentPill />
</div>
</div>
<div className="flex align-middle pl-6">
<img className="h-auto" src="../graph_red.svg" alt="" />
</div>
</div>
</a>
</div>
<div className="col-span-1 flex justify-center md:col-span-2 lg:col-span-1">
<a href="#">
<div className="flex flex-row bg-th-fgd-4 shadow-md rounded-xl py-6 px-8 h-auto w-auto">
<div className="pr-6 border-r-4 border-white border-opacity-10">
<img
className="h-6"
src="../token/icon-srm.svg"
alt="SRM"
/>
<p className="text-gray-500 font-bold py-1">SRM/USD</p>
<div className="flex flex-row">
<p className="font-bold text-xl pr-3">$4.23</p>
<PercentPill />
</div>
</div>
<div className="flex align-middle pl-6">
<img
className="h-auto"
src="../graph_green.svg"
alt=""
/>
</div>
</div>
</a>
</div>
<MarketCard
name="BTC/USDC"
icon="../token/icon-btc.svg"
price={32234.23}
decimals={2}
change={1}
/>
<MarketCard
name="ETH/USDC"
icon="../token/icon-eth.svg"
price={2234.23}
decimals={2}
change={-3}
/>
<MarketCard
name="SOL/USDC"
icon="../token/icon-sol.svg"
price={34.23}
decimals={2}
change={3}
/>
<MarketCard
name="SRM/USDC"
icon="../token/icon-srm.svg"
price={32234.23}
decimals={2}
change={-3}
/>
</div>
</div>
</section>
@ -124,18 +57,18 @@ const TradeSection = () => {
</p>
</div>
<div className="flex flex-row justify-center">
<Button>Start trading</Button>
<Link>Why choose Mango Markets</Link>
</div>
<Button>Start trading</Button>
<Link>Why choose Mango Markets</Link>
</div>
</div>
</div>
</section>
<section className="px-3">
<div className="flex flex-wrap justify-center items-center text-center">
<div className="flex flex-col">
<GradientText>
<GradientText>
<span className="text-2xl font-bold leading-relaxed">
Volume
Volume
</span>
</GradientText>

View File

@ -29,10 +29,12 @@
"@solana/spl-token": "^0.1.3",
"@solana/web3.js": "^1.5.0",
"immer": "^9.0.1",
"moment": "^2.29.1",
"next": "latest",
"next-themes": "^0.0.14",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"recharts": "^2.0.10",
"zustand": "^3.4.1"
},
"devDependencies": {

220
yarn.lock
View File

@ -315,6 +315,13 @@
dependencies:
regenerator-runtime "^0.13.4"
"@babel/runtime@^7.1.2":
version "7.14.6"
resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.14.6.tgz#535203bc0892efc7dec60bdc27b2ecf6e409062d"
integrity sha512-/PCB2uJ7oM44tz8YhC4Z/6PeOKXp4K588f+5M3clr1M4zbqztlo0XEfJ2LEzj/FgwfgGcIdl8n7YYjTCI0BYwg==
dependencies:
regenerator-runtime "^0.13.4"
"@babel/runtime@^7.10.2", "@babel/runtime@^7.10.5", "@babel/runtime@^7.11.2", "@babel/runtime@^7.12.5", "@babel/runtime@^7.13.10", "@babel/runtime@^7.7.2":
version "7.13.17"
resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.13.17.tgz#8966d1fc9593bf848602f0662d6b4d0069e3a7ec"
@ -929,6 +936,30 @@
dependencies:
"@types/node" "*"
"@types/d3-path@^2":
version "2.0.1"
resolved "https://registry.yarnpkg.com/@types/d3-path/-/d3-path-2.0.1.tgz#ca03dfa8b94d8add97ad0cd97e96e2006b4763cb"
integrity sha512-6K8LaFlztlhZO7mwsZg7ClRsdLg3FJRzIIi6SZXDWmmSJc2x8dd2VkESbLXdk3p8cuvz71f36S0y8Zv2AxqvQw==
"@types/d3-scale@^3.0.0":
version "3.3.2"
resolved "https://registry.yarnpkg.com/@types/d3-scale/-/d3-scale-3.3.2.tgz#18c94e90f4f1c6b1ee14a70f14bfca2bd1c61d06"
integrity sha512-gGqr7x1ost9px3FvIfUMi5XA/F/yAf4UkUDtdQhpH92XCT0Oa7zkkRzY61gPVJq+DxpHn/btouw5ohWkbBsCzQ==
dependencies:
"@types/d3-time" "^2"
"@types/d3-shape@^2.0.0":
version "2.1.3"
resolved "https://registry.yarnpkg.com/@types/d3-shape/-/d3-shape-2.1.3.tgz#35d397b9e687abaa0de82343b250b9897b8cacf3"
integrity sha512-HAhCel3wP93kh4/rq+7atLdybcESZ5bRHDEZUojClyZWsRuEMo3A52NGYJSh48SxfxEU6RZIVbZL2YFZ2OAlzQ==
dependencies:
"@types/d3-path" "^2"
"@types/d3-time@^2":
version "2.1.1"
resolved "https://registry.yarnpkg.com/@types/d3-time/-/d3-time-2.1.1.tgz#743fdc821c81f86537cbfece07093ac39b4bc342"
integrity sha512-9MVYlmIgmRR31C5b4FVSWtuMmBHh2mOWQYfl7XAYOa8dsnb7iEmUmRSWSFgXFtkjxO65d7hTUHQC+RhR/9IWFg==
"@types/express-serve-static-core@^4.17.9":
version "4.17.19"
resolved "https://registry.yarnpkg.com/@types/express-serve-static-core/-/express-serve-static-core-4.17.19.tgz#00acfc1632e729acac4f1530e9e16f6dd1508a1d"
@ -1031,6 +1062,11 @@
"@types/scheduler" "*"
csstype "^3.0.2"
"@types/resize-observer-browser@^0.1.5":
version "0.1.6"
resolved "https://registry.yarnpkg.com/@types/resize-observer-browser/-/resize-observer-browser-0.1.6.tgz#d8e6c2f830e2650dc06fe74464472ff64b54a302"
integrity sha512-61IfTac0s9jvNtBCpyo86QeaN8qqpMGHdK0uGKCCIy2dt5/Yk84VduHIdWAcmkC5QvdkPL0p5eWYgUZtHKKUVg==
"@types/scheduler@*":
version "0.16.1"
resolved "https://registry.yarnpkg.com/@types/scheduler/-/scheduler-0.16.1.tgz#18845205e86ff0038517aab7a18a62a6b9f71275"
@ -1957,6 +1993,11 @@ classnames@2.2.6:
resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.2.6.tgz#43935bffdd291f326dad0a205309b38d00f650ce"
integrity sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q==
classnames@^2.2.5:
version "2.3.1"
resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.3.1.tgz#dfcfa3891e306ec1dad105d0e88f4417b8535e8e"
integrity sha512-OlQdbZ7gLfGarSqxesMesDa5uz7KFbID8Kpq/SxIoNGDqY8lSYs0D+hhtBXhcdB3rcbXArFr7vlHheLk1voeNA==
clean-set@^1.1.1:
version "1.1.2"
resolved "https://registry.yarnpkg.com/clean-set/-/clean-set-1.1.2.tgz#76d8bf238c3e27827bfa73073ecdfdc767187070"
@ -2308,6 +2349,67 @@ csstype@^3.0.2:
resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.0.8.tgz#d2266a792729fb227cd216fb572f43728e1ad340"
integrity sha512-jXKhWqXPmlUeoQnF/EhTtTl4C9SnrxSH/jZUih3jmO6lBKr99rP3/+FmrMj4EFpOXzMtXHAZkd3x0E6h6Fgflw==
d3-array@2, d3-array@^2.3.0:
version "2.12.1"
resolved "https://registry.yarnpkg.com/d3-array/-/d3-array-2.12.1.tgz#e20b41aafcdffdf5d50928004ececf815a465e81"
integrity sha512-B0ErZK/66mHtEsR1TkPEEkwdy+WDesimkM5gpZr5Dsg54BiTA5RXtYW5qTLIAcekaS9xfZrzBLF/OAkB3Qn1YQ==
dependencies:
internmap "^1.0.0"
"d3-color@1 - 2":
version "2.0.0"
resolved "https://registry.yarnpkg.com/d3-color/-/d3-color-2.0.0.tgz#8d625cab42ed9b8f601a1760a389f7ea9189d62e"
integrity sha512-SPXi0TSKPD4g9tw0NMZFnR95XVgUZiBH+uUTqQuDu1OsE2zomHU7ho0FISciaPvosimixwHFl3WHLGabv6dDgQ==
"d3-format@1 - 2":
version "2.0.0"
resolved "https://registry.yarnpkg.com/d3-format/-/d3-format-2.0.0.tgz#a10bcc0f986c372b729ba447382413aabf5b0767"
integrity sha512-Ab3S6XuE/Q+flY96HXT0jOXcM4EAClYFnRGY5zsjRGNy6qCYrQsMffs7cV5Q9xejb35zxW5hf/guKw34kvIKsA==
"d3-interpolate@1.2.0 - 2", d3-interpolate@^2.0.1:
version "2.0.1"
resolved "https://registry.yarnpkg.com/d3-interpolate/-/d3-interpolate-2.0.1.tgz#98be499cfb8a3b94d4ff616900501a64abc91163"
integrity sha512-c5UhwwTs/yybcmTpAVqwSFl6vrQ8JZJoT5F7xNFK9pymv5C0Ymcc9/LIJHtYIggg/yS9YHw8i8O8tgb9pupjeQ==
dependencies:
d3-color "1 - 2"
"d3-path@1 - 2":
version "2.0.0"
resolved "https://registry.yarnpkg.com/d3-path/-/d3-path-2.0.0.tgz#55d86ac131a0548adae241eebfb56b4582dd09d8"
integrity sha512-ZwZQxKhBnv9yHaiWd6ZU4x5BtCQ7pXszEV9CU6kRgwIQVQGLMv1oiL4M+MK/n79sYzsj+gcgpPQSctJUsLN7fA==
d3-scale@^3.2.3:
version "3.3.0"
resolved "https://registry.yarnpkg.com/d3-scale/-/d3-scale-3.3.0.tgz#28c600b29f47e5b9cd2df9749c206727966203f3"
integrity sha512-1JGp44NQCt5d1g+Yy+GeOnZP7xHo0ii8zsQp6PGzd+C1/dl0KGsp9A7Mxwp+1D1o4unbTTxVdU/ZOIEBoeZPbQ==
dependencies:
d3-array "^2.3.0"
d3-format "1 - 2"
d3-interpolate "1.2.0 - 2"
d3-time "^2.1.1"
d3-time-format "2 - 3"
d3-shape@^2.0.0:
version "2.1.0"
resolved "https://registry.yarnpkg.com/d3-shape/-/d3-shape-2.1.0.tgz#3b6a82ccafbc45de55b57fcf956c584ded3b666f"
integrity sha512-PnjUqfM2PpskbSLTJvAzp2Wv4CZsnAgTfcVRTwW03QR3MkXF8Uo7B1y/lWkAsmbKwuecto++4NlsYcvYpXpTHA==
dependencies:
d3-path "1 - 2"
"d3-time-format@2 - 3":
version "3.0.0"
resolved "https://registry.yarnpkg.com/d3-time-format/-/d3-time-format-3.0.0.tgz#df8056c83659e01f20ac5da5fdeae7c08d5f1bb6"
integrity sha512-UXJh6EKsHBTjopVqZBhFysQcoXSv/5yLONZvkQ5Kk3qbwiUYkdX17Xa1PT6U1ZWXGGfB1ey5L8dKMlFq2DO0Ag==
dependencies:
d3-time "1 - 2"
"d3-time@1 - 2", d3-time@^2.1.1:
version "2.1.1"
resolved "https://registry.yarnpkg.com/d3-time/-/d3-time-2.1.1.tgz#e9d8a8a88691f4548e68ca085e5ff956724a6682"
integrity sha512-/eIQe/eR4kCQwq7yxi7z4c6qEXf2IYGcjoWB5OOQy4Tq9Uv39/947qlDcN2TLkiTzQWzvnsuYPB9TrWaNfipKQ==
dependencies:
d3-array "2"
dashdash@^1.12.0:
version "1.14.1"
resolved "https://registry.yarnpkg.com/dashdash/-/dashdash-1.14.1.tgz#853cfa0f7cbe2fed5de20326b8dd581035f6e2f0"
@ -2348,6 +2450,11 @@ decamelize@^1.2.0:
resolved "https://registry.yarnpkg.com/decamelize/-/decamelize-1.2.0.tgz#f6534d15148269b20352e7bee26f501f9a191290"
integrity sha1-9lNNFRSCabIDUue+4m9QH5oZEpA=
decimal.js-light@^2.4.1:
version "2.5.1"
resolved "https://registry.yarnpkg.com/decimal.js-light/-/decimal.js-light-2.5.1.tgz#134fd32508f19e208f4fb2f8dac0d2626a867934"
integrity sha512-qIMFpTMZmny+MMIitAB6D7iVPEorVw6YQRWkvarTkT4tBeSLLiHzcwj6q0MmYSFCiVpiqPJTJEYIrpcPzVEIvg==
decimal.js@^10.2.1:
version "10.2.1"
resolved "https://registry.yarnpkg.com/decimal.js/-/decimal.js-10.2.1.tgz#238ae7b0f0c793d3e3cea410108b35a2c01426a3"
@ -2496,6 +2603,13 @@ dom-accessibility-api@^0.5.4:
resolved "https://registry.yarnpkg.com/dom-accessibility-api/-/dom-accessibility-api-0.5.4.tgz#b06d059cdd4a4ad9a79275f9d414a5c126241166"
integrity sha512-TvrjBckDy2c6v6RLxPv5QXOnU+SmF9nBII5621Ve5fu6Z/BDrENurBEvlC1f44lKEUVqOpK4w9E5Idc5/EgkLQ==
dom-helpers@^3.4.0:
version "3.4.0"
resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-3.4.0.tgz#e9b369700f959f62ecde5a6babde4bccd9169af8"
integrity sha512-LnuPJ+dwqKDIyotW1VzmOZ5TONUN7CwkCR5hrgawTUbkBGYdeoNLZo6nNfGkCrjtE1nXXaj7iMMpDa8/d9WoIA==
dependencies:
"@babel/runtime" "^7.1.2"
domain-browser@4.19.0:
version "4.19.0"
resolved "https://registry.yarnpkg.com/domain-browser/-/domain-browser-4.19.0.tgz#1093e17c0a17dbd521182fe90d49ac1370054af1"
@ -2821,7 +2935,7 @@ etag@1.8.1:
resolved "https://registry.yarnpkg.com/etag/-/etag-1.8.1.tgz#41ae2eeb65efa62268aebfea83ac7d79299b0887"
integrity sha1-Qa4u62XvpiJorr/qg6x9eSmbCIc=
eventemitter3@^4.0.4, eventemitter3@^4.0.7:
eventemitter3@^4.0.1, eventemitter3@^4.0.4, eventemitter3@^4.0.7:
version "4.0.7"
resolved "https://registry.yarnpkg.com/eventemitter3/-/eventemitter3-4.0.7.tgz#2de9b68f6528d5644ef5c59526a1b4a07306169f"
integrity sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw==
@ -2956,6 +3070,11 @@ fast-deep-equal@^3.1.1:
resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz#3a7d56b559d6cbc3eb512325244e619a65c6c525"
integrity sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==
fast-equals@^2.0.0:
version "2.0.3"
resolved "https://registry.yarnpkg.com/fast-equals/-/fast-equals-2.0.3.tgz#7039b0a039909f345a2ce53f6202a14e5f392efc"
integrity sha512-0EMw4TTUxsMDpDkCg0rXor2gsg+npVrMIHbEhvD0HZyIhUX6AktC/yasm+qKwfyswd06Qy95ZKk8p2crTo0iPA==
fast-glob@^3.1.1, fast-glob@^3.2.5:
version "3.2.5"
resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-3.2.5.tgz#7939af2a656de79a4f1901903ee8adcaa7cb9661"
@ -3581,6 +3700,11 @@ internal-slot@^1.0.3:
has "^1.0.3"
side-channel "^1.0.4"
internmap@^1.0.0:
version "1.0.1"
resolved "https://registry.yarnpkg.com/internmap/-/internmap-1.0.1.tgz#0017cc8a3b99605f0302f2b198d272e015e5df95"
integrity sha512-lDB5YccMydFBtasVtxnZ3MRBHuaoE8GKsppq+EchKL2U4nK/DmEpPHNH8MZe5HkMtpSiTSOZwfN0tzYjO/lJEw==
is-accessor-descriptor@^0.1.6:
version "0.1.6"
resolved "https://registry.yarnpkg.com/is-accessor-descriptor/-/is-accessor-descriptor-0.1.6.tgz#a9e12cb3ae8d876727eeef3843f8a0897b5c98d6"
@ -4626,6 +4750,11 @@ lodash.clonedeep@^4.5.0:
resolved "https://registry.yarnpkg.com/lodash.clonedeep/-/lodash.clonedeep-4.5.0.tgz#e23f3f9c4f8fbdde872529c1071857a086e5ccef"
integrity sha1-4j8/nE+Pvd6HJSnBBxhXoIblzO8=
lodash.debounce@^4.0.8:
version "4.0.8"
resolved "https://registry.yarnpkg.com/lodash.debounce/-/lodash.debounce-4.0.8.tgz#82d79bff30a67c4005ffd5e2515300ad9ca4d7af"
integrity sha1-gteb/zCmfEAF/9XiUVMArZyk168=
lodash.flatmap@^4.5.0:
version "4.5.0"
resolved "https://registry.yarnpkg.com/lodash.flatmap/-/lodash.flatmap-4.5.0.tgz#ef8cbf408f6e48268663345305c6acc0b778702e"
@ -4651,6 +4780,11 @@ lodash.sortby@^4.7.0:
resolved "https://registry.yarnpkg.com/lodash.sortby/-/lodash.sortby-4.7.0.tgz#edd14c824e2cc9c1e0b0a1b42bb5210516a42438"
integrity sha1-7dFMgk4sycHgsKG0K7UhBRakJDg=
lodash.throttle@^4.1.1:
version "4.1.1"
resolved "https://registry.yarnpkg.com/lodash.throttle/-/lodash.throttle-4.1.1.tgz#c23e91b710242ac70c37f1e1cda9274cc39bf2f4"
integrity sha1-wj6RtxAkKscMN/HhzaknTMOb8vQ=
lodash.toarray@^4.4.0:
version "4.4.0"
resolved "https://registry.yarnpkg.com/lodash.toarray/-/lodash.toarray-4.4.0.tgz#24c4bfcd6b2fba38bfd0594db1179d8e9b656561"
@ -4845,6 +4979,11 @@ modern-normalize@^1.1.0:
resolved "https://registry.yarnpkg.com/modern-normalize/-/modern-normalize-1.1.0.tgz#da8e80140d9221426bd4f725c6e11283d34f90b7"
integrity sha512-2lMlY1Yc1+CUy0gw4H95uNN7vjbpoED7NNRSBHE25nWfLBdmMzFCsPshlzbxHz+gYMcBEUN8V4pU16prcdPSgA==
moment@^2.29.1:
version "2.29.1"
resolved "https://registry.yarnpkg.com/moment/-/moment-2.29.1.tgz#b2be769fa31940be9eeea6469c075e35006fa3d3"
integrity sha512-kHmoybcPV8Sqy59DwNDY3Jefr64lK/by/da0ViFcuA4DH0vQg5Q6Ze5VimxkfQNSC+Mls/Kx53s7TjP1RhFEDQ==
ms@2.0.0:
version "2.0.0"
resolved "https://registry.yarnpkg.com/ms/-/ms-2.0.0.tgz#5608aeadfc00be6c2901df5f9861788de0d597c8"
@ -5878,7 +6017,7 @@ prompts@^2.0.1:
kleur "^3.0.3"
sisteransi "^1.0.5"
prop-types@15.7.2, prop-types@^15.7.2:
prop-types@15.7.2, prop-types@^15.6.2, prop-types@^15.7.2:
version "15.7.2"
resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
@ -5977,6 +6116,13 @@ quick-lru@^5.1.1:
resolved "https://registry.yarnpkg.com/quick-lru/-/quick-lru-5.1.1.tgz#366493e6b3e42a3a6885e2e99d18f80fb7a8c932"
integrity sha512-WuyALRjWPDGtt/wzJiadO5AXY+8hZ80hVpe6MyivgraREW751X3SbhRvG3eLKOYN+8VEvqLcf3wdnt44Z4S4SA==
raf@^3.4.0:
version "3.4.1"
resolved "https://registry.yarnpkg.com/raf/-/raf-3.4.1.tgz#0742e99a4a6552f445d73e3ee0328af0ff1ede39"
integrity sha512-Sq4CW4QhwOHE8ucn6J34MqtZCeWFP2aQSmrlroYgqAV1PjStIhJXxYuTgUIfkEk7zTLjmIjLmU5q+fbD1NnOJA==
dependencies:
performance-now "^2.1.0"
randombytes@^2.0.0, randombytes@^2.0.1, randombytes@^2.0.5:
version "2.1.0"
resolved "https://registry.yarnpkg.com/randombytes/-/randombytes-2.1.0.tgz#df6f84372f0270dc65cdf6291349ab7a473d4f2a"
@ -6011,6 +6157,11 @@ react-dom@^17.0.1:
object-assign "^4.1.1"
scheduler "^0.20.2"
react-is@16.10.2:
version "16.10.2"
resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.10.2.tgz#984120fd4d16800e9a738208ab1fba422d23b5ab"
integrity sha512-INBT1QEgtcCCgvccr5/86CfD71fw9EPmDxgiJX4I2Ddr6ZsV6iFXsuby+qWJPtmNuMY0zByTsG4468P7nHuNWA==
react-is@16.13.1, react-is@^16.7.0, react-is@^16.8.1:
version "16.13.1"
resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
@ -6021,11 +6172,45 @@ react-is@^17.0.1:
resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.2.tgz#e691d4a8e9c789365655539ab372762b0efb54f0"
integrity sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==
react-lifecycles-compat@^3.0.4:
version "3.0.4"
resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362"
integrity sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==
react-refresh@0.8.3:
version "0.8.3"
resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.8.3.tgz#721d4657672d400c5e3c75d063c4a85fb2d5d68f"
integrity sha512-X8jZHc7nCMjaCqoU+V2I0cOhNW+QMBwSUkeXnTi8IPe6zaRWfn60ZzvFDZqWPfmSJfjub7dDW1SP0jaHWLu/hg==
react-resize-detector@^6.6.3:
version "6.7.4"
resolved "https://registry.yarnpkg.com/react-resize-detector/-/react-resize-detector-6.7.4.tgz#594cc026115af05484e8011157b5dc2137492680"
integrity sha512-wzvGmUdEDMhiUHVZGnl4kuyj/TEQhvbB5LyAGkbYXetwJ2O+u/zftmPvU+kxiO1h+d9aUqQBKcNLS7TvB3ytqA==
dependencies:
"@types/resize-observer-browser" "^0.1.5"
lodash.debounce "^4.0.8"
lodash.throttle "^4.1.1"
resize-observer-polyfill "^1.5.1"
react-smooth@^2.0.0:
version "2.0.0"
resolved "https://registry.yarnpkg.com/react-smooth/-/react-smooth-2.0.0.tgz#561647b33e498b2e25f449b3c6689b2e9111bf91"
integrity sha512-wK4dBBR6P21otowgMT9toZk+GngMplGS1O5gk+2WSiHEXIrQgDvhR5IIlT74Vtu//qpTcipkgo21dD7a7AUNxw==
dependencies:
fast-equals "^2.0.0"
raf "^3.4.0"
react-transition-group "2.9.0"
react-transition-group@2.9.0:
version "2.9.0"
resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-2.9.0.tgz#df9cdb025796211151a436c69a8f3b97b5b07c8d"
integrity sha512-+HzNTCHpeQyl4MJ/bdE0u6XRMe9+XG/+aL4mCxVN4DnPBQ0/5bfHWPDuOZUzYdMj94daZaZdCCc1Dzt9R/xSSg==
dependencies:
dom-helpers "^3.4.0"
loose-envify "^1.4.0"
prop-types "^15.6.2"
react-lifecycles-compat "^3.0.4"
react@^17.0.1:
version "17.0.2"
resolved "https://registry.yarnpkg.com/react/-/react-17.0.2.tgz#d0b5cc516d29eb3eee383f75b62864cfb6800037"
@ -6089,6 +6274,32 @@ readdirp@~3.6.0:
dependencies:
picomatch "^2.2.1"
recharts-scale@^0.4.4:
version "0.4.5"
resolved "https://registry.yarnpkg.com/recharts-scale/-/recharts-scale-0.4.5.tgz#0969271f14e732e642fcc5bd4ab270d6e87dd1d9"
integrity sha512-kivNFO+0OcUNu7jQquLXAxz1FIwZj8nrj+YkOKc5694NbjCvcT6aSZiIzNzd2Kul4o4rTto8QVR9lMNtxD4G1w==
dependencies:
decimal.js-light "^2.4.1"
recharts@^2.0.10:
version "2.0.10"
resolved "https://registry.yarnpkg.com/recharts/-/recharts-2.0.10.tgz#d5b212b06aeb4ba346c20c6987fe8f9f97d57b4d"
integrity sha512-yVIlHXPiSgxg8z+qApVnBcGVCLpluqNbXJenK3jKxsCb/FJzh77wyEztS6kXLXSC1RCZa7UABmBPBhqspMCF+g==
dependencies:
"@types/d3-scale" "^3.0.0"
"@types/d3-shape" "^2.0.0"
classnames "^2.2.5"
d3-interpolate "^2.0.1"
d3-scale "^3.2.3"
d3-shape "^2.0.0"
eventemitter3 "^4.0.1"
lodash "^4.17.19"
react-is "16.10.2"
react-resize-detector "^6.6.3"
react-smooth "^2.0.0"
recharts-scale "^0.4.4"
reduce-css-calc "^2.1.8"
reduce-css-calc@^2.1.8:
version "2.1.8"
resolved "https://registry.yarnpkg.com/reduce-css-calc/-/reduce-css-calc-2.1.8.tgz#7ef8761a28d614980dc0c982f772c93f7a99de03"
@ -6195,6 +6406,11 @@ require-main-filename@^2.0.0:
resolved "https://registry.yarnpkg.com/require-main-filename/-/require-main-filename-2.0.0.tgz#d0b329ecc7cc0f61649f62215be69af54aa8989b"
integrity sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg==
resize-observer-polyfill@^1.5.1:
version "1.5.1"
resolved "https://registry.yarnpkg.com/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz#0e9020dd3d21024458d4ebd27e23e40269810464"
integrity sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg==
resolve-cwd@^3.0.0:
version "3.0.0"
resolved "https://registry.yarnpkg.com/resolve-cwd/-/resolve-cwd-3.0.0.tgz#0f0075f1bb2544766cf73ba6a6e2adfebcb13f2d"