Skip to content

Commit

Permalink
feature(ui-ux): add new tokens and dtokens for matic, sol, and dot (#…
Browse files Browse the repository at this point in the history 
…4016)

* feature(ui-ux): add new tokens and dtokens for matic, sol, and dot

* fix

* fix prop types

* fix update proper casing
  • Loading branch information
@chloezxyy
chloezxyy authored Aug 21, 2023
1 parent efd5b76 commit 81b224a
Show file tree
Hide file tree
Showing 7 changed files with 330 additions and 0 deletions.
50 changes: 50 additions & 0 deletions mobile-app/app/components/icons/assets/DOT.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
import Svg, { SvgProps, Path, G, Defs, Rect } from "react-native-svg";

export function DOT(props: SvgProps): JSX.Element {
return (
<Svg width="36" height="36" viewBox="0 0 36 36" fill="none" {...props}>
<Path
fillRule="evenodd"
clipRule="evenodd"
d="M0 18C0 8.05891 8.05891 0 18 0C27.9411 0 36 8.05891 36 18C36 27.9411 27.9411 36 18 36C8.05891 36 0 27.9411 0 18Z"
fill="#E6007A"
/>
<G clipPath="url(#clip0_7705_27256)">
<Path
d="M17.9992 11.4612C20.1174 11.4612 21.8346 10.4625 21.8346 9.2306C21.8346 7.99867 20.1174 7 17.9992 7C15.8811 7 14.1639 7.99867 14.1639 9.2306C14.1639 10.4625 15.8811 11.4612 17.9992 11.4612Z"
fill="white"
/>
<Path
d="M17.9992 28.2684C20.1174 28.2684 21.8346 27.2697 21.8346 26.0378C21.8346 24.8059 20.1174 23.8072 17.9992 23.8072C15.8811 23.8072 14.1639 24.8059 14.1639 26.0378C14.1639 27.2697 15.8811 28.2684 17.9992 28.2684Z"
fill="white"
/>
<Path
d="M12.6545 14.5489C13.7136 12.7145 13.7067 10.7278 12.6391 10.1115C11.5716 9.49508 9.84757 10.4824 8.78848 12.3168C7.72939 14.1511 7.73626 16.1378 8.80383 16.7542C9.8714 17.3706 11.5954 16.3832 12.6545 14.5489Z"
fill="white"
/>
<Path
d="M27.2084 22.9515C28.2675 21.1171 28.2612 19.1307 27.1943 18.5148C26.1275 17.8988 24.4041 18.8865 23.345 20.7209C22.2859 22.5552 22.2922 24.5416 23.359 25.1575C24.4259 25.7735 26.1493 24.7858 27.2084 22.9515Z"
fill="white"
/>
<Path
d="M12.6397 25.157C13.7072 24.5407 13.7141 22.554 12.655 20.7196C11.5959 18.8853 9.87193 17.8979 8.80436 18.5143C7.73679 19.1307 7.72992 21.1174 8.78901 22.9517C9.8481 24.7861 11.5721 25.7734 12.6397 25.157Z"
fill="white"
/>
<Path
d="M27.1952 16.7547C28.2621 16.1387 28.2684 14.1524 27.2093 12.318C26.1502 10.4837 24.4268 9.49597 23.3599 10.1119C22.2931 10.7279 22.2868 12.7143 23.3459 14.5486C24.405 16.383 26.1284 17.3706 27.1952 16.7547Z"
fill="white"
/>
</G>
<Defs>
<clipPath id="clip0_7705_27256">
<Rect
width="20"
height="21.2699"
fill="white"
transform="translate(8 7)"
/>
</clipPath>
</Defs>
</Svg>
);
}
30 changes: 30 additions & 0 deletions mobile-app/app/components/icons/assets/MATIC.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
import Svg, { Rect, Path, SvgProps, Defs, G } from "react-native-svg";

