Added token status rings

2020-04-13 23:42:18 +10:00
parent 8ba3881529
commit 441e589ec3
6 changed files with 172 additions and 24 deletions
@@ -0,0 +1,47 @@
+import React from "react";
+import { Box } from "theme-ui";
+
+import { statusToColor } from "../helpers/status";
+
+function TokenStatus({ statuses }) {
+  return (
+    <Box
+      sx={{
+        position: "absolute",
+        width: "100%",
+        height: "100%",
+        pointerEvents: "none",
+      }}
+    >
+      {statuses.map((status, index) => (
+        <Box
+          key={status}
+          sx={{
+            width: "100%",
+            height: "100%",
+            position: "absolute",
+            opacity: 0.8,
+            transform: `scale(1.${index + 1})`,
+          }}
+        >
+          <svg
+            style={{ position: "absolute" }}
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 100 100"
+          >
+            <circle
+              r={47}
+              cx={50}
+              cy={50}
+              fill="none"
+              stroke={statusToColor(status)}
+              strokeWidth={4}
+            />
+          </svg>
+        </Box>
+      ))}
+    </Box>
+  );
+}
+
+export default TokenStatus;