From 19951343716ee4b9507383bcee46c1e1b2094e1f Mon Sep 17 00:00:00 2001
From: Dhaiwat Pandya <dhaiwatpandya@gmail.com>
Date: Fri, 29 Apr 2022 09:27:23 +0530
Subject: [PATCH] switch to `stitches` from plain css (#341)

---
 packages/components/package.json              |  5 +--
 .../src/components/Address/Address.css        | 10 ------
 .../src/components/Address/Address.tsx        | 19 +++++++---
 .../components/AddressInput/AddressInput.css  | 19 ----------
 .../components/AddressInput/AddressInput.tsx  | 36 +++++++++++++++----
 yarn.lock                                     |  5 +++
 6 files changed, 53 insertions(+), 41 deletions(-)
 delete mode 100644 packages/components/src/components/Address/Address.css
 delete mode 100644 packages/components/src/components/AddressInput/AddressInput.css

diff --git a/packages/components/package.json b/packages/components/package.json
index 4a8f0870..74405ebf 100644
--- a/packages/components/package.json
+++ b/packages/components/package.json
@@ -38,12 +38,13 @@
     "@chakra-ui/react": "^1.7.2",
     "@emotion/react": "^11",
     "@emotion/styled": "^11",
+    "@stitches/react": "^1.2.8",
     "framer-motion": "^4"
   },
   "peerDependencies": {
+    "ethers": "^5.5.2",
     "react": ">= 16.8.0 | >= 17.0.0",
-    "react-dom": ">= 16.8.0 | >= 17.0.0",
-    "ethers": "^5.5.2"
+    "react-dom": ">= 16.8.0 | >= 17.0.0"
   },
   "devDependencies": {
     "@web3-ui/hooks": "^0.12.0",
diff --git a/packages/components/src/components/Address/Address.css b/packages/components/src/components/Address/Address.css
deleted file mode 100644
index 28bfc2f1..00000000
--- a/packages/components/src/components/Address/Address.css
+++ /dev/null
@@ -1,10 +0,0 @@
-.Web3UI_Address__Container {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.Web3UI_Address__ErrorMessage {
-  color: red;
-  margin-top: 4px;
-}
diff --git a/packages/components/src/components/Address/Address.tsx b/packages/components/src/components/Address/Address.tsx
index a71f9804..a3d668de 100644
--- a/packages/components/src/components/Address/Address.tsx
+++ b/packages/components/src/components/Address/Address.tsx
@@ -1,7 +1,7 @@
 import { CopyIcon, CheckIcon } from '@chakra-ui/icons';
 import React, { useState, useEffect } from 'react';
 import { ethers } from 'ethers';
-import './Address.css';
+import { styled } from '@stitches/react';
 
 export interface AddressProps {
   /**
@@ -30,6 +30,17 @@ export interface AddressProps {
   className?: string;
 }
 
+const Container = styled('div', {
+  display: 'flex',
+  alignItems: 'center',
+  gap: '8px',
+});
+
+const ErrorMessage = styled('p', {
+  color: 'red',
+  marginTop: '4px',
+});
+
 /**
  * A component to display an address
  */
@@ -98,7 +109,7 @@ export const Address: React.FC<AddressProps> = ({
 
   return (
     <>
-      <div
+      <Container
         data-testid="address-container"
         className={`Web3UI_Address__Container ${className}`}
         style={{ cursor: copiable ? 'pointer' : 'initial' }}
@@ -110,8 +121,8 @@ export const Address: React.FC<AddressProps> = ({
         ) : (
           <CopyIcon marginLeft="auto" color="gray.300" />
         )}
-      </div>
-      <p className="Web3UI_Address__Error">{error}</p>
+      </Container>
+      <ErrorMessage className="Web3UI_Address__Error">{error}</ErrorMessage>
     </>
   );
 };
diff --git a/packages/components/src/components/AddressInput/AddressInput.css b/packages/components/src/components/AddressInput/AddressInput.css
deleted file mode 100644
index cb57cf2f..00000000
--- a/packages/components/src/components/AddressInput/AddressInput.css
+++ /dev/null
@@ -1,19 +0,0 @@
-.Web3UI_AddressInput__Container {
-  display: flex;
-  flex-direction: column;
-}
-
-/* .Web3UI_AddressInput__Label {
-} */
-
-.Web3UI_AddressInput__Input {
-  margin-top: 4px;
-  padding: 8px;
-  border-radius: 7px;
-  border: 1px solid #ccc;
-}
-
-.Web3UI_AddressInput__ErrorMessage {
-  color: red;
-  margin-top: 4px;
-}
diff --git a/packages/components/src/components/AddressInput/AddressInput.tsx b/packages/components/src/components/AddressInput/AddressInput.tsx
index 0f7dc772..b8f279a2 100644
--- a/packages/components/src/components/AddressInput/AddressInput.tsx
+++ b/packages/components/src/components/AddressInput/AddressInput.tsx
@@ -2,7 +2,7 @@ import React, { useEffect, useState } from 'react';
 import { ethers } from 'ethers';
 import { useDebounce } from './useDebounce';
 import { JsonRpcSigner } from '@ethersproject/providers';
-import './AddressInput.css';
+import { styled } from '@stitches/react';
 
 export interface AddressInputProps {
   /**
@@ -31,6 +31,25 @@ export interface AddressInputProps {
   inputClassName?: string;
 }
 
+const Container = styled('div', {
+  display: 'flex',
+  flexDirection: 'column',
+});
+
+const Label = styled('label', {});
+
+const Input = styled('input', {
+  marginTop: '4px',
+  padding: '8px',
+  borderRadius: '7px',
+  border: '1px solid #ccc',
+});
+
+const ErrorMessage = styled('p', {
+  color: 'red',
+  marginTop: '4px',
+});
+
 /**
  * A text input component that is used to get ETH addresses. ENS support included. You can also pass all the styling props of the Chakra UI Input component.
  */
@@ -90,15 +109,20 @@ export const AddressInput: React.FC<
   }, [inputValue]);
 
   return (
-    <div className={`Web3UI_AddressInput__Container ${className}`}>
-      {label && <label className="Web3UI_AddressInput__Label">{label}</label>}
-      <input
+    <Container className={`Web3UI_AddressInput__Container ${className}`}>
+      {label && <Label className="Web3UI_AddressInput__Label">{label}</Label>}
+      {/* @ts-expect-error TODO: Fix this type error */}
+      <Input
         className={`Web3UI_AddressInput__Input ${inputClassName}`}
         value={inputValue}
         onChange={(e) => setInputValue(e.target.value)}
         {...props}
       />
-      {error && <p className="Web3UI_AddressInput__ErrorMessage">{error}</p>}
-    </div>
+      {error && (
+        <ErrorMessage className="Web3UI_AddressInput__ErrorMessage">
+          {error}
+        </ErrorMessage>
+      )}
+    </Container>
   );
 };
diff --git a/yarn.lock b/yarn.lock
index e9d91d7b..a5489794 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3810,6 +3810,11 @@
   dependencies:
     "@sinonjs/commons" "^1.7.0"
 
+"@stitches/react@^1.2.8":
+  version "1.2.8"
+  resolved "https://registry.yarnpkg.com/@stitches/react/-/react-1.2.8.tgz#954f8008be8d9c65c4e58efa0937f32388ce3a38"
+  integrity sha512-9g9dWI4gsSVe8bNLlb+lMkBYsnIKCZTmvqvDG+Avnn69XfmHZKiaMrx7cgTaddq7aTPPmXiTsbFcUy0xgI4+wA==
+
 "@storybook/addon-actions@6.4.0", "@storybook/addon-actions@^6.4.0":
   version "6.4.0"
   resolved "https://registry.yarnpkg.com/@storybook/addon-actions/-/addon-actions-6.4.0.tgz#118dafe927bc480c1b07b3d1ed8643015190117c"