export function MATIC(props: SvgProps): JSX.Element {
return (
<Svg width="36" height="36" viewBox="0 0 36 36" fill="none" {...props}>
<Path
fillRule="evenodd"
clipRule="evenodd"
d="M0 18C0 8.05891 8.05891 0 18 0C27.9411 0 36 8.05891 36 18C36 27.9411 27.9411 36 18 36C8.05891 36 0 27.9411 0 18Z"
fill="#8247E5"
/>
<G clipPath="url(#clip0_7700_5237)">
<Path
d="M23.6146 13.8438C23.2135 13.6146 22.6979 13.6146 22.2396 13.8438L19.0312 15.7344L16.8542 16.9375L13.7031 18.8281C13.3021 19.0573 12.7865 19.0573 12.3281 18.8281L9.86458 17.3386C9.46354 17.1094 9.17708 16.6511 9.17708 16.1354V13.2708C9.17708 12.8125 9.40625 12.3542 9.86458 12.0677L12.3281 10.6354C12.7292 10.4063 13.2448 10.4063 13.7031 10.6354L16.1667 12.125C16.5677 12.3542 16.8542 12.8125 16.8542 13.3281V15.2188L19.0312 13.9583V12.0104C19.0312 11.5521 18.8021 11.0938 18.3437 10.8073L13.7604 8.11459C13.3594 7.88543 12.8437 7.88543 12.3854 8.11459L7.6875 10.8646C7.22917 11.0938 7 11.5521 7 12.0104V17.3958C7 17.8542 7.22917 18.3125 7.6875 18.599L12.3281 21.2917C12.7292 21.5208 13.2448 21.5208 13.7031 21.2917L16.8542 19.4583L19.0312 18.1979L22.1823 16.3646C22.5833 16.1354 23.099 16.1354 23.5573 16.3646L26.0208 17.7969C26.4219 18.0261 26.7083 18.4844 26.7083 19V21.8646C26.7083 22.3229 26.4792 22.7813 26.0208 23.0677L23.6146 24.5C23.2135 24.7292 22.6979 24.7292 22.2396 24.5L19.776 23.0677C19.375 22.8386 19.0885 22.3802 19.0885 21.8646V20.0313L16.9115 21.2917V23.1823C16.9115 23.6406 17.1406 24.099 17.599 24.3854L22.2396 27.0781C22.6406 27.3073 23.1562 27.3073 23.6146 27.0781L28.2552 24.3854C28.6562 24.1563 28.9427 23.6979 28.9427 23.1823V17.7396C28.9427 17.2813 28.7135 16.8229 28.2552 16.5365L23.6146 13.8438Z"
fill="white"
/>
</G>
<Defs>
<clipPath id="clip0_7700_5237">
<Rect
width="22"
height="19.1927"
fill="white"
transform="translate(7 8)"
/>
</clipPath>
</Defs>
</Svg>
);
}
79 changes: 79 additions & 0 deletions mobile-app/app/components/icons/assets/SOL.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,79 @@
import Svg, {
Stop,
Path,
SvgProps,
G,
Defs,
Rect,
LinearGradient,
} from "react-native-svg";

