From efe5670147b82b74332c15c99993977100eb85ee Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Tue, 5 Apr 2022 12:32:41 -0500
Subject: [PATCH] Refactor VerificationBadge

---
 app/soapbox/components/verification_badge.tsx | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/app/soapbox/components/verification_badge.tsx b/app/soapbox/components/verification_badge.tsx
index f4ae7b7ab..a35597c07 100644
--- a/app/soapbox/components/verification_badge.tsx
+++ b/app/soapbox/components/verification_badge.tsx
@@ -1,10 +1,9 @@
 import classNames from 'classnames';
-import { Map as ImmutableMap } from 'immutable';
 import React from 'react';
 import { useIntl, defineMessages } from 'react-intl';
-import { useSelector } from 'react-redux';
 
 import Icon from 'soapbox/components/ui/icon/icon';
+import { useSoapboxConfig } from 'soapbox/hooks';
 
 const messages = defineMessages({
   verified: { id: 'account.verified', defaultMessage: 'Verified Account' },
@@ -14,12 +13,12 @@ interface IVerificationBadge {
   className?: string,
 }
 
-const VerificationBadge = ({ className }: IVerificationBadge) => {
+const VerificationBadge: React.FC<IVerificationBadge> = ({ className }) => {
   const intl = useIntl();
+  const soapboxConfig = useSoapboxConfig();
 
   // Prefer a custom icon if found
-  const customIcon = useSelector((state: ImmutableMap<string, any>) => state.getIn(['soapbox', 'verifiedIcon']));
-  const icon = customIcon || require('icons/verified.svg');
+  const icon = soapboxConfig.verifiedIcon || require('icons/verified.svg');
 
   // Render component based on file extension
   const Element = icon.endsWith('.svg') ? Icon : 'img';