feat(bridge): new deposit confirmation route

src/Routes.tsx

@@ -51,6 +51,7 @@ const AllTransactions = lazyWithRetry(
 const Staking = lazyWithRetry(
   () => import(/* webpackChunkName: "RewardStaking" */ "./views/Staking")
 );
+const DepositStatus = lazyWithRetry(() => import("./views/DepositStatus"));
 
 const warningMessage = `
   We noticed that you have connected from a contract address.
@@ -168,6 +169,7 @@ const Routes: React.FC = () => {
             }}
           />
           <Route exact path="/bridge" component={Send} />
+          <Route path="/bridge/:depositTxHash" component={DepositStatus} />
           <Route exact path="/" component={Splash} />
         </Switch>
       </Suspense>

src/components/Badge/Badge.tsx

@@ -0,0 +1,32 @@
+import styled from "@emotion/styled";
+
+import { COLORS } from "utils";
+
+export type BadgeColor = keyof typeof COLORS;
+
+type BadgeProps = {
+  borderColor?: BadgeColor;
+  textColor?: BadgeColor;
+};
+
+export const Badge = styled.div<BadgeProps>`
+  display: flex;
+  height: 1.25rem;
+  padding: 0.5rem 0.3125rem 0.625rem 0.3125rem;
+  justify-content: center;
+  align-items: center;
+
+  letter-spacing: 0.03rem;
+  font-variant-numeric: lining-nums tabular-nums;
+  font-size: 0.75rem;
+  line-height: normal;
+  letter-spacing: 0.03rem;
+  text-transform: uppercase;
+
+  border-radius: 0.375rem;
+  border: 1px solid;
+  border-color: ${({ borderColor, textColor }) =>
+    COLORS[borderColor || textColor || "white-100"]};
+  color: ${({ borderColor, textColor }) =>
+    COLORS[textColor || borderColor || "white-100"]};
+`;

src/components/Badge/index.tsx

@@ -0,0 +1 @@
+export { Badge } from "./Badge";

src/components/BreadcrumbV2/BreadcrumbV2.tsx

@@ -80,6 +80,7 @@ const ActiveLink = styled(Link)`
 
 const ActiveLinkText = styled(Text)`
   color: #9daab2;
+  text-transform: capitalize;
 `;
 
 const InactiveLink = styled(Text)`

src/components/Button/Button.tsx

@@ -18,6 +18,7 @@ type SecondaryButtonProps = BaseButtonProps & {
   textColor?: ButtonColor;
   borderColor?: ButtonColor;
   hoveredBorderColor?: ButtonColor;
+  backgroundColor?: ButtonColor;
 };
 
 const sizeMap: Record<
@@ -131,6 +132,8 @@ export const SecondaryButton = styled(BaseButton)<SecondaryButtonProps>`
     COLORS[textColor || borderColor]};
   border: 1px solid;
   border-color: ${({ borderColor = "aqua" }) => COLORS[borderColor]};
+  background-color: ${({ backgroundColor }) =>
+    backgroundColor ? COLORS[backgroundColor] : "transparent"};
 
   &:hover:not(:disabled) {
     border-color: ${({ hoveredBorderColor, borderColor = "aqua" }) =>

src/components/Text/Text.tsx

@@ -2,7 +2,7 @@ import styled from "@emotion/styled";
 
 import { QUERIESV2, COLORS } from "utils";
 
-type TextSize =
+export type TextSize =
   | "4xl"
   | "3.5xl"
   | "3xl"

src/components/Text/index.ts

@@ -1,2 +1,2 @@
 export { Text } from "./Text";
-export type { TextColor } from "./Text";
+export type { TextColor, TextSize } from "./Text";

src/components/index.ts

@@ -10,7 +10,9 @@ export { default as Selector } from "./Selector";
 export { default as InputWithMaxButton } from "./InputWithMaxButton";
 export { Text } from "./Text";
 export { WrongNetworkHeader } from "./WrongNetworkHeader";
+export { default as CardWrapper } from "./CardWrapper";
 
 export * from "./Button";
+export * from "./Badge";
 export * from "./ExternalLink";
 export * from "./ErrorBoundary";