export function SOL(props: SvgProps): JSX.Element {
return (
<Svg width="36" height="36" viewBox="0 0 36 36" fill="none" {...props}>
<Path
fillRule="evenodd"
clipRule="evenodd"
d="M0 18C0 8.05891 8.05891 0 18 0C27.9411 0 36 8.05891 36 18C36 27.9411 27.9411 36 18 36C8.05891 36 0 27.9411 0 18Z"
fill="#0C192B"
/>
<G clipPath="url(#clip0_7705_27225)">
<Path
d="M11.2487 21.9638C11.3694 21.8431 11.5353 21.7727 11.7113 21.7727H27.6731C27.9648 21.7727 28.1106 22.1247 27.9045 22.3309L24.7513 25.484C24.6306 25.6047 24.4647 25.6751 24.2887 25.6751H8.32688C8.0352 25.6751 7.88936 25.3231 8.09555 25.1169L11.2487 21.9638Z"
fill="url(#paint0_linear_7705_27225)"
/>
<Path
d="M11.2486 10.1911C11.3743 10.0704 11.5403 10 11.7112 10H27.673C27.9647 10 28.1105 10.352 27.9043 10.5582L24.7512 13.7113C24.6305 13.832 24.4646 13.9024 24.2886 13.9024H8.32678C8.0351 13.9024 7.88926 13.5504 8.09545 13.3442L11.2486 10.1911Z"
fill="url(#paint1_linear_7705_27225)"
/>
<Path
d="M24.7513 16.0397C24.6306 15.919 24.4647 15.8486 24.2887 15.8486H8.32688C8.0352 15.8486 7.88936 16.2007 8.09555 16.4068L11.2487 19.56C11.3694 19.6807 11.5353 19.7511 11.7113 19.7511H27.6731C27.9648 19.7511 28.1106 19.399 27.9045 19.1929L24.7513 16.0397Z"
fill="url(#paint2_linear_7705_27225)"
/>
</G>
<Defs>
<LinearGradient
id="paint0_linear_7705_27225"
x1="26.1483"
y1="8.11642"
x2="15.1015"
y2="29.2755"
gradientUnits="userSpaceOnUse"
>
<Stop stopColor="#00FFA3" />
<Stop offset="1" stopColor="#DC1FFF" />
</LinearGradient>
<LinearGradient
id="paint1_linear_7705_27225"
x1="21.3179"
y1="5.5946"
x2="10.2711"
y2="26.7537"
gradientUnits="userSpaceOnUse"
>
<Stop stopColor="#00FFA3" />
<Stop offset="1" stopColor="#DC1FFF" />
</LinearGradient>
<LinearGradient
id="paint2_linear_7705_27225"
x1="23.7178"
y1="6.84748"
x2="12.671"
y2="28.0066"
gradientUnits="userSpaceOnUse"
>
<Stop stopColor="#00FFA3" />
<Stop offset="1" stopColor="#DC1FFF" />
</LinearGradient>
<clipPath id="clip0_7705_27225">
<Rect
width="20"
height="15.6751"
fill="white"
transform="translate(8 10)"
/>
</clipPath>
</Defs>
</Svg>
);
}
50 changes: 50 additions & 0 deletions mobile-app/app/components/icons/assets/dDOT.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
import Svg, { SvgProps, Path, G, Defs, Rect } from "react-native-svg";

export function dDOT(props: SvgProps): JSX.Element {
return (
<Svg width="36" height="36" viewBox="0 0 36 36" fill="none" {...props}>
<Path
fillRule="evenodd"
clipRule="evenodd"
d="M0 18C0 8.05891 8.05891 0 18 0C27.9411 0 36 8.05891 36 18C36 27.9411 27.9411 36 18 36C8.05891 36 0 27.9411 0 18Z"
fill="#FFE5F7"
/>
<G clipPath="url(#clip0_7705_27243)">
<Path
d="M17.9992 11.4612C20.1174 11.4612 21.8346 10.4625 21.8346 9.2306C21.8346 7.99867 20.1174 7 17.9992 7C15.8811 7 14.1639 7.99867 14.1639 9.2306C14.1639 10.4625 15.8811 11.4612 17.9992 11.4612Z"
fill="#E6007A"
/>
<Path
d="M17.9992 28.2684C20.1174 28.2684 21.8346 27.2697 21.8346 26.0378C21.8346 24.8059 20.1174 23.8072 17.9992 23.8072C15.8811 23.8072 14.1639 24.8059 14.1639 26.0378C14.1639 27.2697 15.8811 28.2684 17.9992 28.2684Z"
fill="#E6007A"
/>
<Path
d="M12.6545 14.5489C13.7136 12.7145 13.7067 10.7278 12.6391 10.1114C11.5716 9.49505 9.84756 10.4824 8.78847 12.3167C7.72938 14.1511 7.73626 16.1378 8.80383 16.7542C9.8714 17.3706 11.5954 16.3832 12.6545 14.5489Z"
fill="#E6007A"
/>
<Path
d="M27.2084 22.9515C28.2675 21.1171 28.2612 19.1307 27.1943 18.5148C26.1275 17.8988 24.4041 18.8865 23.345 20.7209C22.2859 22.5552 22.2922 24.5416 23.359 25.1575C24.4259 25.7735 26.1493 24.7858 27.2084 22.9515Z"
fill="#E6007A"
/>
<Path
d="M12.6397 25.157C13.7073 24.5406 13.7141 22.5539 12.655 20.7196C11.5959 18.8852 9.87195 17.8979 8.80438 18.5143C7.7368 19.1306 7.72993 21.1173 8.78902 22.9517C9.84811 24.786 11.5721 25.7734 12.6397 25.157Z"
fill="#E6007A"
/>
<Path
d="M27.1952 16.7547C28.2621 16.1387 28.2684 14.1524 27.2093 12.318C26.1502 10.4837 24.4268 9.49597 23.3599 10.1119C22.2931 10.7279 22.2868 12.7143 23.3459 14.5486C24.405 16.383 26.1284 17.3706 27.1952 16.7547Z"
fill="#E6007A"
/>
</G>
<Defs>
<clipPath id="clip0_7705_27243">
<Rect
width="20"
height="21.2699"
fill="white"
transform="translate(8 7)"
/>
</clipPath>
</Defs>
</Svg>
);
}
30 changes: 30 additions & 0 deletions mobile-app/app/components/icons/assets/dMATIC.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
import Svg, { G, Path, SvgProps, Defs } from "react-native-svg";

export function dMATIC(props: SvgProps): JSX.Element {
return (
<Svg width="36" height="36" viewBox="0 0 36 36" fill="none" {...props}>
<Path
fillRule="evenodd"
clipRule="evenodd"
d="M0 18C0 8.05891 8.05891 0 18 0C27.9411 0 36 8.05891 36 18C36 27.9411 27.9411 36 18 36C8.05891 36 0 27.9411 0 18Z"
fill="#FEFEFE"
/>
<G clipPath="url(#clip0_7700_19)">
<Path
d="M23.6146 13.8437C23.2135 13.6146 22.6979 13.6146 22.2396 13.8437L19.0312 15.7344L16.8542 16.9375L13.7031 18.8281C13.3021 19.0573 12.7865 19.0573 12.3281 18.8281L9.86458 17.3385C9.46354 17.1094 9.17708 16.651 9.17708 16.1354V13.2708C9.17708 12.8125 9.40625 12.3541 9.86458 12.0677L12.3281 10.6354C12.7292 10.4062 13.2448 10.4062 13.7031 10.6354L16.1667 12.125C16.5677 12.3541 16.8542 12.8125 16.8542 13.3281V15.2187L19.0312 13.9583V12.0104C19.0312 11.5521 18.8021 11.0937 18.3437 10.8073L13.7604 8.11456C13.3594 7.8854 12.8437 7.8854 12.3854 8.11456L7.6875 10.8646C7.22917 11.0937 7 11.5521 7 12.0104V17.3958C7 17.8541 7.22917 18.3125 7.6875 18.5989L12.3281 21.2916C12.7292 21.5208 13.2448 21.5208 13.7031 21.2916L16.8542 19.4583L19.0312 18.1979L22.1823 16.3646C22.5833 16.1354 23.099 16.1354 23.5573 16.3646L26.0208 17.7969C26.4219 18.026 26.7083 18.4844 26.7083 19V21.8646C26.7083 22.3229 26.4792 22.7812 26.0208 23.0677L23.6146 24.5C23.2135 24.7291 22.6979 24.7291 22.2396 24.5L19.776 23.0677C19.375 22.8385 19.0885 22.3802 19.0885 21.8646V20.0312L16.9115 21.2916V23.1823C16.9115 23.6406 17.1406 24.0989 17.599 24.3854L22.2396 27.0781C22.6406 27.3073 23.1562 27.3073 23.6146 27.0781L28.2552 24.3854C28.6562 24.1562 28.9427 23.6979 28.9427 23.1823V17.7396C28.9427 17.2812 28.7135 16.8229 28.2552 16.5364L23.6146 13.8437Z"
fill="#8247E5"
/>
</G>
<Defs>
<clipPath id="clip0_7700_19">
<rect
width="22"
height="19.1927"
fill="white"
transform="translate(7 8)"
/>
</clipPath>
</Defs>
</Svg>
);
}
79 changes: 79 additions & 0 deletions mobile-app/app/components/icons/assets/dSOL.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,79 @@
import Svg, {
SvgProps,
G,
Path,
Defs,
Stop,
Rect,
LinearGradient,
} from "react-native-svg";

export function dSOL(props: SvgProps): JSX.Element {
return (
<Svg width="36" height="36" viewBox="0 0 36 36" fill="none" {...props}>
<Path
fillRule="evenodd"
clipRule="evenodd"
d="M0 18C0 8.05891 8.05891 0 18 0C27.9411 0 36 8.05891 36 18C36 27.9411 27.9411 36 18 36C8.05891 36 0 27.9411 0 18Z"
fill="#F5F5F5"
/>
<G clipPath="url(#clip0_7700_27216)">
<Path
d="M11.2487 21.9638C11.3694 21.8431 11.5353 21.7727 11.7113 21.7727H27.6731C27.9648 21.7727 28.1106 22.1247 27.9045 22.3309L24.7513 25.484C24.6306 25.6047 24.4647 25.6751 24.2887 25.6751H8.32689C8.03521 25.6751 7.88937 25.3231 8.09556 25.1169L11.2487 21.9638Z"
fill="url(#paint0_linear_7700_27216)"
/>
<Path
d="M11.2486 10.1911C11.3743 10.0704 11.5403 10 11.7112 10H27.673C27.9647 10 28.1105 10.352 27.9044 10.5582L24.7512 13.7113C24.6305 13.832 24.4646 13.9024 24.2886 13.9024H8.32678C8.0351 13.9024 7.88926 13.5504 8.09545 13.3442L11.2486 10.1911Z"
fill="url(#paint1_linear_7700_27216)"
/>
<Path
d="M24.7513 16.0397C24.6306 15.919 24.4647 15.8486 24.2887 15.8486H8.32689C8.03521 15.8486 7.88937 16.2007 8.09556 16.4068L11.2487 19.56C11.3694 19.6807 11.5353 19.7511 11.7113 19.7511H27.6731C27.9648 19.7511 28.1106 19.399 27.9045 19.1929L24.7513 16.0397Z"
fill="url(#paint2_linear_7700_27216)"
/>
</G>
<Defs>
<LinearGradient
id="paint0_linear_7700_27216"
x1="26.1483"
y1="8.11642"
x2="15.1015"
y2="29.2755"
gradientUnits="userSpaceOnUse"
>
<Stop stopColor="#00FFA3" />
<Stop offset="1" stopColor="#DC1FFF" />
</LinearGradient>
<LinearGradient
id="paint1_linear_7700_27216"
x1="21.3179"
y1="5.5946"
x2="10.2711"
y2="26.7537"
gradientUnits="userSpaceOnUse"
>
<Stop stopColor="#00FFA3" />
<Stop offset="1" stopColor="#DC1FFF" />
</LinearGradient>
<LinearGradient
id="paint2_linear_7700_27216"
x1="23.7178"
y1="6.84748"
x2="12.671"
y2="28.0066"
gradientUnits="userSpaceOnUse"
>
<Stop stopColor="#00FFA3" />
<Stop offset="1" stopColor="#DC1FFF" />
</LinearGradient>
<clipPath id="clip0_7700_27216">
<Rect
width="20"
height="15.6751"
fill="white"
transform="translate(8 10)"
/>
</clipPath>
</Defs>
</Svg>
);
}
12 changes: 12 additions & 0 deletions mobile-app/app/components/icons/assets/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,13 +12,22 @@ import { dUSDT } from "./dUSDT";
import { dUSD } from "./dUSD";
import { DFIlogo } from "./plainDFI";
import { dEUROC } from "./dEUROC";
import { DOT } from "./DOT";
import { SOL } from "./SOL";
import { MATIC } from "./MATIC";
import { dDOT } from "./dDOT";
import { dMATIC } from "./dMATIC";
import { dSOL } from "./dSOL";

const mapping: Record<string, (props: SvgProps) => JSX.Element> = {
_UTXO: DFI,
DFI: DFI,
"DFI (UTXO)": DFI,
"DFI (Token)": DFI,
BTC: BTC,
DOT: DOT,
MATIC: MATIC,
SOL: SOL,
dBCH: dBCH,
dBTC: dBTC,
dDFI: DFI,
Expand All @@ -31,6 +40,9 @@ const mapping: Record<string, (props: SvgProps) => JSX.Element> = {
DUSD: dUSD,
dEUROC: dEUROC,
DFIlogo: DFIlogo,
dDOT: dDOT,
dMATIC: dMATIC,
dSOL: dSOL,
};

/**
Expand Down

0 comments on commit 81b224a

Please sign in to comment.